flutter主题更换设计

包安装

这里我使用的是 adaptive_theme: ^3.6.0, 详细的可以参考这里

配置

1. 文件配置

@override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
        // 亮色：主题颜色配置
        light: ThemeData(
            useMaterial3: true,
            brightness: Brightness.light,
            primaryColor: Colors.blue,
            scaffoldBackgroundColor: Colors.white),
        // 暗色：主题配置    
        dark: ThemeData(
            useMaterial3: true,
            brightness: Brightness.dark,
            primaryColor: Colors.black,
            scaffoldBackgroundColor: Colors.black),
        // 读取切换主题配置
        initial: savedThemeMode ?? AdaptiveThemeMode.light,
        // 显示主题调试按钮
        debugShowFloatingThemeButton: true,
        builder: (theme, darkTheme) => MaterialApp(
              theme: theme,
              darkTheme: darkTheme,
              initialRoute: '/',
              home: const Home(),
              debugShowCheckedModeBanner: false,
              routes: {
                "/test_page": (BuildContext context) => const TestPage()
              },
            ));
  }

2. 变化监听

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedThemeMode = await AdaptiveTheme.getThemeMode();
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

// 注入到 `MyApp` 组件
final AdaptiveThemeMode? savedThemeMode;
const MyApp({super.key, this.savedThemeMode});

设置过渡效果

这里我在 index_page.dart 文件

AnimatedTheme(
    // 主题数据
    data: Theme.of(context),
    // 过渡时间
    duration: const Duration(milliseconds: 200),
    // 过渡动画
    curve: Curves.easeOut,
    child: Scaffold(
        appBar: AppBar(
        title: const Text("首页"),
        actions: [
            IconButton(icon: const Icon(Icons.share), onPressed: () {})
        ],
        ),
        body: pagelist[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
        items: const [
            BottomNavigationBarItem(icon: Icon(Icons.abc), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.abc_sharp), label: "我的")
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
            setState(() {
            _currentIndex = index;
            });
        },
        fixedColor: Colors.blue,
        ),
    ));

切换

1. 自由切换

ElevatedButton(
    child: const Text("切换主题"),
    onPressed: () {
        // 切换主题
        AdaptiveTheme.of(context).toggleThemeMode();
    },
),

2. 设置深色

ElevatedButton(
    child: const Text("切换主题"),
    onPressed: () {
        // 切换主题, 设置深色
        AdaptiveTheme.of(context).setDark();
    },
),

2. 设置浅色

ElevatedButton(
    child: const Text("切换主题"),
    onPressed: () {
        // 切换主题, 设置浅色
        AdaptiveTheme.of(context).setLight();
    },
),