Flutter颜色处理插件kolors的使用

Flutter颜色处理插件kolors的使用

简介

kolors 插件允许你在Flutter应用中使用大约140种命名的HTML颜色。HTML和CSS提供了大量的命名颜色，通过这个简单的Flutter插件，你也可以在你的Flutter应用中使用这些颜色。

重要链接

• 在GitHub上阅读源代码并给仓库加星：GitHub
• 在GitHub上提交问题：GitHub Issues
• 查看pub.dev上的包：pub.dev
• 阅读pub.dev上的文档：pub.dev 文档

灵感

该插件的灵感来源于material库中的Colors类。我发现这个类对于原型设计非常方便：无需使用十六进制代码，只需简单直观的命名颜色即可。

作为一名有多年Web背景的开发者，我发现我经常想从我的Flutter应用中使用Web（HTML和CSS）的颜色。现在，通过这个插件，你可以快速地找到合适的颜色进行原型设计。

使用方法

import 'package:kolors/kolors.dart';

// 直接输入 "Kolors." 并选择你喜欢的颜色。
const appBarColor = Kolors.tomato;
const borderColor = Kolors.skyBlue;

// 如果你知道你感兴趣的某个颜色的色调，可以使用分组类。
const appBarColor = KolorReds.lightSalmon;
const iconColor = KolorGreens.limeGreen;
const fabColor = KolorBlues.skyBlue;

// 如果你想向用户展示带有名称的颜色，可以使用包含颜色名称和颜色的 "asMap"。
final kolorsMap = Kolors.asMap();
final kolorEntries = kolorsMap.entries.toList();

// 只获取颜色列表。
const pinks = KolorPinks.values;

你可以在 GitHub 和 pub.dev 上查看示例应用。

请注意，该插件依赖于 dart:ui（因此只能在Flutter中运行）。

完整示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 如果你想向用户展示带有名称的颜色，可以使用包含颜色名称和颜色的 "asMap"。
    final kolorsMap = Kolors.asMap();
    final kolorEntries = kolorsMap.entries.toList(growable: false);

    // 直接输入 "Kolors." 并选择你喜欢的颜色。
    const appBarColor = Kolors.tomato;

    // 如果你知道你感兴趣的某个颜色的色调，可以使用分组类。
    const fabColor = KolorBlues.skyBlue;

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Kolors'),
          backgroundColor: appBarColor,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          tooltip: 'Do nothing',
          child: const Icon(Icons.ac_unit),
          backgroundColor: fabColor,
        ),
        body: ListView.builder(
          itemCount: kolorEntries.length,
          itemBuilder: (_, i) => ListTile(
            tileColor: kolorEntries[i].value,
            title: Text(kolorEntries[i].key),
          ),
        ),
      ),
    );
  }
}