Flutter颜色管理插件easy_colors的使用

Flutter颜色管理插件easy_colors的使用

为什么使用easy_colors？

easy_colors 这个插件旨在帮助在Flutter应用中简单快速地管理所有颜色资源，而无需创建dart文件。

如何开始

1. 将 easy_colors 添加到您的 pubspec.yaml 文件中。

   dependencies:
     easy_colors: <latest-version>
   

2. 创建一个 .json 文件来声明所有的颜色。

   assets
   └── colors.json
   

3. 在 colors.json 文件中，将颜色声明为键值对，其中键是颜色名称，值是颜色。颜色值可以是以下格式之一：

   • 字符串形式的十六进制颜色代码（RGB：#RRGGBB
   • 字符串形式的十六进制颜色代码（ARGB：#AARRGGBB
   • 整数形式的ARGB颜色值

   示例：

   {
     "red": "#FF0000",
     "green": "#00FF00",
     "blue": "#0000FF",
     "black": "#FF000000",
     "white": "4294967295"
   }
   

代码生成

完成上述步骤后，就可以执行代码生成了。

1. 打开终端并进入包含项目文件夹的路径。

flutter pub run easy_colors:generate

1. 使用生成的颜色在您的应用中。

示例代码如下：

import 'package:example/generated/gen_colors.g.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Colors Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Easy Colors Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(color: EasyColors.black),
            ),
            Container(
              height: 30.0,
              color: EasyColors.indianRed,
            ),
            Container(
              height: 30.0,
              color: EasyColors.salmon,
            ),
            Container(
              height: 30.0,
              color: EasyColors.black,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}