Flutter动画背景插件animated_gradient_background的使用

Flutter动画背景插件animated_gradient_background的使用

描述

这是一个用于创建动画渐变背景的 Flutter 库。

示例

功能

• 动画渐变颜色的色调随时间变化。
• 可以自定义渐变的多种颜色、停止点和对齐方式。
• 控制渐变动画的持续时间。

开始使用

要使用此库，在 pubspec.yaml 文件中添加 animated_gradient_background 作为依赖项：

dependencies:
  animated_gradient_background: 0.0.1

使用方法

在 Dart 文件中导入库：

import 'package:animated_gradient_background/animated_gradient_background.dart';

将你的小部件包裹在 AnimatedGradientBackground 中：

AnimatedGradientBackground(
  colors: [Colors.red, Colors.blue, Colors.green],
  child: YourWidget(),
)

参数

示例代码

以下是一个完整的示例代码，展示了如何使用 animated_gradient_background 创建一个带有动画渐变背景的应用程序：

import 'package:flutter/material.dart';
import 'package:animated_gradient_background/animated_gradient_background.dart';
import 'dart:math';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Animated Gradient Background',
      home: App(),
    );
  }
}

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

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  List<Color> _colors = [
    const Color.fromARGB(255, 40, 113, 214),
    Colors.black
  ];

  void _changeColors() {
    setState(() {
      _colors = [
        Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
        Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
      ];
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedGradientBackground(
        colors: _colors,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const FlutterLogo(
                size: 250,
                style: FlutterLogoStyle.horizontal,
              ),
              const Text(
                'Gradient animation background',
                textAlign: TextAlign.center, // 文本居中
                style: TextStyle(
                  fontSize: 25,
                  color: Colors.white,
                ),
              ),
              const SizedBox(height: 10), // 添加空间以分隔标题和描述
              const Text(
                'This is an example of an animated gradient background in Flutter.',
                textAlign: TextAlign.center, // 文本居中
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white70,
                ),
              ),
              const SizedBox(height: 40), // 添加空间以分隔描述和按钮
              ElevatedButton(
                onPressed: _changeColors,
                style: _buttonStyle(),
                child: Icon(Icons.autorenew, color: _colors[0], size: 25), // 将文本改为图标
              ),
            ],
          ),
        ),
      ),
    );
  }

  ButtonStyle _buttonStyle() {
    return const ButtonStyle(
      shape: WidgetStatePropertyAll(
        CircleBorder(),
      ),
      padding: WidgetStatePropertyAll(
        EdgeInsets.all(15), 
      ),
      backgroundColor: WidgetStatePropertyAll(
        Colors.white,
      ),
    );
  }
}