Flutter 动态主题切换与自定义主题

1. 简介

Flutter 是一个跨平台的开发框架，支持多种平台的 UI 开发。在现代应用中，用户对个性化体验的需求越来越高，因此支持多种主题模式的应用成为了标准。在这篇文章中，我们将通过代码示例，演示如何实现 Flutter 中的动态主题切换，包括亮色模式、深色模式以及自定义主题模式，带你深入理解如何灵活控制应用的外观风格。

2. 效果图

3. Flutter 中的主题系统

Flutter 提供了强大的主题系统，使用 ThemeData 类可以定义应用的全局外观风格。配合 ThemeMode，你可以轻松实现多种主题切换。

• ThemeData：用于定义具体的颜色、字体、按钮样式等。

• ThemeMode：控制当前主题模式，有三种值：

• ThemeMode.light：强制应用亮色主题。

• ThemeMode.dark：强制应用深色主题。

• ThemeMode.system：根据系统的主题设置自动切换。

3. 定义

自定义颜色这里我举例用的是scaffoldBackgroundColor作为背景颜色，如果想要对应的按钮、字体、分割线等等颜色 可以进去ThemeData里面看对应的名称，想要的东西对应的都有

4. 使用

把背景颜色改成我们刚才定义的scaffoldBackgroundColor

5. 完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.system; // 默认跟随系统
  bool _isCustomTheme = false; // 是否启用自定义主题

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dynamic Theme',
      theme: _isCustomTheme ? _customTheme() : ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: _themeMode,
      home: HomePage(
        onThemeChanged: (ThemeMode themeMode) {
          setState(() {
            _themeMode = themeMode;
          });
        },
        onCustomThemeChanged: () {
          setState(() {
            _isCustomTheme = !_isCustomTheme;
          });
        },
      ),
    );
  }

  //自定义主题
  ThemeData _customTheme() {
    if (!_isCustomTheme) {
      return ThemeData.light();
    }
    return ThemeData(
      scaffoldBackgroundColor: Colors.yellow,
    );
  }
}

class HomePage extends StatelessWidget {
  final Function(ThemeMode) onThemeChanged;
  final VoidCallback onCustomThemeChanged;

  const HomePage(
      {super.key,
      required this.onThemeChanged,
      required this.onCustomThemeChanged});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      appBar: AppBar(title: Text('动态主题切换')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () => onThemeChanged(ThemeMode.light),
            child: Text('切换到亮色模式'),
          ),
          ElevatedButton(
            onPressed: () => onThemeChanged(ThemeMode.dark),
            child: Text('切换到深色模式'),
          ),
          ElevatedButton(
            onPressed: () => onThemeChanged(ThemeMode.system),
            child: Text('跟随系统设置'),
          ),
          ElevatedButton(
            onPressed: onCustomThemeChanged,
            child: Text('切换到自定义主题'),
          ),
        ],
      ),
    );
  }
}