Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.0.2+1

animated_progress_button

Are you looking for a solution to make your button become professional? This package can help you with all animation inspiration from Pinterest.

pub.dev API documentation Source code
30-day downloads
9
Likes
26
Pub points
30

Install package

flutter pub add animated_progress_button

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The animated_progress_button package enhances standard buttons with smooth, visually appealing animations inspired by Pinterest. It allows developers to create interactive progress buttons that transition between states—such as idle, loading, and success—with customizable visuals and behaviors. Ideal for modern UIs, it supports dynamic feedback during actions like form submissions or data processing. The package is lightweight and easy to integrate, offering a polished touch to user interfaces without requiring complex code. Its animation styles are designed to improve user engagement through responsive feedback.

Use cases

  • Form submission with visual feedback
  • Loading states in mobile apps
  • Interactive call-to-action buttons
  • Enhancing user experience in e-commerce apps
  • Creating engaging onboarding flows

Key features

  • Pinterest-inspired animation designs
  • Customizable button states
  • Smooth transitions between idle/loading/success
  • Easy integration with Flutter widgets
  • Support for custom colors and icons

Suitable for

  • Developers seeking polished UI elements
  • Apps requiring intuitive user feedback
  • Design-focused Flutter projects
  • Mobile applications with interactive forms
  • Teams aiming for modern, engaging interfaces

Considerations

  • Limited platform-specific customization
  • No built-in support for accessibility features
  • Animations may impact performance on low-end devices
  • Requires manual handling of state management
  • Not suitable for highly complex interactive workflows

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Animated Progress Button

Animated loading button to make you app button looks smoother. Take inspritation from Pinterest https://www.pinterest.com/pin/671177150707141229/

alt text

Usages

Create animatedButtonController for controlling the button.

import 'package:animated_progress_button/animated_progress_button.dart';

final AnimatedButtonController animatedButtonController = AnimatedButtonController();

Then customize the button like your own way Noted that you must call animatedButtonController.completed() after getting response from server in order to complete the button animation

AnimatedButton(
   controller: animatedButtonController,
   color: Colors.greenAccent,
   text: 'Log in',
   loadingText: 'Loading',
   loadedIcon: Icon(Icons.check, color: Colors.white),
   onPressed: () async {
       /// calling your API here and wait for the response.
       await Future.delayed(Duration(seconds: 5)); // simulated your API requesting time.
       animatedButtonController.completed(); // call when you get the response
       await Future.delayed(Duration(seconds: 2));
       animatedButtonController.reset(); // call to reset button animation
   },
),

Categories

Button & Progress Button

Source repository

Projects using this package

No data available yet.