Flutter品牌调色板插件 flutter_brand_palettes 的使用

概述

Flutter Brand Palettes 是一个包含流行品牌和公司颜色调色板的声明式、面向对象类集合。通过这个插件，你可以轻松地在你的 Flutter 应用中使用这些品牌的颜色。

例如，要获取 Instagram 的所有颜色作为 List<Color> 对象，只需声明 InstagramGrad().colors —— ‘Grad’ 后缀是“Gradient”的缩写。对于单个颜色，可以直接从对应的调色板类中选择它。例如，Instagram.royalBlue() 返回 Instagram 的皇家蓝色，Instagram.yellow() 返回黄色，依此类推。

所有类都经过了充分的文档化和单元测试，并且通过了严格的 CI 管道质量检测。

开始使用

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

dependencies:
  flutter_brand_palettes: ^latest_version

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

获取颜色

与使用常量整数值表示颜色不同，该插件提供了品牌类的命名构造函数来表示颜色。这样可以使源代码更加面向对象、可读和可维护。

例如：

• Facebook.blue().color 返回 Facebook 的蓝色 (#4267B2)
• Instagram.red().color 返回 Instagram 的红色 (#FD1D1D)
• Google.red().color 返回 Google 的红色 (#DB4437)

任何品牌的命令模式为： 'Brand.colorName().color'。

颜色调色板的实际应用

以下示例展示了如何构建一个背景颜色为 Facebook 蓝色的容器小部件：

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

class FacebookIsh extends StatelessWidget {
  const FacebookIsh({super.key});

  final _blue = Facebook.blue();

  @override
  Widget build(BuildContext context) {
    return Container(color: _blue.color);
  }
}

颜色渐变的实际应用

以下代码展示了如何构建一个填充有 Google Logo 渐变色的矩形：

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

class Googleish extends StatelessWidget {
  static final _googleGrad = GoogleGrad().colors;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: _googleGrad),
      ),
    );
  }
}

结果如下图所示：

完整 Demo 示例

以下是完整的示例应用，展示如何使用 Instagram 的颜色调色板：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Brand Palette Demo',
      home: InstagramPalettePage(title: 'Instagram Color Palette'),
    );
  }
}

class InstagramPalettePage extends StatelessWidget {
  const InstagramPalettePage({required String title, super.key})
      : _title = title;

  final String _title;
  static final _gradient = const InstagramGrad().colors;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Grey.veryLight().color,
        elevation: 2.0,
        title: GradientTitle(_title, _gradient),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _ColorItem.gradient('Gradient', colors: _gradient),
          _ColorItem('Light Yellow', _gradient[9]),
          _ColorItem('Yellow', _gradient[8]),
          _ColorItem('Orange', _gradient[7]),
          _ColorItem('Dark Orange', _gradient[6]),
          _ColorItem('Red', _gradient[5]),
          _ColorItem('Purple-Red', _gradient[4]),
          _ColorItem('Dark Pink', _gradient[3]),
          _ColorItem('Purple', _gradient[2]),
          _ColorItem('Blue', _gradient[1]),
          _ColorItem('Royal Blue', _gradient[0]),
        ],
      ),
    );
  }
}

class GradientTitle extends StatelessWidget {
  const GradientTitle(this._title, this._colors, {super.key});
  final String _title;
  final List<Color> _colors;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(
        _title,
        style: TextStyle(
          fontStyle: FontStyle.italic,
          foreground: Paint()
            ..shader = LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: _colors,
            ).createShader(const Rect.fromLTRB(0.0, 0.0, 200.0, 70.0)),
        ),
      ),
    );
  }
}

class _ColorItem extends StatelessWidget {
  _ColorItem(String label, Color color)
      : this.deco(label, () => BoxDecoration(color: color));

  _ColorItem.gradient(String label, {required List<Color> colors})
      : this.deco(
          label,
          () => BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: colors,
            ),
          ),
        );

  const _ColorItem.deco(this._label, this._deco);

  final String _label;
  final BoxDecoration Function() _deco;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: [
          Expanded(
            child: Text(
              _label,
              textAlign: TextAlign.center,
              style: TextStyle(color: const Grey.veryDark().color),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(height: kToolbarHeight / 1.5, decoration: _deco()),
          ),
        ],
      ),
    );
  }
}

运行 Demo 应用

如果你想运行上述的 Demo 应用，请按照以下步骤操作：

git clone https://github.com/dartoos-dev/flutter_brand_palettes.git
cd flutter_brand_palettes/example/
flutter run -d chrome

这将在 Chrome 上启动调试模式下的 Demo 应用。

如何贡献

如果你需要某个尚未实现的颜色调色板，可以打开一个 Issue 请求。此外，欢迎任何形式的贡献，包括 Bug 报告、改进建议或 Pull Request。确保在提交 Pull Request 前运行以下命令以通过检查：

flutter analyze && flutter test

希望这些信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。