Flutter颜色处理插件x_color的使用

x_color

x_color 是一个为 Flutter 远程 UI 项目设计的动态和远程颜色数据持有者。

安装

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

dependencies:
  x_color: latest

然后运行以下命令以安装依赖：

flutter pub get

使用与示例代码

x_color 扩展了 Color 类，因此可以在任何原本需要 Color 的地方使用它。

示例代码

以下是完整的示例代码，展示了如何使用 x_color 插件来动态更改应用的主题颜色。

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

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

class MyApp extends StatelessWidget {
  // 这是应用程序的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: DemoPage(title: 'XColor'),
    );
  }
}

class DemoPage extends StatefulWidget {
  DemoPage({Key key, this.title}) : super(key: key);

  // 这是应用程序的主页小部件。它是有状态的，意味着它有一个包含影响其外观的字段的状态对象。
  // 这个类是状态的配置。它保存由父级（在这个例子中是App小部件）提供的值（例如标题），并由State的构建方法使用。
  // 小部件子类中的字段总是标记为“final”。

  final String title;

  [@override](/user/override)
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int _counter = 0;
  Color primaryColor = Colors.blueGrey;

  void _incrementCounter() {
    setState(() {
      // 调用setState告诉Flutter框架某些东西发生了变化，这会导致它重新运行build方法，
      // 以便显示可以反映更新后的值。如果我们不调用setState而改变_counter，则不会重新运行build方法，
      // 因此看起来什么也不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时，此方法都会重新运行。
    return Theme(
        data: ThemeData(
          primaryColor: primaryColor,
          accentColor: primaryColor,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 输入框用于动态更改主题颜色
                TextField(
                  decoration: InputDecoration(
                    border: InputBorder.none
                  ),
                  style: Theme.of(context).textTheme.headline2,
                  textAlign: TextAlign.center,
                  onSubmitted: (s) {
                    setState(() {
                      // 使用XColor解析输入的颜色字符串
                      primaryColor = XColor(s);
                    });
                  },
                ),
                SizedBox(height: 56,),
                Text(
                  '你已经按下了按钮这么多次：',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: '增加',
            child: Icon(Icons.add),
          ), 
        ));
  }
}