Flutter主题管理插件custom_theme

Flutter主题管理插件custom_theme_controller的使用

特性

它用于在应用程序中切换亮色和暗色主题。
使用GetX状态管理工具。

开始使用

在pubspec.yaml文件中添加依赖项。
在pubspec.yaml文件中添加GetX依赖项。

使用示例

import 'package:flutter/material.dart';
import 'package:get/get.dart';

// 主题控制器类
class ThemeController extends GetxController {
  // 是否启用暗色模式的可观察变量
  var isDarkMode = false.obs;

  // 切换主题模式的方法
  void toggleTheme() {
    isDarkMode.value = !isDarkMode.value;
  }
}

// 应用主题定义
class AppTheme {
  static final lightTheme = ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
  );

  static final darkTheme = ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.blue,
  );
}

// 主页类
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 切换主题模式
            Get.find<ThemeController>().toggleTheme();
          },
          child: Text('切换主题'),
        ),
      ),
    );
  }
}

// 应用程序主入口
class MyApp extends StatelessWidget {
  MyApp({super.key});

  // 初始化主题控制器
  final themeController = Get.put(ThemeController());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Obx(() => MaterialApp(
      theme: themeController.isDarkMode.value ? AppTheme.darkTheme : AppTheme.lightTheme,
      home: HomePage(),
    ));
  }
}

更多关于Flutter主题管理插件custom_theme_controller的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter主题管理插件custom_theme_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

custom_theme_controller 是一个用于管理 Flutter 应用主题的自定义插件。它可以帮助你在应用中轻松切换和管理不同的主题。以下是如何使用 custom_theme_controller 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 custom_theme_controller 的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_theme_controller: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建主题

在你的应用中定义不同的主题。你可以使用 ThemeData 来定义主题：

import 'package:flutter/material.dart';

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,
);

3. 初始化 `CustomThemeController`

在你的 main.dart 文件中初始化 CustomThemeController，并将其与 MaterialApp 绑定：

import 'package:flutter/material.dart';
import 'package:custom_theme_controller/custom_theme_controller.dart';

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

class MyApp extends StatelessWidget {
  final CustomThemeController _themeController = CustomThemeController();

  MyApp() {
    // 设置默认主题
    _themeController.setTheme(lightTheme);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _themeController,
      builder: (context, child) {
        return MaterialApp(
          title: 'Flutter Theme Demo',
          theme: _themeController.currentTheme,
          home: MyHomePage(themeController: _themeController),
        );
      },
    );
  }
}

4. 在页面中使用 `CustomThemeController`

在你的页面中，你可以使用 CustomThemeController 来切换主题：

import 'package:flutter/material.dart';
import 'package:custom_theme_controller/custom_theme_controller.dart';

class MyHomePage extends StatelessWidget {
  final CustomThemeController themeController;

  MyHomePage({required this.themeController});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                themeController.setTheme(lightTheme);
              },
              child: Text('Light Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                themeController.setTheme(darkTheme);
              },
              child: Text('Dark Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 持久化主题设置（可选）

如果你希望在应用重启后仍然保持用户选择的主题，你可以将主题设置持久化到本地存储中。例如，使用 shared_preferences 插件来保存和加载主题设置。

import 'package:shared_preferences/shared_preferences.dart';

class CustomThemeController extends ChangeNotifier {
  ThemeData _currentTheme = lightTheme;

  ThemeData get currentTheme => _currentTheme;

  setTheme(ThemeData theme) async {
    _currentTheme = theme;
    notifyListeners();

    // 保存主题设置
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('theme', theme == lightTheme ? 'light' : 'dark');
  }

  loadTheme() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String? theme = prefs.getString('theme');
    if (theme == 'dark') {
      _currentTheme = darkTheme;
    } else {
      _currentTheme = lightTheme;
    }
    notifyListeners();
  }
}

在 main.dart 中调用 loadTheme() 来加载保存的主题：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final CustomThemeController themeController = CustomThemeController();
  await themeController.loadTheme();
  runApp(MyApp(themeController: themeController));
}

Flutter主题管理插件custom_theme_controller的使用