Flutter主题管理插件app_theme

Flutter主题管理插件app_theme_manager的使用

App Theme Manager 是一个用于管理亮色主题和暗色主题，并支持持久化的Flutter插件。

安装

首先，在你的pubspec.yaml文件中添加该插件：

dependencies:
  app_theme_manager: ^1.0.0

接下来，我们需要配置和使用这个插件来实现主题管理功能。以下是一个完整的示例Demo，展示如何在Flutter应用中使用app_theme_manager插件来切换主题。

配置和使用

首先，确保你已经在项目中添加了app_theme_manager依赖。然后，我们可以通过以下步骤来设置和切换主题。

初始化主题管理器

在main.dart文件中，初始化主题管理器并设置初始主题。

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

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

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

class _MyAppState extends State<MyApp> {
  AppThemeManager _themeManager;

  @override
  void initState() {
    super.initState();
    // 初始化主题管理器
    _themeManager = AppThemeManager(
      defaultThemeMode: ThemeMode.system, // 使用系统默认主题模式
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _themeManager.lightTheme,
      darkTheme: _themeManager.darkTheme,
      themeMode: _themeManager.themeMode,
      home: MyHomePage(),
    );
  }
}

创建主页

创建一个主页，允许用户切换主题。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主题管理示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 切换到亮色主题
                _themeManager.setTheme(ThemeMode.light);
              },
              child: Text('切换到亮色主题'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到暗色主题
                _themeManager.setTheme(ThemeMode.dark);
              },
              child: Text('切换到暗色主题'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到系统默认主题
                _themeManager.setTheme(ThemeMode.system);
              },
              child: Text('切换到系统默认主题'),
            ),
          ],
        ),
      ),
    );
  }
}

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

bupafengyu 1楼

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

app_theme_manager 是一个用于管理 Flutter 应用主题的插件，它可以帮助你轻松地在应用中切换和管理不同的主题。以下是如何使用 app_theme_manager 插件的详细步骤。

1. 添加依赖

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

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

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

2. 创建主题

你可以在项目中定义多个主题。假设我们定义两个主题：lightTheme 和 darkTheme。

import 'package:flutter/material.dart';

final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
);

final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.blueGrey,
  brightness: Brightness.dark,
);

3. 初始化 `AppThemeManager`

在 main.dart 文件中，初始化 AppThemeManager 并设置默认主题。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 AppThemeManager
  await AppThemeManager.instance.initialize(
    themes: {
      'light': lightTheme,
      'dark': darkTheme,
    },
    defaultThemeId: 'light',  // 设置默认主题
  );

  runApp(MyApp());
}

4. 使用 `AppThemeManager` 管理主题

在你的应用中使用 AppThemeManager 来获取当前主题或切换主题。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Manager Demo',
      theme: AppThemeManager.instance.currentTheme,  // 使用当前主题
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Manager Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Current Theme: ${AppThemeManager.instance.currentThemeId}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到暗黑主题
                AppThemeManager.instance.setTheme('dark');
              },
              child: Text('Switch to Dark Theme'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到亮色主题
                AppThemeManager.instance.setTheme('light');
              },
              child: Text('Switch to Light Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 持久化主题

你可以使用 AppThemeManager 的持久化功能来保存用户选择的主题。在初始化时启用持久化：

await AppThemeManager.instance.initialize(
  themes: {
    'light': lightTheme,
    'dark': darkTheme,
  },
  defaultThemeId: 'light',
  persist: true,  // 启用持久化
);

6. 监听主题变化

你可以监听主题变化，以便在主题切换时更新 UI。

AppThemeManager.instance.addListener(() {
  // 当主题变化时，更新 UI
  setState(() {});
});

Flutter主题管理插件app_theme_manager的使用