Flutter深色模式适配教程

Flutter深色模式适配教程

3 回复
  1. 配置 ThemeData brightness
  2. 使用 Theme.of(context).brightness 检测系统模式
  3. 动态切换主题颜色
  4. 示例代码实践

更多关于Flutter深色模式适配教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


  1. 使用ThemeData的brightness属性设置主题亮度。
  2. 根据系统设置监听系统亮度变化。
  3. 每个Widget按需定义亮/暗模式样式。

在Flutter中实现深色模式适配，可以通过使用ThemeData和MediaQuery来动态切换应用的主题。以下是实现深色模式适配的步骤：

1. 创建深色和浅色主题

首先，定义深色和浅色主题的ThemeData。

final ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  accentColor: Colors.blueAccent,
  // 其他浅色主题配置
);

final ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.indigo,
  accentColor: Colors.indigoAccent,
  // 其他深色主题配置
);

2. 使用Provider管理主题状态

使用Provider来管理应用的主题状态，方便在应用中进行主题切换。

class ThemeProvider with ChangeNotifier {
  ThemeData _themeData = lightTheme;

  ThemeData get themeData => _themeData;

  void toggleTheme() {
    _themeData = _themeData.brightness == Brightness.light ? darkTheme : lightTheme;
    notifyListeners();
  }
}

3. 在MaterialApp中应用主题

在MaterialApp中使用Provider提供的主题数据。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return MaterialApp(
      theme: themeProvider.themeData,
      home: HomeScreen(),
    );
  }
}

4. 添加主题切换按钮

在应用的某个页面中添加一个按钮，用于切换主题。

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('深色模式适配'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            themeProvider.toggleTheme();
          },
          child: Text('切换主题'),
        ),
      ),
    );
  }
}

5. 根据系统设置自动切换主题

如果需要根据系统设置自动切换主题，可以使用MediaQuery来获取系统的亮度设置。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    final brightness = MediaQuery.of(context).platformBrightness;

    themeProvider._themeData = brightness == Brightness.dark ? darkTheme : lightTheme;

    return MaterialApp(
      theme: themeProvider.themeData,
      home: HomeScreen(),
    );
  }
}

通过以上步骤，你可以轻松地在Flutter应用中实现深色模式适配，并根据用户偏好或系统设置动态切换主题。

回到顶部