Flutter颜色渐变选择器插件flutter_gradient_selector的使用

Flutter颜色渐变选择器插件flutter_gradient_selector的使用

Flutter Gradient Selector 允许用户即时创建渐变。

特性

  • 支持线性、径向和扫掠渐变。
  • 提供法语、英语、西班牙语和德语本地化支持。

使用方法

可以查看示例文件夹中的示例代码。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_gradient_selector/flutter_gradient_selector.dart';
import 'package:flutter_gradient_selector/helpers/localization.dart';

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

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

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
        return Center(
          child: SizedBox(
              height: constraints.maxHeight * 0.9,
              width: constraints.maxWidth * 0.9,
              child: GradientSelector(
                allowChangeMode: true, // 是否允许切换渐变模式
                gradientMode: true, // 是否启用渐变模式
                color: const LinearGradient(colors: [Colors.green, Colors.amber]), // 初始渐变颜色
                lang: LocalisationCode.fr, // 设置语言为法语
                history: const [Colors.amber, Colors.white, Colors.green], // 历史颜色列表
                onChange: (value) {
                  // 处理颜色变化
                  // var c = value;
                },
              )),
        );
      }),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用flutter_gradient_selector插件的一个代码案例。这个插件允许用户通过UI界面选择颜色渐变。

首先，确保在你的pubspec.yaml文件中添加flutter_gradient_selector依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_gradient_selector: ^最新版本号  # 请替换为实际最新版本号

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

接下来，在你的Flutter项目中创建一个使用flutter_gradient_selector的示例页面。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Gradient Selector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GradientSelectorDemo(),
    );
  }
}

class GradientSelectorDemo extends StatefulWidget {
  @override
  _GradientSelectorDemoState createState() => _GradientSelectorDemoState();
}

class _GradientSelectorDemoState extends State<GradientSelectorDemo> {
  Gradient? selectedGradient;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient Selector Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 200,
              decoration: BoxDecoration(
                gradient: selectedGradient,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: selectedGradient == null
                    ? Text('Select a Gradient')
                    : Text('Selected Gradient'),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Select Gradient'),
                    content: SingleChildScrollView(
                      child: GradientSelector(
                        initialGradient: LinearGradient(
                          colors: [Colors.red, Colors.blue],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                        onGradientChanged: (Gradient? gradient) {
                          setState(() {
                            selectedGradient = gradient;
                          });
                          Navigator.of(context).pop();
                        },
                      ),
                    ),
                  ),
                );
              },
              child: Text('Select Gradient'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

  1. 依赖添加：在pubspec.yaml中添加flutter_gradient_selector依赖。
  2. 主应用：MyApp是一个简单的Flutter应用，它定义了应用的主题和主页。
  3. 演示页面：GradientSelectorDemo是一个有状态的Widget，它包含一个显示当前选中渐变的容器和一个按钮来打开渐变选择器对话框。
  4. 渐变选择器：点击按钮会弹出一个AlertDialog，里面包含一个GradientSelector。用户可以在这个UI界面上选择渐变。
  5. 状态更新：当用户选择一个渐变时，onGradientChanged回调会被触发，更新selectedGradient状态，并关闭对话框。

这样，你就可以在你的Flutter应用中集成并使用flutter_gradient_selector插件来选择颜色渐变了。

回到顶部