Progress State Button - A customizable progress button for Flutter

Related tags

Animation flutter
Overview

Progress State Button

A customizable progress button for Flutter

Test with DartPad

Installation

https://pub.dev/packages/progress_state_button

progress_state_button: "^1.0.4"

Usage

Icon

ProgressButton.icon(iconedButtons: {
      ButtonState.idle:
        IconedButton(
            text: "Send",
            icon: Icon(Icons.send,color: Colors.white),
            color: Colors.deepPurple.shade500),
      ButtonState.loading:
        IconedButton(
            text: "Loading",
            color: Colors.deepPurple.shade700),
      ButtonState.fail:
        IconedButton(
            text: "Failed",
            icon: Icon(Icons.cancel,color: Colors.white),
            color: Colors.red.shade300),
      ButtonState.success:
        IconedButton(
            text: "Success",
            icon: Icon(Icons.check_circle,color: Colors.white,),
            color: Colors.green.shade400)
    }, 
    onPressed: onPressed,
    state: ButtonState.idle);

With Custom Widgets

ProgressButton(
      stateWidgets: {
        ButtonState.idle: Text("Idle",style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),),
        ButtonState.loading: Text("Loading",style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),),
        ButtonState.fail: Text("Fail",style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),),
        ButtonState.success: Text("Success",style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),)
      },
      stateColors: {
        ButtonState.idle: Colors.grey.shade400,
        ButtonState.loading: Colors.blue.shade300,
        ButtonState.fail: Colors.red.shade300,
        ButtonState.success: Colors.green.shade400,
      },
      onPressed: onPressed,
      state: ButtonState.idle,
    );

Constructors

Default constructor of ProgressButton

stateWidgets - Widgets of states
stateColors - Background color oof states
state = ButtonState.idle` - Current state of button
onPressed - onPressed function same like MaterialButton
onAnimationEnd - onAnimatedEnd function calls like that onAnimatedEnd(AnimationStatus animationStatus,ButtonState currentState).
minWidth = 200.0 - Loading state width
maxWidth = 400.0 - failed,success,idle states width
radius = 16.0 - Button radius
height = 53.0 - Button height
circularProgressIndicator - CircularProgressIndicator widget, default is instating with current state color.
progressIndicatorAlignment = MainAxisAlignment.spaceBetween` - ProgressIndicator aligment
progressIndicatorSize = 35.0 - size of progress indicator
padding = EdgeInsets.zero - Padding of button
minWidthStates = List of min width states, loading is the default. If you want to make small only icon states define them on this.
animationDuration = Transition animation duration.

ProgressButton.icon() specific constructors

Map
   
     iconedButtons- State and IconedButton map
double iconPadding: 4.0 - Padding of icon 
TextStyle textStyle - TextStyle of all of states

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Comments
  • Change size of button for each ButtonState

    Change size of button for each ButtonState

    Hi,

    Thanks for this great widget!

    I would like to change the appearance of the "success" state to only show an icon and minimize the width of the button (like when loading). Is it possible?

    opened by mikthemonster 4
  • typo: progressIndicatorAligment -> progressIndicatorAlignment

    typo: progressIndicatorAligment -> progressIndicatorAlignment

    progressIndicatorAligment should be changed to progressIndicatorAlignment

    (typo occurrences)

    Recommend deprecating the property in favor of the correctly spelled one to avoid breaking changes.

    It can be annoying at times, but I'd recommend a spell checker like (this one)[https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker].

    opened by uPaymeiFixit 2
  • Exception on mobile devices

    Exception on mobile devices

    I observe exceptions being thrown on Android Mobile devices:

    "int" is not a subtype of "double?" occuring at lines like

width = widget.maxWidth:

    it should be changed to (3 occurrences in progress_button.dart)

        if (widget.maxWidth is double)
      width = widget.maxWidth;
    else
      width = (widget.maxWidth as int).toDouble();
    opened by Terranic 1
  • CircularProgressIndicator

    CircularProgressIndicator

    Hi, I tried to use : progressIndicator: CircularProgressIndicator( backgroundColor: Colors.white, valueColor: AlwaysStoppedAnimation(Colors.red), strokeWidth: 1, ), but it uses default progress indicator with default colors.

    opened by Alijaaan 1
  • can't see the progressButton itself

    can't see the progressButton itself

    Hi,

    Trying very first button and i just can't see it ! if i change the color of the icon, i see it but still can't see the progressbutton itself...

    Any idea please ?

          ButtonState.idle:
        IconedButton(
            text: "Send",
            icon: Icon(Icons.send,color: Colors.white),
            color: Colors.deepPurple.shade500),
      ButtonState.loading:
        IconedButton(
            text: "Loading",
            color: Colors.deepPurple.shade700),
      ButtonState.fail:
        IconedButton(
            text: "Failed",
            icon: Icon(Icons.cancel,color: Colors.white),
            color: Colors.red.shade300),
      ButtonState.success:
        IconedButton(
            text: "Success",
            icon: Icon(Icons.check_circle,color: Colors.white,),
            color: Colors.green.shade400)
    }, 
    onPressed: onPressed,
    state: ButtonState.idle);```

in the capture.pngg :
"Accepter" and "Refuser" buttons are classic Textbuttons
And the blue arrow below is the icon of the progressButton is idle state but can't see anything else, neither the button neither the text.
Plz help
![Capture](https://user-images.githubusercontent.com/3100468/190088542-012bc5fe-f0cb-4721-8421-6aa60e97e9a5.PNG)
    opened by Gobmichet 0
Owner
Selim
Selim
GitHub
A liquid progress indicator for Flutter

liquid_progress_indicator Liquid progress indicator for Flutter. Features Liquid circular progress indicator. Liquid linear progress indicator. Liquid

null 301 Dec 15, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Mohammad Fayaz 202 Dec 11, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Andre Cytryn 171 Sep 23, 2022
Highly customizable, feature-packed calendar widget for Flutter

TableCalendar Highly customizable, feature-packed calendar widget for Flutter. TableCalendar with custom styles TableCalendar with custom builders Fea

Aleksander Woźniak 1.5k Jan 7, 2023
A customizable and easy to use UI widgets to help develop apps faster

Lenore UI Beautiful, customizable and easy to use UI widgets to help me (or maybe you) develop my (or maybe your) apps faster. This is my personal pac

Lenore 3 Nov 4, 2022
Easy to use, customizable and pluggable Theme Provider.

theme_provider Easy to use, customizable Theme Provider. This provides app color schemes throughout the app and automatically rebuilds the UI dynamica

K.D. Sunera Avinash Chandrasiri 143 Dec 10, 2022
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.

Flutter DropdownButton2 Intro Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs. Featur

AHMED ELSAYED 125 Jan 4, 2023
Custom Layout with interactive add button to impove your UI and UX .

Interactive Add button layout Custom Layout with interactive add button to impove your UI and UX . the package is available here inspired from Oleg Fr

Dokkar Rachid Reda 20 Sep 13, 2021
An animation Framework for Flutter. It is state-based, declarative, extensible, composable and easy to use.

⚠️ This package is in an early state of development. If you find any bugs or have any suggestions, please open an issue. Fleet is an animation framewo

Gabriel Terwesten 3 Sep 29, 2022
A Kotlin and Swift DSL for finite state machine

StateMachine A state machine library in Kotlin and Swift. StateMachine is used in Scarlet Example State Diagram The examples below create a StateMachi

Tinder 1.8k Jan 5, 2023
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Debjeet Das 1 Apr 9, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023