Flutter颜色选择器插件o_color_picker的使用

Flutter颜色选择器插件o_color_picker的使用

简介

OColorPicker 是一个简单且快速的两步颜色选择器插件，支持色调和颜色自定义。

实现

访问 pub.dev -> 安装 和 pub.dev -> 示例。

如果你不确定如何显示颜色选择器，可以使用 o_popup。两个包的组合示例可以在 example/demo.dart 中找到。

商业使用

如果你在商业项目中使用了此代码，请通过 GitHub Sponsors 捐赠给我。我也对使用的所有包做同样的事情，因为这确保了所有人的稳定开发！

完整示例

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o_color_picker demo app',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始选中的颜色
  Color? selectedColor = Colors.lightGreen[300];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 创建一个按钮，点击后会弹出颜色选择器
            TextButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (var states) => selectedColor!,
              )),
              child: Text(
                'Change the color of the button',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              onPressed: () => showDialog<void>(
                context: context,
                builder: (_) => Material(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      // 使用 OColorPicker 组件来选择颜色
                      OColorPicker(
                        selectedColor: selectedColor,
                        colors: primaryColorsPalette,
                        onColorChange: (color) {
                          setState(() {
                            selectedColor = color;
                          });
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入库

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

2. 创建主应用

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'o_color_picker demo app',
         home: MyHomePage(),
       );
     }
   }
   

3. 创建主页

   class MyHomePage extends StatefulWidget {
     [@override](/user/override)
     _MyHomePageState createState() => _MyHomePageState();
   }
   

4. 设置状态管理

   class _MyHomePageState extends State<MyHomePage> {
     Color? selectedColor = Colors.lightGreen[300];
   

5. 构建UI

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             TextButton(
               style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.resolveWith<Color>(
                 (var states) => selectedColor!,
               )),
               child: Text(
                 'Change the color of the button',
                 style: TextStyle(
                   color: Colors.black,
                 ),
               ),
               onPressed: () => showDialog<void>(
                 context: context,
                 builder: (_) => Material(
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       OColorPicker(
                         selectedColor: selectedColor,
                         colors: primaryColorsPalette,
                         onColorChange: (color) {
                           setState(() {
                             selectedColor = color;
                           });
                           Navigator.of(context).pop();
                         },
                       ),
                     ],
                   ),
                 ),
               ),
             ),
           ],
         ),
       ),
     );
   }