Flutter动画按钮插件sweep_animation_button的使用

Flutter动画按钮插件sweep_animation_button的使用

在您的Flutter项目中使用sweep_animation_button插件可以创建一个具有动画效果的按钮。以下是详细的使用说明和示例代码。

安装插件

首先，在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  sweep_animation_button: ^0.0.3

然后运行flutter pub get以安装该插件。

导入插件

在需要使用该插件的Dart文件中导入：

import 'package:sweep_animation_button/sweep_animation_button.dart';

使用示例

示例 1

SweepAnimationButton(
    width: 250,
    height: 50,
    animationProgressColor: Colors.green[800],
    borderRadius: 50,
    animationColor: Colors.lightGreen,
    backroundColor: Colors.lightGreen[200],
    durationCircle: 5,
    hideIcon: true,
    child: Text(
      "Sweeped Button",
      style: TextStyle(
        fontSize: 15,
        color: Colors.green[600],
        fontWeight: FontWeight.w600,
        letterSpacing: 1,
      ),
    ),
    onTap: () {
      showDialog(
        context: context,
        builder: (context) => Dialog(
          shape: const CircleBorder(),
          elevation: 0.4,
          child: Container(
            width: 70,
            height: 70,
            decoration: BoxDecoration(
              color: Colors.lightGreen[300],
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Icon(
                Icons.done,
                size: 24,
                color: Colors.lightGreen[700],
              ),
            ),
          ),
        ),
      );
    },
),

示例 2

SweepAnimationButton(
    width: 250,
    height: 50,
    animationProgressColor: Colors.deepPurple[100],
    borderRadius: 0,
    animationColor: Colors.deepPurple,
    backroundColor: Colors.deepPurple[200],
    durationCircle: 5,
    hideIcon: true,
    child: Text(
      "Sweeped Button",
      style: TextStyle(
        fontSize: 15,
        color: Colors.deepPurple[700],
        fontWeight: FontWeight.w600,
        letterSpacing: 1,
      ),
    ),
    onTap: () {
      setState(() => isChanged = !isChanged);
      setState(() => visibility = false);
    },
  ),

属性说明

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用sweep_animation_button插件。

// ignore_for_file: avoid_print
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sweep_animation_button/sweep_animation_button.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool isChanged = true;
  Color kbackroundColor = Colors.deepPurple.shade100;
  Color kbackroundColorOne = Colors.deepPurple;
  bool visibility = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: isChanged ? kbackroundColor : kbackroundColorOne,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              isChanged ? "Exemple 2" : "excellent",
              style: TextStyle(
                color: isChanged ? kbackroundColorOne : kbackroundColor,
                fontSize: 35,
                fontWeight: FontWeight.w600,
                letterSpacing: 1,
              ),
            ),
            SizedBox(height: isChanged ? 25 : 0),
            Visibility(
              visible: visibility,
              child: SweepAnimationButton(
                width: 250,
                height: 50,
                animationProgressColor: Colors.deepPurple[100],
                borderRadius: 0,
                animationColor: Colors.deepPurple,
                backroundColor: Colors.deepPurple[200],
                durationCircle: 5,
                hideIcon: true,
                child: Text(
                  "Sweeped Button",
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.deepPurple[700],
                    fontWeight: FontWeight.w600,
                    letterSpacing: 1,
                  ),
                ),
                onTap: () {
                  setState(() => isChanged = !isChanged);
                  setState(() => visibility = false);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}