Flutter 中优雅切换应用主题的组件

前言

在Flutter应用开发中，主题切换是一个常见的需求。今天我们将介绍如何使用adaptive_theme这个强大的组件来实现优雅的主题切换功能。同时，对于iOS开发者来说，在完成Flutter应用开发后，可以使用AppUploader这款iOS开发助手来简化应用上架流程。

adaptive_theme组件介绍

Adaptive Theme通过包裹MaterialApp的方式整体管理theme主题，实现如下功能：

• 切换light、dark、system三种模式
• 自定义色彩
• 保存主题选择
• 开启调试按钮

安装配置

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
    
  adaptive_theme: ^3.6.0

lib/main.dart

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

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData.light(useMaterial3: true),
      dark: ThemeData.dark(useMaterial3: true),
      initial: AdaptiveThemeMode.light,
      debugShowFloatingThemeButton: true,
      builder: (theme, darkTheme) => MaterialApp(
        title: 'Flutter Demo',
        theme: theme,
        darkTheme: darkTheme,
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

提示：debugShowFloatingThemeButton参数可以开启调试按钮

设置主题

设置亮色

ElevatedButton(
  onPressed: () {
    AdaptiveTheme.of(context).setLight();
  },
  child: const Text('Set Light Theme'),
),

设置暗色

ElevatedButton(
  onPressed: () {
    AdaptiveTheme.of(context).setDark();
  },
  child: const Text('Set Dark Theme'),
),

设置系统

ElevatedButton(
  onPressed: () {
    AdaptiveTheme.of(context).setSystem();
  },
  child: const Text('Set System Theme'),
),

toggle切换

ElevatedButton(
  onPressed: () {
    AdaptiveTheme.of(context).toggleThemeMode();
  },
  child: const Text('Toggle Theme Mode'),
),

重置样式

ElevatedButton(
  onPressed: () {
    AdaptiveTheme.of(context).reset();
  },
  child: const Text('Reset Theme'),
),

监听样式切换

// 监听当前样式
ValueListenableBuilder(
  valueListenable: AdaptiveTheme.of(context).modeChangeNotifier,
  builder: (_, mode, child) {
    return Text(mode.modeName);
  },
),

自定义样式颜色

ElevatedButton(
  onPressed: () {
    AdaptiveTheme.of(context).setTheme(
      light: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.green,
      ),
      dark: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.brown,
      ),
    );
  },
  child: const Text('Change Theme Color'),
),

读取配置

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

class MyApp extends StatelessWidget {
  final AdaptiveThemeMode? savedThemeMode;

  const MyApp({super.key, this.savedThemeMode});

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData.light(useMaterial3: true),
      dark: ThemeData.dark(useMaterial3: true),
      initial: savedThemeMode ?? AdaptiveThemeMode.light,
      debugShowFloatingThemeButton: true,
      builder: (theme, darkTheme) => MaterialApp(
        title: 'Flutter Demo',
        theme: theme,
        darkTheme: darkTheme,
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

应用上架建议

在完成Flutter应用的开发后，iOS开发者可以使用AppUploader来简化应用上架流程。AppUploader是一款专业的iOS开发助手，可以帮助开发者快速完成应用打包、证书管理和App Store上传等工作，特别适合Flutter开发者使用。

小结

通过使用Flutter的adaptive_theme组件，我们可以轻松地实现应用主题的切换功能。该组件提供了简单的方法来手动设置浅色或深色主题，并且还可以根据系统定义的主题进行自适应切换。无论是在用户界面上还是在代码层面上，我们可以灵活地控制应用程序的主题外观，为用户提供更好的体验。

对于iOS开发者来说，在应用开发完成后，可以考虑使用AppUploader这样的专业工具来简化上架流程，提高工作效率。