Flutter主题管理插件ele_theme的使用

Flutter主题管理插件ele_theme的使用

特性

TODO: 列出您的包可以做什么。也许可以包含图片、GIF或视频。

开始使用

TODO: 列出先决条件，并提供或指向有关如何开始使用该包的信息。

使用

TODO: 包含包用户的简短且有用的示例。将更长的示例添加到/example文件夹。

// 导入ele_theme包
import 'package:ele_theme/ele_theme.dart';

void main() {
  // 初始化主题管理器
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      // 设置初始主题
      initialTheme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      child: MaterialApp(
        title: 'Flutter Demo',
        themeMode: ThemeMode.system, // 根据系统设置自动切换主题
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = ThemeProvider.of(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 主题管理示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '你看到的是一个可配置的主题示例应用！',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换主题模式
                if (themeProvider.themeMode == ThemeMode.light) {
                  themeProvider.setThemeMode(ThemeMode.dark);
                } else {
                  themeProvider.setThemeMode(ThemeMode.light);
                }
              },
              child: Text('切换主题模式'),
            ),
          ],
        ),
      ),
    );
  }
}

额外信息

TODO: 告诉用户更多关于包的信息：在哪里找到更多信息，如何为包做贡献，如何提交问题，他们可以从包作者那里期望得到什么响应，等等。


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

1 回复

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


ele_theme 是一个用于 Flutter 应用程序的主题管理插件，它可以帮助开发者更方便地管理和切换应用的主题。以下是 ele_theme 插件的基本使用步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 ele_theme 插件的依赖：

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

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

2. 创建主题

在 ele_theme 中，你可以定义多个主题。首先，创建一个 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. 配置 EleTheme

接下来，在应用的根部件中配置 EleTheme 并提供你定义的主题：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return EleTheme(
      defaultTheme: lightTheme,
      themes: {
        'light': lightTheme,
        'dark': darkTheme,
      },
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: EleTheme.of(context),  // 使用 EleTheme 提供的主题
        home: MyHomePage(),
      ),
    );
  }
}

4. 切换主题

你可以使用 EleThemeController 来切换主题。首先，在需要切换主题的地方获取 EleThemeController，然后调用 changeTheme 方法：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeController = EleThemeController.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: ${themeController.currentThemeKey}',
            ),
            ElevatedButton(
              onPressed: () {
                themeController.changeTheme('light');
              },
              child: Text('Light Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                themeController.changeTheme('dark');
              },
              child: Text('Dark Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 获取当前主题

你可以通过 EleTheme.of(context) 来获取当前应用的主题，并将其应用于 MaterialApp 或其他部件。

6. 持久化主题

如果你希望在应用重启后保持用户选择的主题，可以将当前主题的键值存储在本地存储中（如 SharedPreferences），并在应用启动时加载。

import 'package:shared_preferences/shared_preferences.dart';

// 保存主题
void saveTheme(String themeKey) async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setString('theme', themeKey);
}

// 加载主题
Future<String> loadTheme() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('theme') ?? 'light';
}
回到顶部