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

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

colorpicker_sit 是一个用于在 Flutter 应用中添加颜色选择器功能的插件。通过这个插件，用户可以在应用中方便地选择和更改颜色。

示例代码

以下是 colorpicker_sit 插件的一个完整示例代码，展示了如何在 Flutter 应用中集成颜色选择器。

import 'package:flutter/material.dart';
import 'package:colorpicker_sit/colorpicker_sit.dart';
import './pickers/hsv_picker.dart';
import './pickers/material_picker.dart';
import './pickers/block_picker.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool lightTheme = true;
  Color currentColor = Colors.amber;
  List<Color> currentColors = [Colors.yellow, Colors.green];
  List<Color> colorHistory = [];

  // 更新当前颜色
  void changeColor(Color color) => setState(() => currentColor = color);

  // 更新当前颜色列表
  void changeColors(List<Color> colors) => setState(() => currentColors = colors);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final foregroundColor = useWhiteForeground(currentColor) ? Colors.white : Colors.black;

    return AnimatedTheme(
      data: lightTheme ? ThemeData.light() : ThemeData.dark(),
      child: Builder(builder: (context) {
        return DefaultTabController(
          length: 3,
          child: Scaffold(
            floatingActionButton: FloatingActionButton.extended(
              onPressed: () => setState(() => lightTheme = !lightTheme),
              icon: Icon(lightTheme
                  ? Icons.dark_mode_rounded
                  : Icons.light_mode_rounded),
              label: Text(lightTheme ? '夜晚' : '白天'),
              backgroundColor: currentColor,
              foregroundColor: foregroundColor,
              elevation: 15,
            ),
            appBar: AppBar(
              title: const Text('Flutter 颜色选择器示例'),
              backgroundColor: currentColor,
              foregroundColor: foregroundColor,
              bottom: TabBar(
                labelColor: foregroundColor,
                tabs: const [
                  Tab(text: 'HSV/HSL/RGB'),
                  Tab(text: '材料设计'),
                  Tab(text: '方块'),
                ],
              ),
            ),
            body: TabBarView(
              children: [
                HSVColorPickerExample(
                  pickerColor: currentColor,
                  onColorChanged: changeColor,
                  colorHistory: colorHistory,
                  onHistoryChanged: (List<Color> colors) => colorHistory = colors,
                ),
                MaterialColorPickerExample(
                    pickerColor: currentColor, onColorChanged: changeColor),
                BlockColorPickerExample(
                  pickerColor: currentColor,
                  onColorChanged: changeColor,
                  pickerColors: currentColors,
                  onColorsChanged: changeColors,
                  colorHistory: colorHistory,
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

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

1 回复

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


colorpicker_sit 是一个用于 Flutter 的颜色选择器插件，可以帮助用户在应用中选择颜色。以下是如何使用 colorpicker_sit 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  colorpicker_sit: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 colorpicker_sit 包：

import 'package:colorpicker_sit/colorpicker_sit.dart';

3. 使用颜色选择器

你可以使用 ColorPickerSit 小部件来显示颜色选择器。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorPickerExample(),
    );
  }
}

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

class _ColorPickerExampleState extends State<ColorPickerExample> {
  Color _selectedColor = Colors.blue;

  void _showColorPicker() async {
    final Color? pickedColor = await showDialog<Color>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Pick a color'),
          content: ColorPickerSit(
            color: _selectedColor,
            onColorChanged: (Color color) {
              setState(() {
                _selectedColor = color;
              });
            },
          ),
          actions: <Widget>[
            TextButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop(_selectedColor);
              },
            ),
          ],
        );
      },
    );

    if (pickedColor != null) {
      setState(() {
        _selectedColor = pickedColor;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: _selectedColor,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showColorPicker,
              child: Text('Pick Color'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部