面试题：Flutter中Material Design主题的动态切换实现

Question

在一个Flutter应用中，要求实现Material Design主题（如亮色主题和暗色主题）的动态切换。请阐述实现思路，并详细说明如何管理主题状态以及应用到整个应用的各个Widget上，同时给出关键代码片段。

Answer 1

实现思路

1. 状态管理：使用状态管理机制（如 Provider、Riverpod 或 InheritedWidget）来管理主题状态。这能确保主题状态在整个应用中可共享且易于更新。
2. 主题切换逻辑：提供切换主题的方法，例如在设置页面中添加按钮，点击按钮时改变主题状态。
3. 应用主题到Widget：通过 MaterialApp 的 theme 和 darkTheme 属性来应用亮色和暗色主题，并根据主题状态动态切换。

主题状态管理

1. 使用Provider管理主题状态
   • 首先定义主题状态类：

class ThemeNotifier extends ChangeNotifier {
  bool _isDarkTheme = false;

  bool get isDarkTheme => _isDarkTheme;

  void toggleTheme() {
    _isDarkTheme =!_isDarkTheme;
    notifyListeners();
  }
}

• 在 main.dart 中，将 ThemeNotifier 用 ChangeNotifierProvider 包裹应用：

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

应用主题到Widget

1. 在MaterialApp中应用主题

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final themeNotifier = context.watch<ThemeNotifier>();
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: themeNotifier.isDarkTheme? ThemeMode.dark : ThemeMode.light,
      home: const HomePage(),
    );
  }
}

2. 在页面中添加主题切换按钮

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final themeNotifier = context.read<ThemeNotifier>();
    return Scaffold(
      appBar: AppBar(
        title: const Text('主题切换'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            themeNotifier.toggleTheme();
          },
          child: const Text('切换主题'),
        ),
      ),
    );
  }
}