Flutter颜色管理插件flutter_reasonable_colors的使用

flutter_reasonable_colors

Reasonable Colors 是一个开源的颜色系统，旨在帮助开发者轻松创建可访问且美观的颜色调色板。

特性

  • 免费且开源：Reasonable Colors 完全免费并开源。
  • 可访问性：支持无障碍设计。
  • 易于使用：提供了直观的颜色选择和配色方案。

安装

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

dependencies:
  flutter_reasonable_colors: ^版本号

然后运行以下命令安装：

flutter pub get

开始使用

每个 ColorSwatch 常量都代表一种颜色，可以直接使用。例如：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter_reasonable_colors 示例'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: ReasonableColors.blue, // 使用 ReasonableColors 提供的颜色
            child: Center(
              child: Text(
                '蓝色',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_reasonable_colors 是一个用于 Flutter 的颜色管理插件，它提供了一种简单的方式来管理和使用颜色。这个插件可以帮助开发者更高效地定义和使用颜色，特别是在需要维护一致的颜色主题时。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_reasonable_colors: ^1.0.0  # 请使用最新版本

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

基本用法

1. 定义颜色

你可以在项目中定义一个颜色主题，例如：

import 'package:flutter_reasonable_colors/flutter_reasonable_colors.dart';

final reasonableColors = ReasonableColors(
  primary: Colors.blue,
  secondary: Colors.green,
  accent: Colors.orange,
  background: Colors.white,
  text: Colors.black,
);

2. 使用颜色

在应用程序中使用定义的颜色：

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

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

class MyApp extends StatelessWidget {
  final reasonableColors = ReasonableColors(
    primary: Colors.blue,
    secondary: Colors.green,
    accent: Colors.orange,
    background: Colors.white,
    text: Colors.black,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Reasonable Colors Demo',
      theme: ThemeData(
        primaryColor: reasonableColors.primary,
        accentColor: reasonableColors.accent,
        scaffoldBackgroundColor: reasonableColors.background,
        textTheme: TextTheme(
          bodyText1: TextStyle(color: reasonableColors.text),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Reasonable Colors Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(color: Theme.of(context).textTheme.bodyText1.color),
        ),
      ),
    );
  }
}

高级用法

1. 动态主题

你可以根据用户的选择动态切换主题：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ReasonableColors _reasonableColors = ReasonableColors(
    primary: Colors.blue,
    secondary: Colors.green,
    accent: Colors.orange,
    background: Colors.white,
    text: Colors.black,
  );

  void _toggleTheme() {
    setState(() {
      _reasonableColors = ReasonableColors(
        primary: Colors.purple,
        secondary: Colors.pink,
        accent: Colors.yellow,
        background: Colors.black,
        text: Colors.white,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Reasonable Colors Demo',
      theme: ThemeData(
        primaryColor: _reasonableColors.primary,
        accentColor: _reasonableColors.accent,
        scaffoldBackgroundColor: _reasonableColors.background,
        textTheme: TextTheme(
          bodyText1: TextStyle(color: _reasonableColors.text),
        ),
      ),
      home: MyHomePage(
        toggleTheme: _toggleTheme,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final VoidCallback toggleTheme;

  MyHomePage({required this.toggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Reasonable Colors Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(color: Theme.of(context).textTheme.bodyText1.color),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: toggleTheme,
        child: Icon(Icons.color_lens),
      ),
    );
  }
}

2. 自定义颜色

你可以根据需要自定义更多的颜色：

final reasonableColors = ReasonableColors(
  primary: Colors.blue,
  secondary: Colors.green,
  accent: Colors.orange,
  background: Colors.white,
  text: Colors.black,
  customColors: {
    'success': Colors.green,
    'error': Colors.red,
    'warning': Colors.yellow,
  },
);

然后在应用程序中使用这些自定义颜色：

Text(
  'Success!',
  style: TextStyle(color: reasonableColors.customColors['success']),
);
回到顶部