Flutter动画渐变按钮插件flutter_animated_gradient_button的使用

Flutter动画渐变按钮插件flutter_animated_gradient_button的使用

通过 flutter_animated_gradient_button 插件，你可以创建一个带有动画渐变效果的按钮。

使用 AnimatedGradientButton 对象直接

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter 动画渐变按钮"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              width: double.infinity,
              height: 100,
              child: const Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  AnimatedGradientButton(
                    btnText: "FAG_Btn",
                    color1: Colors.green,
                    color2: Colors.yellow,
                    color3: Colors.red,
                    color4: Colors.blue,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

完整示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 flutter_animated_gradient_button 插件来创建一个带有动画渐变效果的按钮。

import 'package:flutter/material.dart';
import 'package:flutter_animated_gradient_button/flutter_animated_gradient_button.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 示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter 动画渐变按钮"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              width: double.infinity,
              height: 100,
              child: const Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  AnimatedGradientButton(
                    btnText: "FAG_Button",
                    color1: Colors.green,
                    color2: Colors.yellow,
                    color3: Colors.red,
                    color4: Colors.blue,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter动画渐变按钮插件flutter_animated_gradient_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画渐变按钮插件flutter_animated_gradient_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_animated_gradient_button 是一个 Flutter 插件，用于创建带有渐变背景的动画按钮。这个插件允许你轻松地创建具有渐变颜色和动画效果的按钮，适用于各种场景，如登录按钮、操作按钮等。

以下是使用 flutter_animated_gradient_button 插件的步骤和示例代码：

1. 添加依赖

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

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

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:flutter_animated_gradient_button/flutter_animated_gradient_button.dart';

3. 使用 AnimatedGradientButton

AnimatedGradientButton 是插件中提供的主要小部件。你可以通过设置不同的属性来定制按钮的外观和行为。

以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Gradient Button Example'),
        ),
        body: Center(
          child: AnimatedGradientButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text(
              'Click Me',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
              ),
            ),
            gradientColors: [
              Colors.blue,
              Colors.purple,
            ],
            borderRadius: BorderRadius.circular(8),
            duration: Duration(milliseconds: 500),
            shadowColor: Colors.black.withOpacity(0.3),
            elevation: 5,
          ),
        ),
      ),
    );
  }
}
回到顶部