Flutter颜色管理插件flutter_tailwind_colors的使用

Flutter颜色管理插件flutter_tailwind_colors的使用

Tailwind CSS 3.4.13 颜色

Dart包用于在Flutter中使用Tailwind颜色，类似于Material颜色。

安装

1. 在pubspec.yaml文件中添加依赖项：

dependencies:
    tailwind_colors: ^0.0.3

1. 通过IDE或命令行获取包：

$ pub get

1. 导入flutter_tailwind_colors包：

import 'package:flutter_tailwind_colors/flutter_tailwind_colors.dart';

如何使用

Tailwind颜色可以像通常的Material颜色一样创建和使用。

// TWColors有从50到950的阴影，增量为50或100
Color primaryColor = TWColors.emerald.shade50;
Color secondColor = TWColors.rose.shade950;

TWColors特性包括：

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

TWColors包含了Tailwind 3.4.13的颜色调色板：

• 调色板可以在TailwindCSS网站上找到

作为主题使用

可以从TWColors调色板中使用所有颜色。

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: TWColors.emerald, // 注意这里拼写错误，应为emerald而不是emrald
      ),
      home: MyHomePage(
          title: 'Flutter Demo Home Page',
      ),
    );

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用flutter_tailwind_colors插件。

main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: TWColors.emerald, // 使用TWColors的emerald颜色
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: TWColors.rose.shade950, // 使用TWColors的rose颜色
            ),
            SizedBox(height: 20),
            Container(
              width: 100,
              height: 100,
              color: TWColors.emerald.shade50, // 使用TWColors的emerald颜色
            ),
          ],
        ),
      ),
    );
  }
}