Flutter颜色设计插件tailwind_colors_usage的使用

Flutter颜色设计插件tailwind_colors_usage的使用

tailwind_colors_design

pub package
likes
popularity
pub points

一个实现了Tailwind CSS精美配色系统的Flutter插件，为Flutter应用的颜色设计提供了全面且系统化的方法。

特性

  • 🎨 提供20种配色方案，每种配色包含11个色调（从50到950）。
  • 🛠️ 简单易用的API，与Tailwind CSS的配色系统保持一致。
  • 🎯 类型安全的颜色访问。
  • ⚡ 无外部依赖。
  • 🔧 支持自定义配色方案创建。
  • 📱 非常适合在Flutter应用中保持颜色的一致性。

安装

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  tailwind_colors_design: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

基本用法

首先导入插件：

import 'package:tailwind_colors_design/tailwind_colors_design.dart';

默认色调（500）

Container(
  color: TailwindColors.blue, // 使用默认的500色调
  child: Text('Blue container'),
)

指定特定色调

Container(
  color: TailwindColors.blue[600], // 使用较深的蓝色（600色调）
  child: Text('Darker blue container'),
)

可用颜色

灰色系

  • TailwindColors.slate
  • TailwindColors.gray
  • TailwindColors.zinc
  • TailwindColors.neutral
  • TailwindColors.stone

彩色系

  • TailwindColors.red
  • TailwindColors.orange
  • TailwindColors.amber
  • TailwindColors.yellow
  • TailwindColors.lime
  • TailwindColors.green
  • TailwindColors.emerald
  • TailwindColors.teal

蓝色系

  • TailwindColors.cyan
  • TailwindColors.sky
  • TailwindColors.blue
  • TailwindColors.indigo

紫色系

  • TailwindColors.violet
  • TailwindColors.purple
  • TailwindColors.fuchsia

粉色系

  • TailwindColors.pink
  • TailwindColors.rose

颜色色调

每种颜色都有11个色调，范围从最浅的50到最深的950：

TailwindColors.blue[50]   // 最浅的蓝色
TailwindColors.blue[100]  // 很浅的蓝色
TailwindColors.blue[200]  // 浅蓝色
TailwindColors.blue[300]  // ...
TailwindColors.blue[400]
TailwindColors.blue[500]  // 默认色调
TailwindColors.blue[600]
TailwindColors.blue[700]
TailwindColors.blue[800]
TailwindColors.blue[900]
TailwindColors.blue[950]  // 最深的蓝色

创建自定义颜色

您可以创建遵循Tailwind CSS系统的自定义配色方案：

final customBlue = TailwindColors.createCustomColor(
  0xFF3B82F6,  // 主色调（500）
  {
    50: Color(0xFFEFF6FF),  // 最浅的蓝色
    100: Color(0xFFDBEAFE), // 较浅的蓝色
    200: Color(0xFFBFDBFE), // 更浅的蓝色
    300: Color(0xFF93C5FD), // 浅蓝色
    400: Color(0xFF60A5FA), // 中等蓝色
    500: Color(0xFF3B82F6), // 主色调
    600: Color(0xFF2563EB), // 较深的蓝色
    700: Color(0xFF1D4ED8), // 深蓝色
    800: Color(0xFF1E40AF), // 更深的蓝色
    900: Color(0xFF1E3A8A), // 非常深的蓝色
    950: Color(0xFF172554), // 最深的蓝色
  },
);

示例主题实现

以下是如何在应用的主题中使用这些颜色：

ThemeData(
  primaryColor: TailwindColors.blue, // 主色调
  scaffoldBackgroundColor: TailwindColors.gray[50], // 背景色
  appBarTheme: AppBarTheme(
    backgroundColor: TailwindColors.blue[600], // 应用栏背景色
  ),
  textTheme: TextTheme(
    bodyLarge: TextStyle(color: TailwindColors.gray[900]), // 大文本颜色
    bodyMedium: TextStyle(color: TailwindColors.gray[800]), // 中等文本颜色
    bodySmall: TextStyle(color: TailwindColors.gray[700]), // 小文本颜色
  ),
)

更多关于Flutter颜色设计插件tailwind_colors_usage的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter颜色设计插件tailwind_colors_usage的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tailwind_colors_usage 是一个 Flutter 插件，它允许你在 Flutter 应用中使用 Tailwind CSS 的颜色系统。Tailwind CSS 是一个流行的 CSS 框架，提供了一套精心设计的颜色系统，tailwind_colors_usage 插件将这些颜色引入到 Flutter 中，方便开发者使用。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  tailwind_colors_usage: ^1.0.0  # 请检查最新版本

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

使用插件

安装完成后，你可以在代码中导入 tailwind_colors_usage 并使用 Tailwind 的颜色。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tailwind Colors Example',
      theme: ThemeData(
        primarySwatch: TailwindColors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tailwind Colors Example'),
        backgroundColor: TailwindColors.indigo[500],
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(20),
          color: TailwindColors.green[300],
          child: Text(
            'Hello, Tailwind Colors!',
            style: TextStyle(
              color: TailwindColors.white,
              fontSize: 24,
            ),
          ),
        ),
      ),
    );
  }
}

颜色使用

tailwind_colors_usage 提供了 Tailwind CSS 的所有颜色，并且每个颜色都有不同的深浅度。你可以通过 TailwindColors.colorName[shade] 的方式来使用颜色。

例如：

  • TailwindColors.blue[500] 表示蓝色，500 是深浅度。
  • TailwindColors.red[300] 表示红色，300 是深浅度。

颜色列表

Tailwind CSS 提供了以下颜色：

  • slate
  • gray
  • zinc
  • neutral
  • stone
  • red
  • orange
  • amber
  • yellow
  • lime
  • green
  • emerald
  • teal
  • cyan
  • sky
  • blue
  • indigo
  • violet
  • purple
  • fuchsia
  • pink
  • rose

每个颜色都有从 50 到 900 的深浅度。

示例

Container(
  color: TailwindColors.blue[500],
  child: Text(
    'Blue 500',
    style: TextStyle(color: TailwindColors.white),
  ),
);

Container(
  color: TailwindColors.red[300],
  child: Text(
    'Red 300',
    style: TextStyle(color: TailwindColors.white),
  ),
);
回到顶部