Flutter动画按钮插件pretty_animated_buttons的使用

Pretty Animated Buttons是一个Flutter插件，提供了多种美观且高度可定制的动画按钮。当前版本中包含了12种不同风格的动画按钮，并且未来还会增加更多样式。

动画按钮列表

序号	按钮名称	示例
1	Pretty Shadow Button
2	Pretty Neumorphic Button
3	Pretty Slide Underline Button
4	Pretty Wave Button
5	Pretty Fuzzy Button
6	Pretty Slide Icon Button
7	Pretty Slide Up Button
8	Pretty Color Slide Button
9	Pretty Skew Button
10	Pretty Border Button
11	Pretty Bar Button
12	Pretty Capsule Button

使用方法

使用这些按钮非常简单，只需在代码中调用相应的按钮类名即可。以下是一些示例：

完整示例 Demo

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pretty Buttons Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const PrettyButtonsExample(),
    );
  }
}

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

  @override
  State<PrettyButtonsExample> createState() => _PrettyButtonsExampleState();
}

class _PrettyButtonsExampleState extends State<PrettyButtonsExample> {
  final Color? scaffoldBg = Colors.grey[300];
  final Color btnColor = Colors.teal;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: scaffoldBg,
      body: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Pretty Shadow Button
              PrettyShadowButton(
                label: "Pretty Shadow Button",
                onPressed: () {},
                icon: Icons.arrow_forward,
                shadowColor: btnColor,
              ),
              // Pretty Neumorphic Button
              PrettyNeumorphicButton(
                label: 'Pretty Neumorphic Button',
                onPressed: () {},
              ),
              // Pretty Slide Underline Button
              PrettySlideUnderlineButton(
                label: 'Pretty Slide Underline Button',
                onPressed: () {},
                secondSlideColor: scaffoldBg,
              ),
              // Pretty Wave Button
              PrettyWaveButton(
                child: const Text(
                  'Pretty Wave Button',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
              // Pretty Fuzzy Button
              PrettyFuzzyButton(
                label: 'Pretty Fuzzy Button',
                onPressed: () {},
              ),
              // Pretty Slide Icon Button
              PrettySlideIconButton(
                foregroundColor: btnColor,
                icon: Icons.arrow_forward,
                label: 'Pretty Slide Icon Button',
                slidePosition: SlidePosition.right,
                labelStyle: Theme.of(context).textTheme.bodyLarge!,
                onPressed: () {},
              ),
              // Pretty Slide Up Button
              PrettySlideUpButton(
                bgColor: btnColor,
                onPressed: () {},
                firstChild: const Text(
                  'First Slide Up Text',
                  style: TextStyle(color: Colors.white),
                ),
                secondChild: const Text(
                  'Second Slide Up Text',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              // Pretty Color Slide Button
              PrettyColorSlideButton(
                label: 'Pretty Color Slide Button',
                onPressed: () {},
                bgColor: btnColor,
                position: SlidePosition.bottom,
              ),
              // Pretty Skew Button
              PrettySkewButton(
                label: 'Pretty Skew Button',
                firstBgColor: btnColor,
                onPressed: () {},
              ),
              // Pretty Border Button
              PrettyBorderButton(
                label: 'Pretty Border Button',
                onPressed: () {},
              ),
              // Pretty Bar Button
              PrettyBarButton(
                onPressed: () {},
                label: 'Pretty Bar Button',
              ),
              // Pretty Capsule Button
              PrettyCapsuleButton(
                label: 'Pretty Capsule Button'.toUpperCase(),
                labelStyle: const TextStyle(fontWeight: FontWeight.w700),
                bgColor: btnColor,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

特殊参数说明

Pretty Slide Icon Button

PrettySlideIconButton支持左右滑动位置设置：

• 左滑：

  slidePosition: SlidePosition.left,
  

• 右滑：

  slidePosition: SlidePosition.right,
  

Pretty Color Slide Button

PrettyColorSlideButton支持滑动方向设置：

• 左右滑动：

  position: SlidePosition.left,
  

• 上下滑动：

  position: SlidePosition.top,
  

Pretty Skew Button

PrettySkewButton也支持左右滑动位置设置：

• 左滑：

  skewPosition: SkewPositions.left,
  

• 右滑：

  skewPosition: SkewPositions.right,