Flutter颜色方案展示插件color_scheme_display的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter颜色方案展示插件color_scheme_display的使用

这是一个简单的widget，用于展示给定颜色方案中的所有颜色及其名称和十六进制代码。

ColorSchemeDisplay() 截图 带有十六进制代码的 ColorSchemeDisplay() 截图
无十六进制代码的widget截图 带有十六进制代码的widget截图

背景

我创建这个包有两个目的：

  1. 查看由 ColorScheme.fromSeed 工厂函数生成的颜色。
  2. 找出控制不同部分的 Material 小部件的颜色。

特性

  • 展示给定颜色方案中的所有颜色，以及颜色的名称和其十六进制代码。
  • 可以双击颜色名称或十六进制代码以复制它们的值。
  • 如果没有提供颜色方案，则会使用当前主题的默认颜色方案。
  • 自动调整大小并尽可能多地占用屏幕空间。
  • 背景和文本颜色可以设置，但将默认为 surface 和 onSurface。

开始使用

仅在 Material 3 上测试过此包，我认为它也应该可以在 Material 2 上工作，但会缺少一些颜色。

使用方法

这个包旨在调试和设计时使用。不建议在生产代码中使用。在我的生产代码中，我创建了一个路由来显示颜色方案，然后临时将起始页面设置为该路由。接着尝试不同的颜色方案，直到满意为止，并截取颜色方案的屏幕截图。然后使用颜色选择器应用程序从截图中采样并匹配颜色，以便了解需要更改哪些颜色来改变 Material 小部件的外观。

这个包创建了一个 widget，因此你可以像使用其他任何 widget 一样使用它，但最好是在尽可能多的屏幕空间下使用。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义颜色方案
    final colorScheme = ColorScheme.fromSeed(
      seedColor: const Color(0xFF2FB2B2), // 种子颜色
      brightness: Brightness.light, // 亮度
      dynamicSchemeVariant: DynamicSchemeVariant.tonalSpot, // 动态方案变体
    );
    return MaterialApp(
      title: 'Color Scheme Display Demo', // 应用程序标题
      theme: ThemeData(
        colorScheme: colorScheme, // 颜色方案
        useMaterial3: true, // 使用 Material 3
      ),
      home: const ColorSchemeDisplay(), // 主页
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用color_scheme_display插件来展示颜色方案的代码案例。color_scheme_display插件可以帮助开发者直观地查看和应用主题颜色方案。

首先，确保你已经在pubspec.yaml文件中添加了color_scheme_display依赖：

dependencies:
  flutter:
    sdk: flutter
  color_scheme_display: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter应用中导入并使用color_scheme_display插件。以下是一个完整的示例代码，展示如何在Flutter应用中展示颜色方案：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Scheme Display Example',
      theme: ThemeData(
        // 设置一个默认的主题颜色方案
        primarySwatch: Colors.blue,
      ),
      home: ColorSchemeDisplayScreen(),
    );
  }
}

class ColorSchemeDisplayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);
    final ColorScheme colorScheme = themeData.colorScheme;

    return Scaffold(
      appBar: AppBar(
        title: Text('Color Scheme Display Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Color Scheme:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            ColorSchemeDisplay(
              colorScheme: colorScheme,
            ),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () {
                // 切换到一个新的主题颜色方案
                ThemeData newTheme = themeData.copyWith(
                  colorScheme: ColorScheme.fromSeed(
                    seedColor: Colors.green,
                  ),
                );
                showDialog(
                  context: context,
                  builder: (context) {
                    return Theme(
                      data: newTheme,
                      child: AlertDialog(
                        title: Text('New Color Scheme Preview'),
                        content: ColorSchemeDisplay(
                          colorScheme: newTheme.colorScheme,
                        ),
                        actions: <Widget>[
                          TextButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text('Close'),
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
              child: Text('Preview New Color Scheme'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个ColorSchemeDisplayScreen，用于显示当前主题的颜色方案。
  2. ColorSchemeDisplay小部件用于显示颜色方案。
  3. 我们还添加了一个按钮，用于预览一个新的颜色方案。当点击按钮时，会弹出一个对话框，显示新的颜色方案。

你可以根据需要调整颜色方案和UI布局。color_scheme_display插件使得颜色方案的展示变得简单直观，非常适合在开发过程中调试和展示主题颜色。

回到顶部