Flutter颜色管理插件Colours的使用

简介

Colours 是一个扩展版的Flutter颜色库，提供了更多的颜色样本和灵活性来生成自定义的颜色样本。

开始使用

在你的Flutter项目中添加依赖：

dependencies:
  colour: ^0.0.2

或者直接引用Git仓库：

dependencies:
  colour:
    git: 
      url: git://github.com/salkuadrat/colours.git

示例

假设你的品牌颜色是 #00aa13。你可以使用以下代码生成自定义的颜色样本：

MaterialColor gojekSwatch = Colours.swatch('#00aa13');

这将生成完整的Material Design颜色样本：

• 50 [#e0f5e3]
• 100 [#b2e5b8]
• 200 [#7fd489]
• 300 [#4cc45a]
• 400 [#26b736]
• 500 [#00aa13]
• 600 [#00a311]
• 700 [#00990e]
• 800 [#00900b]
• 900 [#007f06]

你可以将自定义的颜色样本应用到主题中，或直接访问单个颜色：

Color gojek100 = gojekSwatch[100];
Color gojek200 = gojekSwatch[200];
Color gojek300 = gojekSwatch[300];
Color gojek400 = gojekSwatch[400];
Color gojek500 = gojekSwatch[500];
Color gojek600 = gojekSwatch[600];
Color gojek700 = gojekSwatch[700];
Color gojek800 = gojekSwatch[800];
Color gojek900 = gojekSwatch[900];

示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用Colours插件：

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

MaterialColor gojekSwatch = Colours.swatch('00aa13');

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Colours Demo',
      theme: ThemeData(
        primarySwatch: gojekSwatch,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Colours.swatch Demo'),
    );
  }
}

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;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(
                color: gojekSwatch[700], // 使用gojekSwatch中的颜色
              ),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: gojekSwatch[900], // 使用gojekSwatch中的颜色
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}