Flutter渐变背景生成插件gradient_background_generator的使用

Flutter渐变背景生成插件gradient_background_generator的使用

一个易于使用的Flutter包，用于创建具有自定义样式的精美动画渐变背景。通过此包，您可以为您的Flutter应用添加令人惊叹的视觉效果。

特性

• 多种渐变样式：线性、径向、扫描
• 各种渐变方向
• 可定制的动画持续时间和角度
• 预设颜色集，方便快速设置

使用示例

以下是一个完整的示例，演示如何在Flutter应用中使用gradient_background_generator插件来创建不同类型的渐变背景。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            // 线性渐变动画背景
            SizedBox(
              height: MediaQuery.sizeOf(context).height * .25,
              child: const AnimatedGradientBackground(
                angle: 0.4, // 动画角度
                style: GradientStyle.linear, // 渐变样式：线性
                colorSets: [GradientPreset.levi, GradientPreset.azureLane], // 颜色集
                duration: Duration(seconds: 2), // 动画持续时间
                direction: GradientDirection.leftToRight, // 动画方向
              ),
            ),
            
            // 扫描渐变背景
            SizedBox(
              height: MediaQuery.sizeOf(context).height * .25,
              child: const GradientBackground(
                angle: 1, // 动画角度
                style: GradientStyle.sweep, // 渐变样式：扫描
                colors: GradientPreset.boogieWonderland, // 颜色集
                direction: GradientDirection.leftToRight, // 动画方向
              ),
            ),
            
            // 径向渐变背景
            SizedBox(
              height: MediaQuery.sizeOf(context).height * .25,
              child: const GradientBackground(
                style: GradientStyle.radial, // 渐变样式：径向
                colors: GradientPreset.diesel, // 颜色集
                direction: GradientDirection.leftToRight, // 动画方向
              ),
            ),
            
            // 扫描渐变动画背景
            SizedBox(
              height: MediaQuery.sizeOf(context).height * .25,
              child: const AnimatedGradientBackground(
                angle: 0.9, // 动画角度
                style: GradientStyle.sweep, // 渐变样式：扫描
                colorSets: [
                  GradientPreset.diesel, // 颜色集
                  GradientPreset.frozen, // 颜色集
                ],
                duration: Duration(seconds: 2), // 动画持续时间
                direction: GradientDirection.rightToLeft, // 动画方向
              ),
            ),
          ],
        ),
      ),
    );
  }
}