A Flutter Material Button that animates between Progress and Error states

Overview

progress_button

A Material Flutter Button that supports progress and error visuals

Getting Started

ProgressButton is designed to be easy to use and customizable. Without going into much detail, you can see a demo and example code below. What more do you need from a single class package??

  • First, add dependency to your pubspec.yaml
dependencies:
  progress_button: ^0.0.2
  • Second, add progress button to your widget tree
val progressButton = ProgressButton(
    child: Text("Login"),
    onPressed: VoidCallback,
    buttonState: ButtonState.normal,
    backgroundColor: Theme.of(context).primaryColor,
    progressColor: Theme.of(context).primaryColor,
);

Of course you can change the buttonState anytime you want by using StreamBuilders and such. ProgressButton reacts accordingly to changes.

Demo 1

Demo 2

Comments
  • Button's 'child' content is shown during the 'InProgress' animation

    Button's 'child' content is shown during the 'InProgress' animation

    The button shows it's child content instead of continuing with the InProgress animation. Here is an example in this state:

    in-progress-animation

    The problem appears to relate too the snippet below. In this case, the animation will stop running after it's first completion:

    https://github.com/halilozercan/ProgressButton/blob/5d4d39b1bc0cfd440623a293a1f6e9ae12ff62a8/lib/progress_button.dart#L106-L108

    opened by mwgriffiths88 2
  • Submit on last digit doesn't work

    Submit on last digit doesn't work

    When you type the last digit the onSubmit isn't invoked because of the error: W/FlutterTextInput(17572): Unsupported operation: Cannot clear a fixed-length list

    This is because you try to invoke _pin.clear() in the clearTextFields method and dart doesn't allow it. I replaced it with _pin.forEach((e) => e = ""); and not it works alright.

    Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel dev, v1.2.0, on Microsoft Windows [Version 10.0.14393], locale hr-HR) [√] Android toolchain - develop for Android devices (Android SDK version 28.0.3) [√] Android Studio (version 3.3) [√] VS Code (version 1.26.1) [√] VS Code, 64-bit edition (version 1.30.2) [√] Connected device (1 available)

    opened by wolfcro1984 2
  • Add support for text styling

    Add support for text styling

    In the constructor you can pass only the string value for the text widget which is created in normal button state.

    val progressButton = ProgressButton(
        onPressed: VoidCallback,
        **text: "Login",**
        buttonState: ButtonState.normal,
        pBackgroundColor: Theme.of(context).primaryColor,
        pTextColor: Theme.of(context).primaryTextTheme.button.color,
        pProgressColor: Theme.of(context).primaryColor,
    );
    

    The problem is that this doesn't support styling the text. Maybe even a better approach would be to allow a widget to be passed in for normal button state.

    opened by wolfcro1984 1
  • Potential memory leak from Animation Controllers

    Potential memory leak from Animation Controllers

    ════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
    The following assertion was thrown while finalizing the widget tree:
    _ProgressButtonState#99899(tickers: tracking 2 tickers) was disposed with an active Ticker.
    
    ...
    
    Tickers used by AnimationControllers should be disposed by calling dispose() on the AnimationController itself. Otherwise, the ticker will leak.
    

    When disposing of a widget that contains a button actively being animated, the above error appears.

    This widget should dispose of its AnimationControllers itself.

    opened by david-shortman 0
  • Can you make  example project or something?

    Can you make example project or something?

    Because i new in Flutter and here is my problem...

    I import the package import 'package:progress_button/progress_button.dart';

    I don't not where i has to copy this:

    val progressButton = ProgressButton(
        child: Text("Login"),
        onPressed: VoidCallback,
        buttonState: ButtonState.normal,
        backgroundColor: Theme.of(context).primaryColor,
        progressColor: Theme.of(context).primaryColor,
    );
    

    Is really the word "val" is the correct? not "var"? And the onPressed event "VoidCallback"...the error debug says: "The argument type 'Type' can't be assigned to the parameter type '() → void'."

    Can you help me with that? Thanks!

    opened by xhidnoda 3
Owner
Halil Ozercan
Android Apps, UI, Framework
Halil Ozercan
A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

stylish_dialog A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter. Showcase ⭐ Installing de

Marsad Maqsood 5 Nov 8, 2022
A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Maurice McCabe 157 Nov 22, 2022
Flutter package to diplay progress through a milestone progress widget

milestone_progress Flutter package for IOS and Android to display progress through milestone progress widget. Screenshots ## Usage [Example]https://gi

Harpreet Singh 16 Aug 4, 2020
Wave progress - A custom wave progress widget

wave_progress_widget A customable wave progress widget Preview How to use Add this to your package's pubspec.yaml file: dependencies: wave_progress_

idan ben shimon 41 Jul 18, 2022
A simple button that gives you the possibility to transform into a circular one and shows a progress indicator

Progress Button A simple button that gives you the possibility to transform into

Daniel B Schneider 0 Dec 22, 2021
An awesome flutter app which artistically animates light and dark mode 😍

Light Dark Toggle Made with ?? in India This flutter app is based on the design made by Matthieu Souteyrand on Dribble.He describes the design as: Bac

Shubham Soni 221 Nov 9, 2022
An extension to the bloc state management library which automatically persists and restores bloc states.

⚠️ Attention: This repository has been moved to https://github.com/felangel/bloc and is now read-only! An extension to the bloc state management libra

Felix Angelov 189 Nov 17, 2022
A flutter widget that animates scrolling through a set of fixed size containers.

Spinner This flutter package implements a simple Spinner animation that cycles through any number of fixed size child widgets. Useful for selecting a

Mark Schmidt 6 Aug 3, 2021
Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

cemreonur 3 Apr 22, 2022
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Bryan Cancel 30 Dec 4, 2021
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

BetterX.io 3 Jan 28, 2022
App HTTP Client is a wrapper around the HTTP library Dio to make network requests and error handling simpler, more predictable, and less verbose.

App HTTP Client App HTTP Client is a wrapper around the HTTP library Dio to make network requests and error handling simpler, more predictable, and le

Joanna May 44 Nov 1, 2022
20+ Error State For Android and iOS - Flutter

20+ Error State For Android and iOS - Flutter Watch it on YouTube We design 21 error pages for your app it runs both Android and iOS because it builds

Abu Anwar 544 Jan 6, 2023
🧾 Flutter widget allowing easy cache-based data display in a ListView featuring pull-to-refresh and error banners.

Often, apps just display data fetched from some server. This package introduces the concept of fetchable streams. They are just like normal Streams, b

Marcel Garus 17 Jan 18, 2022
Flutter error catching & handling plugin. Handles and reports exceptions in your app!

Catcher Catcher is Flutter plugin which automatically catches error/exceptions and handle them. Catcher offers multiple way to handle errors. Catcher

Jakub 697 Jan 7, 2023
A package help you to make api call and handle error faster, also you can check for internet before call api.

http_solver ##not for production use, only for learning purpose. A package help you to make api call and handle error faster, also you can check for i

Abdelrahman Saed 1 Jun 18, 2020
GetX Architecture for large scale project, This project include - pagination, pull to refresh, localization, network call and advance error handling

GetX Architecture for large scale project, This project include - pagination, pull to refresh, localization, network call and advance error handling

Wai Han Ko 5 Nov 29, 2022
Response Parser makes it easier to parse data and error response from server.

Response Parser makes it easier to parse data and error response from server. Getting started Do you want to write this pretty functions... Future<Eit

Qyre AB 4 Nov 5, 2022
🌈 Repository for a compass project, basically an App for displaying bank transfers, with API requests, Flag persistence, Infinite Scroll, Error Handling, Unit Tests, Extract Sharing working with SOLID, BLoC and Designer Patterns.

?? Green Bank Aplicação desenvolvida em Flutter com intuito de trabalhar conexão com API, Gerenciamento de estado usando BLoC, Refatoração, Arquitetur

André Guerra Santos 28 Oct 7, 2022