面试题：Flutter Material组件库中主题定制与动态切换

Question

在Flutter的Material组件库中，如何定制应用的主题（如颜色、字体等）？并且阐述如何实现主题的动态切换，例如在应用运行过程中，用户点击按钮可以切换白天/黑夜模式。

Answer 1

定制应用主题

1. 创建主题数据：在Flutter中，可以通过ThemeData类来创建应用的主题数据。例如，定制颜色和字体：

final ThemeData myTheme = ThemeData(
  primarySwatch: Colors.blue, // 主色板
  fontFamily: 'Roboto', // 字体
  textTheme: const TextTheme(
    headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
    bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
  ),
);

2. 应用主题：在MaterialApp中应用定义好的主题：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: myTheme,
      home: HomePage(),
    );
  }
}

主题动态切换

1. 定义多个主题：分别定义白天和黑夜主题：

final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
  // 其他白天主题相关设置
);

final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.grey,
  brightness: Brightness.dark,
  // 其他黑夜主题相关设置
);

2. 使用InheritedWidget或状态管理：这里以状态管理为例，使用Provider库。
   • 安装provider库：在pubspec.yaml文件中添加provider: ^[最新版本号]并运行flutter pub get。
   • 创建主题状态管理类：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ThemeProvider with ChangeNotifier {
  ThemeData _currentTheme;

  ThemeProvider(this._currentTheme);

  ThemeData get currentTheme => _currentTheme;

  void switchTheme(ThemeData theme) {
    _currentTheme = theme;
    notifyListeners();
  }
}

3. 应用主题切换逻辑：
   • 在main.dart中设置Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(lightTheme),
      child: MyApp(),
    ),
  );
}

• 在页面中实现按钮切换主题：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Scaffold(
      appBar: AppBar(title: Text('主题切换示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (themeProvider.currentTheme.brightness == Brightness.light) {
              themeProvider.switchTheme(darkTheme);
            } else {
              themeProvider.switchTheme(lightTheme);
            }
          },
          child: Text(
            themeProvider.currentTheme.brightness == Brightness.light
              ? '切换到黑夜模式'
              : '切换到白天模式',
          ),
        ),
      ),
    );
  }
}

这样就实现了在Flutter中定制应用主题以及动态切换主题的功能。