Flutter动画按钮插件smooth_animated_button_package的使用

Flutter 动画按钮插件 smooth_animated_button_package 的使用

SmoothButton 包 ✨🔘

SmoothButton 包是 Flutter 中的一个可定制按钮包，它提供了一个平滑且交互式的用户体验。它包含一个名为 SmoothButton 的小部件，可以轻松集成到您的 Flutter 应用程序中。该包提供了广泛的定制选项，允许您根据具体需求调整按钮的外观。

通过 SmoothButton 包，您可以创建不仅看起来很棒而且提供无缝用户体验的按钮。该包允许您自定义按钮的各种方面，例如按钮颜色、图标颜色、阴影效果、边框半径、动画持续时间等。这种灵活性使您能够将按钮的视觉风格与应用程序的整体设计语言对齐，确保一致且精致的外观。

除了可定制的外观外，SmoothButton 包还提供了平滑且交互的动画。当按钮被按下或释放时，它会在活动状态和非活动状态之间优雅地过渡，为用户提供视觉反馈并增强交互体验。您可以控制动画的持续时间，以便微调按钮的行为以匹配应用程序的需求。

该包还支持流行的图标库，如由 Flutter 提供的 Material Icons。这使得选择各种图标来表示按钮的功能变得容易。无论是心形图标用于“收藏”按钮还是播放按钮图标用于多媒体控件，您都可以轻松选择合适的图标来传达预期的操作。

通过使用 SmoothButton 包，您可以创建具有可选文本标签的按钮，提供额外的上下文或明确按钮的目的。您可以自定义文本标签的样式，包括字体大小、字体粗细和颜色，以确保它与按钮的整体外观相匹配。

无论您正在构建简单的实用程序应用还是复杂的用户界面，SmoothButton 包都可以成为您的 Flutter 项目的宝贵补充。其定制选项结合了平滑动画和用户友好的设计，使您能够创建直观且视觉上吸引人的按钮，从而吸引并取悦您的用户。

版本

支持

构造函数

SmoothButton({
    super.key,
    this.isButtonPressed = false,
    this.activeIconColor = Colors.redAccent,
    this.pasifeIconColor = Colors.red,
    this.noShadowColor = Colors.grey,
    this.shadowColor = Colors.white,
    this.activeButtonColor = Colors.white,
    this.pasifeButtonColor = Colors.grey,
    this.borderRadius = 12,
    this.bottomOffset = const Offset(6, 6),
    this.topOffset = const Offset(-6, -6),
    this.blurRadius = 15,
    this.spreadRadius = 1,
    this.text = "",
    this.textStyle = const TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
    required this.duration,
    required this.icon,
    required this.iconSize,
    required this.buttonheight,
    required this.buttonwidth,
    // Added parameter for text
  });

示例

import 'package:flutter/material.dart';
import 'package:smooth_animated_button_package/button.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(
        backgroundColor: Colors.grey,
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Center(
                child: SmoothButton(
                  activeIconColor: Colors.red,
                  duration: const Duration(milliseconds: 300),
                  icon: Icons.favorite,
                  // Use MediaQuery or Int Value
                  buttonheight: MediaQuery.of(context).size.height * 0.2,
                  // Use MediaQuery or Int Value
                  buttonwidth: 300,
                  borderRadius: 20, iconSize: 60,
                  text: "Smooth Button",
                  textStyle: TextStyle(
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                    fontSize: 25,
                  ),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Center(
                child: SmoothButton(
                  pasifeIconColor: Colors.green,
                  activeIconColor: Colors.black,
                  duration: const Duration(milliseconds: 500),
                  icon: Icons.add_alert,
                  // Use MediaQuery or Int Value
                  buttonheight: MediaQuery.of(context).size.height * 0.4,
                  // Use MediaQuery or Int Value
                  buttonwidth: 100,
                  borderRadius: 20, iconSize: 60,
                ),
              ),
            ]),
      ),
    );
  }
}