Flutter色彩管理插件tailwind_palette的使用

Flutter色彩管理插件tailwind_palette的使用

Demo

特性

使用这个轻量级的Flutter色彩管理插件，你可以轻松地在你的项目中添加一组精心组织且美观的色彩。只需要在依赖项中添加一行代码即可。

开始使用

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

dependencies:
  tailwind_palette: ^0.0.4

然后运行flutter pub get以安装该包。

使用方法

通过TailwindPalette类可以获取各种颜色。例如：

// 获取天空蓝颜色的不同色调
Color colorSky500 = TailwindPalette.sky.shade500;
Color colorSky950 = TailwindPalette.sky.shade950;

// 获取橙色颜色的不同色调
Color colorOrange500 = TailwindPalette.orange.shade500;

你也可以通过扩展方法来获取所有色调：

extension ListOfColorExtensions on List<Color> {
  Color get shade50 => this[0]; // 第一个色调
  Color get shade100 => this[1]; // 第二个色调
  Color get shade200 => this[2]; // 第三个色调
  Color get shade300 => this[3]; // 第四个色调
  Color get shade400 => this[4]; // 第五个色调
  Color get shade500 => this[5]; // 第六个色调
  Color get shade600 => this[6]; // 第七个色调
  Color get shade700 => this[7]; // 第八个色调
  Color get shade800 => this[8]; // 第九个色调
  Color get shade900 => this[9]; // 第十个色调
  Color get shade950 => this[10]; // 第十一个色调
}

更多可用的颜色可以在TailwindPalette类中查看。

完整示例

以下是一个完整的示例代码，展示了如何使用tailwind_palette插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tailwind Palette Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Tailwind Palette Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double _colorTileDm = 40;

  final List<String> _colorCollectionNames = [
    'Slate',
    'Gray',
    'Zinc',
    'Neutral',
    'Stone',
    'Red',
    'Orange',
    'Amber',
    'Yellow',
    'Lime',
    'Green',
    'Emerald',
    'Teal',
    'Cyan',
    'Sky',
    'Blue',
    'Indigo',
    'Violet',
    'Purple',
    'Fuchsia',
    'Pink',
    'Rose',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    _colorTileDm = MediaQuery.sizeOf(context).width / 11;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView.builder(
          itemCount: TailwindPalette.all.length,
          itemBuilder: (context, index) {
            final colorCollection = TailwindPalette.all[index];
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 8),
                  child: Text(
                    _colorCollectionNames[index],
                    style: Theme.of(context).textTheme.titleSmall,
                  ),
                ),
                SizedBox(
                  height: _colorTileDm,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: [
                      for (final color in colorCollection)
                        Container(
                          margin: const EdgeInsets.all(1),
                          decoration: BoxDecoration(
                            color: color,
                            borderRadius: BorderRadius.circular(2),
                          ),
                          width: _colorTileDm,
                          height: _colorTileDm,
                        ),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}