Flutter主题切换插件theme_changer的使用

动态地改变你的Flutter应用的主题，使用Flutter主题切换插件。可以无缝地在所有屏幕中修改背景色、应用栏颜色和按钮颜色。

特性

theme_changer 包允许用户动态更改应用程序主题，并提供对各种UI元素的定制选项。主要特性包括：

• 动态更改背景颜色。
• 根据用户偏好自定义按钮颜色。
• 调整应用栏颜色以匹配所需主题。

开始使用

要开始使用 theme_changer 包，请遵循以下步骤：

1. 在 pubspec.yaml 文件中添加包依赖：

   dependencies:
     theme_changer: ^1.0.0
   

2. 运行 flutter pub get 安装包。

3. 在 Dart 代码中导入包：

   import 'package:theme_changer/theme_changer.dart';
   

使用方法

使用 ThemeChanger 类来启用动态主题更改。

示例

查看 /example 目录下的完整示例，了解如何使用该包。

要运行示例，请导航到 example 目录并执行 main.dart。

const like = 'theme changer';

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '动态主题切换器',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color _appBarColor = Colors.blue; // 默认应用栏颜色
  Color _bgColor = Colors.blue; // 默认背景颜色
  Color _buttonColor = Colors.blue; // 默认按钮颜色

  void _openColorPicker(Color initialColor, ValueChanged<Color> onColorChanged) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        Color selectedColor = initialColor;

        return AlertDialog(
          title: const Text('选择一个颜色'),
          content: SingleChildScrollView(
            child: ColorPicker(
              pickerColor: selectedColor,
              onColorChanged: (Color color) {
                selectedColor = color;
              },
              pickerAreaHeightPercent: 0.8,
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('完成'),
              onPressed: () {
                onColorChanged(selectedColor);
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  void _openAppbarColorPicker() {
    _openColorPicker(_appBarColor, (Color color) {
      setState(() => _appBarColor = color);
    });
  }

  void _openBgColorPicker() {
    _openColorPicker(_bgColor, (Color color) {
      setState(() => _bgColor = color);
    });
  }

  void _openButtonColorPicker() {
    _openColorPicker(_buttonColor, (Color color) {
      setState(() => _buttonColor = color);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动态主题切换器'),
        centerTitle: true,
        backgroundColor: _appBarColor, // 动态设置应用栏颜色
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '应用内容在这里！',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SecondPage(
                      appBarColor: _appBarColor,
                      bgColor: _bgColor,
                      buttonColor: _buttonColor,
                    ),
                  ),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: _buttonColor, // 动态设置按钮颜色
              ),
              child: Text('转到第二个页面'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ThirdPage(
                      appBarColor: _appBarColor,
                      bgColor: _bgColor,
                      buttonColor: _buttonColor,
                    ),
                  ),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: _buttonColor, // 动态设置按钮颜色
              ),
              child: Text('转到第三个页面'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _openAppbarColorPicker();
          _openBgColorPicker();
          _openButtonColorPicker();
        },
        tooltip: '更改主题',
        child: Icon(Icons.color_lens),
      ),
      // 应用选定的颜色作为应用的主要颜色
      backgroundColor: _bgColor,
    );
  }
}

class SecondPage extends StatelessWidget {
  final Color appBarColor;
  final Color bgColor;
  final Color buttonColor;

  SecondPage({required this.appBarColor, required this.bgColor, required this.buttonColor});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
        backgroundColor: appBarColor, // 动态设置应用栏颜色
      ),
      body: Center(
        child: Text(
          '第二个页面内容在这里！',
          style: TextStyle(fontSize: 24),
        ),
      ),
      // 应用选定的颜色作为应用的主要颜色
      backgroundColor: bgColor,
    );
  }
}

class ThirdPage extends StatelessWidget {
  final Color appBarColor;
  final Color bgColor;
  final Color buttonColor;

  ThirdPage({required this.appBarColor, required this.bgColor, required this.buttonColor});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第三个页面'),
        backgroundColor: appBarColor, // 动态设置应用栏颜色
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              decoration: InputDecoration(
                labelText: '输入文本',
                prefixIcon: Icon(Icons.text_fields), // 添加文本字段图标
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 添加您的按钮功能
              },
              style: ElevatedButton.styleFrom(
                primary: buttonColor, // 动态设置按钮颜色
              ),
              child: Text('提交'),
            ),
          ],
        ),
      ),
      // 应用选定的颜色作为应用的主要颜色
      backgroundColor: bgColor,
    );
  }
}