{"id":24926157,"url":"https://github.com/anshrathod/button_animations","last_synced_at":"2025-10-09T04:04:25.452Z","repository":{"id":56826807,"uuid":"294988255","full_name":"anshrathod/button_animations","owner":"anshrathod","description":"A simple flutter package to make highly customizable Flutter widgets with 3d animations.","archived":false,"fork":false,"pushed_at":"2023-03-24T04:43:05.000Z","size":3816,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T20:07:20.645Z","etag":null,"topics":["android","button-animations","dart","flutter","flutter-package","flutter-ui","flutter-widget","hacktoberfest","pubdev","widgets"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anshrathod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-12T17:01:19.000Z","updated_at":"2023-09-27T08:38:39.000Z","dependencies_parsed_at":"2025-02-02T12:27:01.269Z","dependency_job_id":"55c7e247-4ca7-45a1-80d8-2416fafc50f4","html_url":"https://github.com/anshrathod/button_animations","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshrathod%2Fbutton_animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshrathod%2Fbutton_animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshrathod%2Fbutton_animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshrathod%2Fbutton_animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anshrathod","download_url":"https://codeload.github.com/anshrathod/button_animations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","button-animations","dart","flutter","flutter-package","flutter-ui","flutter-widget","hacktoberfest","pubdev","widgets"],"created_at":"2025-02-02T12:26:04.476Z","updated_at":"2025-10-09T04:04:20.418Z","avatar_url":"https://github.com/anshrathod.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Button Animations\n\n![dart](https://img.shields.io/badge/dart-2.19.5-blue?logo=dart\u0026logoColor=blue\u0026labelColor=black\u0026color=0175C2) ![flutter](https://img.shields.io/badge/flutter-3.7.8-blue?logo=flutter\u0026logoColor=blue\u0026labelColor=black) [![pub package](https://img.shields.io/pub/v/path_provider.svg)](https://pub.dev/packages/button_animations)\n\u003cimg src=\"https://visitor-badge.glitch.me/badge?page_id=anshrathod.button_animations\"\u003e\n\nThe [button_animations](https://pub.dev/packages/button_animations) is a package to make highly customizable [Flutter](https://flutter.dev/) widgets with 3d animations.\n\n## Getting Started\n\nTo use this plugin, add the latest version of `button_animations` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/).\n\n### Platform Support\n\n| Android | iOS | Web | MacOS | Linux | Windows |\n| :-----: | :-: | :---: | :-----: | :-: | :---: |\n| \u0026#9989;  | \u0026#9989; | \u0026#9989; | \u0026#9989;  | \u0026#9989; | \u0026#9989; |\n\n### Screenshots\n\n\u003cp\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/3.jpg\" width=\"30%\" height=\"424\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/6.jpg\" width=\"30%\" height=\"424\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/7.jpg\" width=\"30%\" height=\"424\"\u003e\n\u003c/p\u003e\n\n### Parameters and their Description\n\n|      Datatype      |     Parameter      |                                                        Description                                                         |      Default Value       | Required |\n| :----------------: | :----------------: | :------------------------------------------------------------------------------------------------------------------------: | :----------------------: | :------: |\n|    `function `     |       onTap        |                                 The function that is called whenever the widget is tapped                                  |            --            |   Yes    |\n|      `widget`      |       child        |                                                      The child widget                                                      |            --            |   Yes    |\n| `PredefinedThemes` |        type        |      There are 16 predefined themes that you can choose from if you dont want to customize the widget yourself       | PredefinedThemes.primary |    No    |\n|      `Curve`       |   animationCurve   |                                          The curve that the animation will follow                                          |      Curves.easeIn       |    No    |\n|       `bool`       |      enabled       |                                       To check whether the button is enabled or not                                       |           true           |    No    |\n|      `bool`       |    isMultiColor    |                               To check whether the button has multiple color gradient or not                               |          false           |    No    |\n|       `bool`       |     isOutline      |                                      To check whether the button has an outline or not                                      |          false           |    No    |\n|      `bool `       |     darkshadow     |                                    To check whether the button has dark or light shadow                                    |           true           |    No    |\n|       `int`        |      duration      |                                     The time that the animation takes in milliseconds                                      |            70            |    No    |\n|      `double`      |       height       |                                                  The height of the widget                                                  |            64            |    No    |\n|      `double`      |       width        |                                                  The width of the widget                                                   |           200            |    No    |\n|     `double `      |     blurRadius     |                                        The radius of the blur effect of the widget                                         |            0             |    No    |\n|     `double `      |    borderRadius    |                                          The radius of the borders of the widget                                           |            12            |    No    |\n|     `double `      | shadowHeightBottom |                The height of the shadow and the animation of the widget from the bottom of the child widget                |            4             |    No    |\n|     `double `      |  shadowHeightLeft  |                 The height of the shadow and the animation of the widget from the left of the child widget                 |            0             |    No    |\n|      `double`      |    borderWidth     |                                           The width of the border of the widget                                            |            1             |    No    |\n|      `Color`       |    borderColor     | The color of the border of the widget (if type is not null, this will not work \u0026 isOutline should be true for this to work) |       Colors.black       |    No    |\n|      `Color`       |     blurColor      |                        The color of the blur of the widget(if type is not null, this will not work)                        |       Colors.black       |    No    |\n|      `Color`       |       color        |                              The color of the widget(if type is not null, this will not work)                              |       Colors.blue        |    No    |\n|      `Color`       |    shadowColor     |                       The color of the shadow of the widget(if type is not null, this will not work)                       |       Colors.black       |    No    |\n|   `List\u003cColor\u003e`    |       colors       |     The list of colors for the gradient for the background of the widget(isMulticolor should be true for this to work)     |            []            |    No    |\n\n### PredefinedThemes\n\n|    Theme Name    |                                                           Example                                                           |\n| :--------------: | :-------------------------------------------------------------------------------------------------------------------------: |\n|     success      |   \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/success.png\" width=\"300\"\u003e    |\n|  successOutline  |  \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/successout.png\" width=\"300\"\u003e  |\n|      danger      |    \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/danger.png\" width=\"300\"\u003e    |\n|  dangerOutline   |  \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/dangerout.png\" width=\"300\"\u003e   |\n|     warning      |   \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/warning.png\" width=\"300\"\u003e    |\n|  warningOutline  |  \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/warningout.png\" width=\"300\"\u003e  |\n|       info       |     \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/info.png\" width=\"300\"\u003e     |\n|   infoOutline    |   \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/infoout.png\" width=\"300\"\u003e    |\n|     primary      |   \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/primary.jpg\" width=\"300\"\u003e    |\n|  primaryOutline  |  \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/primaryout.jpg\" width=\"300\"\u003e  |\n|    secondary     |  \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/secondary.jpg\" width=\"300\"\u003e   |\n| secondaryOutline | \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/secondaryout.png\" width=\"300\"\u003e |\n|       dark       |     \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/dark.jpg\" width=\"300\"\u003e     |\n|   darkOutline    |   \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/darkout.png\" width=\"300\"\u003e    |\n|      light       |    \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/light.png\" width=\"300\"\u003e     |\n\n## Example\n\n#### For any of the predefined themes you just have to add the child widget, type, and the onTap function.\n\n##### 1. Add borderRadius and, isOutline to add more customization.\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/danger.png\" width=\"500\"\u003e\n\n```ruby\nAnimatedButton(\n  child: Text(\n    'Danger', // add your text here\n    style: TextStyle(\n      color: Colors.white,\n    ),\n  ),\n  type: PredefinedTheme.danger,\n  isOutline: true,\n  borderWidth: 1,\n  onTap: () {},\n),\nAnimatedButton(\n  child: Text(\n    'Danger', // add your text here\n    style: TextStyle(\n      color: Colors.white,\n    ),\n  ),\n  type: PredefinedTheme.danger,\n  darkshadow: false,\n  isOutline: true,\n  borderWidth: 1,\n\n  onTap: () {},\n),\n```\n\n##### 2. Use blurRadius and blurColor\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/dark.jpg\" width=\"500\"\u003e\n\n```ruby\nAnimatedButton(\n  child: Text(\n    'Dark', // add your text here\n    style: TextStyle(\n      color: Colors.white,\n    ),\n  ),\n  type: PredefinedTheme.dark,\n  blurRadius: 10,\n  onTap: () {},\n),\nAnimatedButton(\n  child: Text(\n    'Danger', // add your text here\n    style: TextStyle(\n      color: Colors.white,\n    ),\n  ),\n  type: PredefinedTheme.danger,\n  darkshadow: false,\n  blurRadius: 10,\n  onTap: () {},\n),\n```\n\n##### 3. Use all other parameters to make custom buttons\n\n- Gradient Buttons\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/gradient.jpg\" width=\"500\"\u003e\n\n```ruby\nRow(\n  children: [\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Text(\"Gradient Button\"),\n        onTap: () {},\n        isMultiColor: true,\n        colors: [\n          Colors.red[100],\n          Colors.blue[200],\n        ],\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Text(\"Gradient Button with outline\"),\n        onTap: () {},\n        isMultiColor: true,\n        isOutline: true,\n        colors: [\n          Colors.red[100],\n          Colors.blue[200],\n        ],\n      ),\n    ),\n  ],\n),\nRow(\n  children: [\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Text(\n          \"Gradient Button\",\n          style: TextStyle(\n            color: Colors.white,\n          ),\n        ),\n        onTap: () {},\n        isMultiColor: true,\n        colors: [\n          Colors.green,\n          Colors.blue,\n        ],\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Text(\n          \"Gradient Button with outline\",\n          style: TextStyle(\n            color: Colors.white,\n          ),\n        ),\n        onTap: () {},\n        isMultiColor: true,\n        isOutline: true,\n        colors: [\n          Colors.green,\n          Colors.blue,\n        ],\n      ),\n    ),\n  ],\n),\n\n```\n\n- Rounded Buttons\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/rounded.jpg\" width=\"500\"\u003e\n\n```ruby\nRow(\n  children: [\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Text(\"Rounded Button\"),\n        onTap: () {},\n        height: 60,\n        type: null,\n        borderRadius: 30,\n        color: Colors.cyan,\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Text(\"Rounded Button with outline\"),\n        onTap: () {},\n        height: 60,\n        type: null,\n        borderRadius: 30,\n        isOutline: true,\n        color: Colors.amber,\n      ),\n    ),\n  ],\n),\n\n```\n\n- Rounded Buttons with Icons\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/roundedicon.jpg\" width=\"500\"\u003e\n\n```ruby\nRow(\n  children: [\n    Padding(\n      padding: const EdgeInsets.all(12.0),\n      child: AnimatedButton(\n        child: Row(\n          mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n          children: [\n            Icon(Icons.home),\n            Text(\"Button with Icon\"),\n          ],\n        ),\n        onTap: () {},\n        type: null,\n        height: 60,\n        borderRadius: 30,\n        color: Colors.teal,\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(2.0),\n      child: AnimatedButton(\n        child: Row(\n          mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n          children: [\n            Icon(Icons.home, color: Colors.white),\n            Text(\"Button with Icon \u0026 outline\",\n                style: TextStyle(color: Colors.white)),\n          ],\n        ),\n        onTap: () {},\n        type: null,\n        height: 60,\n        width: 220,\n        borderRadius: 30,\n        isOutline: true,\n        color: Colors.deepPurple,\n      ),\n    ),\n  ],\n),\n\n```\n\n- Social Media Buttons\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/socialmedia.jpg\" width=\"500\"\u003e\n\n```ruby\nRow(\n  mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n  children: [\n    Padding(\n      padding: const EdgeInsets.all(2),\n      child: AnimatedButton(\n        child: Icon(\n          FontAwesomeIcons.facebookF,\n          color: Colors.white,\n          size: 25,\n        ),\n        onTap: () {},\n        type: null,\n        height: 45,\n        width: 45,\n        borderRadius: 22.5,\n        color: Color(0xFF49659F),\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(2),\n      child: AnimatedButton(\n        child: Icon(\n          FontAwesomeIcons.twitter,\n          color: Colors.white,\n          size: 25,\n        ),\n        onTap: () {},\n        type: null,\n        height: 45,\n        width: 45,\n        borderRadius: 22.5,\n        color: Color(0xFF1DA1F2),\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(2),\n      child: AnimatedButton(\n        child: Icon(\n          FontAwesomeIcons.google,\n          color: Colors.white,\n          size: 25,\n        ),\n        onTap: () {},\n        type: null,\n        height: 45,\n        width: 45,\n        borderRadius: 22.5,\n        color: Colors.blue,\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(2),\n      child: AnimatedButton(\n        child: Icon(\n          FontAwesomeIcons.microsoft,\n          color: Colors.lightBlue,\n          size: 25,\n        ),\n        onTap: () {},\n        type: null,\n        height: 45,\n        width: 45,\n        borderRadius: 22.5,\n        color: Colors.white,\n      ),\n    ),\n    Padding(\n      padding: const EdgeInsets.all(2),\n      child: AnimatedButton(\n        child: Icon(\n          FontAwesomeIcons.instagram,\n          color: Colors.white,\n          size: 25,\n        ),\n        onTap: () {},\n        type: null,\n        height: 45,\n        width: 45,\n        borderRadius: 22.5,\n        color: Color(0xFFB81877),\n      ),\n    ),\n  ],\n),\n\n```\n\n- Sign in Buttons\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/signin.jpg\" width=\"300\"\u003e\n\n```ruby\nPadding(\n  padding: const EdgeInsets.all(10),\n  child: AnimatedButton(\n    child: Row(\n      mainAxisAlignment: MainAxisAlignment.spaceAround,\n      children: [\n        Icon(\n          FontAwesomeIcons.linkedinIn,\n          color: Colors.white,\n          size: 25,\n        ),\n        Text(\n          \"Sign in with LinkedIn\",\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 20.0,\n          ),\n        )\n      ],\n    ),\n    onTap: () {},\n    type: null,\n    height: 50,\n    shadowHeightBottom: 4,\n    shadowHeightLeft: 4,\n    width: 275,\n    borderRadius: 25,\n    color: Color(0xFF0077B5),\n  ),\n),\nPadding(\n  padding: const EdgeInsets.all(10),\n  child: AnimatedButton(\n    child: Row(\n      mainAxisAlignment: MainAxisAlignment.spaceAround,\n      children: [\n        Icon(\n          FontAwesomeIcons.pinterestP,\n          color: Colors.white,\n          size: 25,\n        ),\n        Text(\n          \"Sign in with Pinterest\",\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 20.0,\n          ),\n        )\n      ],\n    ),\n    onTap: () {},\n    type: null,\n    height: 50,\n    isOutline: true,\n    shadowHeightBottom: 4,\n    shadowHeightLeft: 4,\n    width: 250,\n    borderRadius: 2,\n    color: Colors.red,\n  ),\n),\nPadding(\n  padding: const EdgeInsets.all(10),\n  child: AnimatedButton(\n    child: Row(\n      mainAxisAlignment: MainAxisAlignment.spaceAround,\n      children: [\n        Icon(\n          FontAwesomeIcons.githubAlt,\n          color: Colors.white,\n          size: 25,\n        ),\n        Text(\n          \"Sign in with GitHub\",\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 20.0,\n          ),\n        )\n      ],\n    ),\n    onTap: () {},\n    type: null,\n    height: 50,\n    shadowHeightBottom: 4,\n    shadowHeightLeft: 4,\n    width: 250,\n    shadowColor: Colors.grey,\n    blurColor: Colors.grey,\n    blurRadius: 5,\n    borderRadius: 10,\n    color: Colors.black,\n  ),\n),\nPadding(\n  padding: const EdgeInsets.all(10),\n  child: AnimatedButton(\n    child: Row(\n      mainAxisAlignment: MainAxisAlignment.spaceAround,\n      children: [\n        Icon(\n          FontAwesomeIcons.apple,\n          color: Colors.white,\n          size: 25,\n        ),\n        Text(\n          \"Sign in with Apple\",\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 20.0,\n          ),\n        )\n      ],\n    ),\n    onTap: () {},\n    type: null,\n    shadowColor: Colors.pink,\n    height: 50,\n    width: 250,\n    shadowHeightBottom: 6,\n    shadowHeightLeft: 4,\n    borderRadius: 10,\n    color: Color(0xFF333333),\n  ),\n),\nPadding(\n  padding: const EdgeInsets.all(10),\n  child: AnimatedButton(\n    child: Row(\n      mainAxisAlignment: MainAxisAlignment.spaceAround,\n      children: [\n        Icon(\n          Icons.mail_outline,\n          color: Colors.white,\n          size: 25,\n        ),\n        Text(\n          \"Sign in with Email\",\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 20.0,\n          ),\n        )\n      ],\n    ),\n    onTap: () {},\n    type: null,\n    height: 50,\n    width: 250,\n    isOutline: true,\n    darkShadow: false,\n    shadowHeightBottom: 4,\n    shadowHeightLeft: 4,\n    borderRadius: 10,\n    color: Colors.lightBlueAccent,\n  ),\n),\n\n```\n\n- Custom Buttons\n\n \u003cimg src=\"https://raw.githubusercontent.com/anshrathod/button_animations/master/Screen-shots/imagebutton.jpg\" width=\"250\"\u003e\n\n```ruby\nPadding(\n  padding: const EdgeInsets.all(10),\n  child: AnimatedButton(\n    child: ClipRRect(\n      borderRadius: BorderRadius.circular(10.0),\n      child: Image.network(\n        \"my_logo_image_url\",\n        fit: BoxFit.fill,\n      ),\n    ),\n    onTap: () {},\n    type: null,\n    height: 144,\n    width: 144,\n    isOutline: true,\n    shadowHeightBottom: 4,\n    shadowHeightLeft: 4,\n    borderRadius: 10,\n    color: Color(0xFF033249),\n  ),\n),\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshrathod%2Fbutton_animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanshrathod%2Fbutton_animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshrathod%2Fbutton_animations/lists"}