animated_button

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个简单且高度可定制的动画按钮，提供类似3D的视觉效果。基于Flutter构建，通过流畅的动画和响应式反馈增强用户交互体验。该按钮支持自定义样式、颜色过渡以及跨多个平台的可扩展效果。非常适合注重视觉吸引力和互动性的现代UI。可无缝集成到面向Android、iOS、Web、macOS、Windows和Linux的应用程序中。

适合场景

交互式应用界面
游戏化用户体验
现代移动和Web应用程序
增强的表单提交
数字产品中的视觉反馈

主要特点

3D 类动画效果
高度可定制的外观
平滑过渡动画
跨平台兼容性
与 Flutter 的轻松集成
响应式触摸反馈

适合对象

寻求引人入胜的用户界面元素的 Flutter 开发者
注重设计的应用程序
需要交互式按钮的应用程序
原型化动态界面
追求精美视觉设计的项目

使用建议

可能会影响低端设备的性能
自定义需要理解 Flutter 动画
仅限基本按钮功能，不包含额外逻辑
不适合复杂的手势交互
最好在按钮内使用轻量级内容

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated Button

A very simple and customizable animated button. Providing simple animation, and many customizable attributes such height, width, child, ... etc.

Getting Started

Nothing difficult here, yet!

Simple Example

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:             AnimatedButton(
          onPressed: () {},
          color: Colors.blue,
          enabled: true,
          disabledColor: Colors.grey,
          shadowDegree: ShadowDegree.light,
          borderRadius: 8,
          duration: 85,
          height: 40,
          width: 140,
          child: Text(
            'Animated button',
            style: TextStyle(
              fontSize: 14,
              color: Colors.white,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }
}

Button attributes

AnimatedButton(
child: ...,			    // Child widget, Row, Text, Column,...etc.
onPressed: () {},  	// Callback for onTap event
duration: 70,  		  // Animaton duration, default is 70 Milliseconds
height: 100,  		  // Button Height, default is 64
width: 200,  			  // Button width, default is 200
enabled: true,  		// When disabled, onTap won't be called
shadowDegree: ShadowDegree.dark, // Shadow color is generated from button color,
color: Colors.blue,
disabledColor: Colors.grey,
borderRadius: 8,
)

For more examples, check example folder

License

MIT License.

搜索插件、代码仓与 APP 分类

安装插件