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

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

简介

color_scheme_grid 是一个用于在运行时可视化您的应用颜色方案的 Flutter 包。此包会显示一个包含 Material 颜色方案颜色的网格，使您可以更轻松地查看和理解应用中使用的颜色。它会自动从上下文中获取 Material 3 颜色，并且也支持自定义颜色。

特性

• 显示 Material 颜色方案的颜色网格。
• 支持自定义颜色。
• 易于集成和使用。

安装

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

dependencies:
  color_scheme_grid: ^1.0.0

然后运行 flutter pub get 来安装包。

使用

步骤

1. 导入包：

   import 'package:color_scheme_grid/color_scheme_grid.dart';
   

2. 使用 ColorSchemeGrid.show 方法在对话框中显示颜色方案网格：

   import 'package:flutter/material.dart';
   import 'package:color_scheme_grid/color_scheme_grid.dart';
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Color Scheme Grid Example',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
           useMaterial3: true,
         ),
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Color Scheme Grid Example'),
           ),
           body: Center(
             child: ElevatedButton(
               onPressed: () {
                 ColorSchemeGrid.show(context, customColors: [
                   const ColorName('customRedLike', Color.fromARGB(255, 233, 32, 5)),
                   const ColorName('customGreenShare', Color.fromARGB(255, 5, 233, 32)),
                 ]);
               },
               child: const Text('Show Color Scheme Grid'),
             ),
           ),
         ),
       );
     }
   }
   

示例

以下是一个演示如何使用 color_scheme_grid 包的 Flutter 应用示例：

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

import 'preview_colors_grid.dart';

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

class ExampleApp extends StatefulWidget {
  const ExampleApp({super.key});

  [@override](/user/override)
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  ThemeMode themeMode = ThemeMode.dark;

  final ThemeData lightTheme = ThemeData(
      colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue, brightness: Brightness.light),
      useMaterial3: true);

  final ThemeData darkTheme = ThemeData(
      colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue, brightness: Brightness.dark),
      useMaterial3: true);

  void _showColorSchemeGrid(BuildContext context) {
    ColorSchemeGrid.show(context, customColors: [
      const ColorName('customRedLike', Color.fromARGB(255, 233, 32, 5)),
      const ColorName('customGreenShare', Color.fromARGB(255, 5, 233, 32)),
    ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: themeMode,
      title: 'Flutter Color Scheme Grid Example',
      theme: lightTheme,
      darkTheme: darkTheme,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'Color Scheme Grid Example',
          ),
        ),
        body: Column(
          children: [
            Expanded(
                flex: 2,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    const Text(
                      'Press the button below to open the Color Scheme Grid Dialog',
                      textAlign: TextAlign.center,
                    ),
                    Builder(builder: (context) {
                      return OutlinedButton(
                        onPressed: () => _showColorSchemeGrid(context),
                        child: const Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('Open Color Scheme Grid'),
                            SizedBox(width: 8),
                            Icon(Icons.search),
                          ],
                        ),
                      );
                    }),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text('Dark Mode'),
                        const SizedBox(width: 8),
                        Switch(
                          value: themeMode == ThemeMode.dark,
                          onChanged: (bool value) {
                            setState(() {
                              themeMode = value ? ThemeMode.dark : ThemeMode.light;
                            });
                          },
                        ),
                      ],
                    ),
                  ],
                )),
            const Flexible(child: PreviewColorsGrid()),
          ],
        ),
      ),
    );
  }
}