RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and error animations.

Overview

rounded_loading_button

pub package build codecov style: effective dart License: MIT Awesome Flutter

RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and error animations.

Installation

Add this to your pubspec.yaml:

dependencies:
    rounded_loading_button: ^2.0.8

Usage

Import

import 'package:rounded_loading_button/rounded_loading_button.dart';

Simple Implementation

final RoundedLoadingButtonController _btnController = RoundedLoadingButtonController();

void _doSomething() async {
    Timer(Duration(seconds: 3), () {
        _btnController.success();
    });
}

RoundedLoadingButton(
    child: Text('Tap me!', style: TextStyle(color: Colors.white)),
    controller: _btnController,
    onPressed: _doSomething,
)

The Rounded Loading Button has many configurable properties, including:

  • duration - The duration of the button animation
  • loaderSize - The size of the CircularProgressIndicator
  • animateOnTap - Whether to trigger the loading animation on the tap event
  • resetAfterDuration - Reset the animation after specified duration, defaults to 15 seconds
  • errorColor - The color of the button when it is in the error state
  • successColor - The color of the button when it is in the success state
  • successIcon - The icon for the success state
  • failedIcon - The icon for the failed state

Contributions

All contributions are welcome!

Comments
  • Incompatible versions...

    Incompatible versions...

    Max version that woks is the 1.0.4, but the recents do not.

    sdk: ">=2.7.0 <3.0.0"
    .....
     rxdart:
        dependency: transitive
        description:
          name: rxdart
          url: "https://pub.dartlang.org"
        source: hosted
        version: "0.23.1"
    

    The error Message :

    Because no versions of select_dialog match >1.1.0 <2.0.0 and select_dialog 1.1.0 depends on rxdart ^0.23.1, select_dialog ^1.1.0 requires rxdart ^0.23.1.
    And because rounded_loading_button >=1.0.5 depends on rxdart ^0.24.0, select_dialog ^1.1.0 is incompatible with rounded_loading_button >=1.0.5.
    So, because my_civi_flutter_app depends on both select_dialog ^1.1.0 and rounded_loading_button ^1.0.5, version solving failed.
    pub get failed (1; So, because my_civi_flutter_app depends on both select_dialog ^1.1.0 and rounded_loading_button ^1.0.5, version solving failed.)
    
    bug 
    opened by tajaouart 4
  • NullSafety, ElevatedButton

    NullSafety, ElevatedButton

    • Added compatibility with NullSafety
    • Removed RaisedButton deprecated
    • Add new ElevatedButton
    • Update dependencies
    • Added Pedantic recommendations, analyzer settings and best practices used internally at Google.
    opened by joaovvrodrigues 3
  • Change CircleProgressIndicator size

    Change CircleProgressIndicator size

    Hi! very good package!

    Could you add an option to resize CircleProgressIndicator?

    I think with SizedBox and Center it is possible to modify the size: SizedBox( height: progressHeight, width: progressWidth, child: Center( child: CircularProgressIndicator() ), )

    enhancement good first issue 
    opened by federicodesia 3
  • Fixed late initialisation and bad state bugs

    Fixed late initialisation and bad state bugs

    • Fixed issues related to late initialisation in the controller (#47)
    • Added safety against bad state errors (#48)
    • Resolved a bunch of lints and code style issues

    (cc @tamoyal)

    opened by alexobviously 2
  • How to separate animation of these buttons in any page widget.

    How to separate animation of these buttons in any page widget.

    I have the current_widget variable to switch pages A and B by setState, and I used the rounded_loading_button on these pages. When I press the rounded_button in the A page and I switch to the B page, the rounded_button on the B page is animating like page A. How to separate animation of these buttons.


    You can duplicate this issue by:

    import 'dart:async'; import 'package:flutter/material.dart'; import 'package:rounded_loading_button/rounded_loading_button.dart';

    class test extends StatefulWidget { const test({Key? key}) : super(key: key);

    @override _testState createState() => _testState(); }

    class _testState extends State { Widget currentSection = SizedBox();

    bool current = true;

    @override void initState() { setState(() { currentSection = pageA(); }); super.initState(); }

    void doSomething(RoundedLoadingButtonController btnController) async { Timer( Duration(milliseconds: 500), () { btnController.success(); }, ); Timer( Duration(seconds: 2), () { btnController.reset(); }, ); }

    @override Widget build(BuildContext context) { return Column( children: [ IconButton( onPressed: () { setState(() { if (current) { currentSection = pageB(); current = !current; } else { currentSection = pageA(); current = !current; } }); }, icon: Icon(Icons.swipe), ), currentSection, ], ); }

    Widget pageA() { final RoundedLoadingButtonController btnControllerA = new RoundedLoadingButtonController();

    return Column(
      children: [
        Text("Page A"),
        RoundedLoadingButton(
          controller: btnControllerA,
          onPressed: () => doSomething(btnControllerA),
          child: Text('BTN A'),
        ),
      ],
    );
    

    }

    Widget pageB() { final RoundedLoadingButtonController btnControllerB = new RoundedLoadingButtonController();

    return Column(
      children: [
        Text("Page B"),
        RoundedLoadingButton(
          controller: btnControllerB,
          onPressed: () => doSomething(btnControllerB),
          child: Text('BTN B'),
        ),
      ],
    );
    

    } }


    Or simple code like

    import 'dart:async'; import 'package:flutter/material.dart'; import 'package:rounded_loading_button/rounded_loading_button.dart';

    class Test extends StatefulWidget { const Test({Key? key}) : super(key: key);

    @override _testState createState() => _testState(); }

    class _testState extends State { bool current = true;

    void doSomething(RoundedLoadingButtonController btnController) async { Timer( Duration(milliseconds: 500), () { btnController.success(); }, ); Timer( Duration(seconds: 2), () { btnController.reset(); }, ); }

    @override Widget build(BuildContext context) { return Column( children: [ IconButton( onPressed: () { setState(() { if (current) { current = !current; } else { current = !current; } }); }, icon: Icon(Icons.swipe), ), current ? pageA() : pageB(), ], ); }

    Widget pageA() { final RoundedLoadingButtonController btnControllerA = new RoundedLoadingButtonController();

    return Column(
      children: [
        Text("Page A"),
        RoundedLoadingButton(
          controller: btnControllerA,
          onPressed: () => doSomething(btnControllerA),
          child: Text('BTN A'),
        ),
      ],
    );
    

    }

    Widget pageB() { final RoundedLoadingButtonController btnControllerB = new RoundedLoadingButtonController();

    return Column(
      children: [
        Text("Page B"),
        RoundedLoadingButton(
          controller: btnControllerB,
          onPressed: () => doSomething(btnControllerB),
          child: Text('BTN B'),
        ),
      ],
    );
    

    } }

    bug 
    opened by SittiphanSittisak 2
  • Change the color of circular progress

    Change the color of circular progress

    Hi Do you know how I can change the color of circular progress? Because one of the buttons in my app is white and I want the color of the circular progress to be blue.

    enhancement 
    opened by VanessaSwerts 2
  • Disable Button

    Disable Button

    Hi I want to disable button if my form is invalid. normally I set (OnPressed : null) and it works for all buttons but it does not work with this button. is there any trick to do that ?

    bug 
    opened by alfavat 2
  • Initialize RoundedLoadingButtonController listeners in build() not in initState()

    Initialize RoundedLoadingButtonController listeners in build() not in initState()

    This will solve the problem in issue #14.

    The problem happens every time the widget that holds the controller changes (so the controller itself changes). The problem occurs because some fields in the controller gets initialized only one time in the initState of the RoundedLoadingButton, so when the controller changes but the state doesn't change, the fields don't get initialized.

    opened by hagar-yasser 1
  • disable button from controller

    disable button from controller

    is there a way to disable programmatically? the scenario is that I have multiple buttons on the same page and I want to prevent the user to click on all of them, during the first click I would like to disable all remaining controllers

    thanks

    opened by Miamoto-Musashi 1
  • Question

    Question

    **- Does the control close automatically when I go to another page because I did not find "Function Disposed"!?

    • Is there a risk of occurrence Memory Leak ?**
    opened by ammarmahafeza2 1
  • NoSuchMethodError

    NoSuchMethodError

    when field validation fails the reset function raises an error

    my code:

      Future<void> submit() async {
        final allValid = await checkInput();
        if (allValid) {
          Logger.log(tag, message: 'going to submit');
    ...
          checkImageController.success();
        } else {
          checkImageController.reset();
        }
      }
    

    the error

    E/flutter (22565): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: NoSuchMethodError: The method 'call' was called on null.
    E/flutter (22565): Receiver: null
    E/flutter (22565): Tried calling: call()
    E/flutter (22565): #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
    E/flutter (22565): #1      RoundedLoadingButtonController.reset (package:rounded_loading_button/rounded_loading_button.dart:286:19)
    E/flutter (22565): #2      OrganizationSignedModel.submit (package:customer/ui/auth/organization_signed_model.dart:118:28)
    E/flutter (22565): <asynchronous suspension>
    

    this is how I init the controller

      final RoundedLoadingButtonController checkImageController = RoundedLoadingButtonController();
    

    thanks

    opened by Miamoto-Musashi 1
  • Calling a refactored RoundedLoadingButton exceptions with the parent code

    Calling a refactored RoundedLoadingButton exceptions with the parent code

    Hi

    I have wanted buttons of a uniform appearance which shall feature animation on presses. So I refactored (made a child from) the RoundedLoadingButton widget.

    It is when the child widget is featured within an app and all of the relevant imports are made, that Flutter begins to flag exceptions with the parent code.

    Could you advise me on how to achieve the desired result without the exceptions please? The refactored code is attached for your consideration.

    With thanks

    Mathems

    RoundAnimeButton.txt

    opened by mathems-m 0
  • Flutter Widget Test doesn't seem to work.

    Flutter Widget Test doesn't seem to work.

    I have two options when executing a tap:

    /* by type: */ await tester.tap(find.byType(RoundedLoadingButton), warnIfMissed: true);
    /* by key: */ await tester.tap(find.byKey(const Key("signInButton")), warnIfMissed: true);
    

    But neither of them works at all. I get errors when trying to verify a certain function from a mock instance which is expected to be executed when the button is tapped.

    This works with a regular TextButton by the way.

    opened by patteruel-dev 1
  • Extended button with success and failed icon size property

    Extended button with success and failed icon size property

    Extended the class with a success and failed icon size property. Icon sizes were always set to the default icon size (in most cases 24.0 px) which did look bad when rounded loading is very big (or very small). Fixed by providing an icon size which can be customized or set to the default value of 24.

    opened by uzzero 0
  • Be able to have a  outlinedbutton like style

    Be able to have a outlinedbutton like style

    I made changes for my needs, I propose them here : The goal was to be able to have a outlinedbutton like style (colored text and border, transparent background)

    • add border width & color gestion
    • add ability to customize only loader indicator color without touching other icons which are colored by ValueColor. like this, we can have a white error and success icon with a special error/success background and a loading indicator of a different defined color to manage white backgrounds
    opened by Mezmeraid 0
Releases(2.0.9)
Owner
Chris Edgington
Chris Edgington
Flutter Triple Status Button can use toggle button but in three statuses.

triple_status_button Triple Status Button. Flutter Triple Status Button can use toggle button but in three statuses. Property Description height heigh

MahdiBagjani 2 Nov 13, 2021
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button

Flutter Reaction Button Flutter button reaction it is fully customizable widget such as Facebook reaction button. Preview Demo Usage Include 'flutter_

Abdelouahed Medjoudja 174 Dec 19, 2022
A button that looks like a Cupertino text button

Cupertino Text Button A button that looks like a Cupertino text button! Text Button A simple text button can be created like this: CupertinoTextButton

Nick Sirovsky 0 Nov 24, 2022
This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

null 222 Nov 8, 2022
Global loading widget, which can be used through simple configuration.

load Global loading widget, which can be used through simple configuration. Pure flutter library, not use native code. It is similar to OKToast in use

Caijinglong 35 Nov 4, 2022
A popup simple topModalSheet menu button widget with handsome design and easy to use

top_modal_sheet A popup simple topModalSheet menu button widget with handsome design and easy to use. Installations Add top_modal_sheet: ^1.0.0 in you

Baldemar Alejandres 5 Jul 29, 2022
Flutter Custom, Text, 3D, Social media button's package

Flutter Button flutter_button, which is a flutter package, contains animated, cool and awesome buttons. That you may like, thanks to this package you

Ismael Shakverdiev 15 Dec 29, 2022
Simple flutter toggle button widge

This is simple flutter toggle button widget. Supports show text labels and icons, Possible set multiple value to toggle ui, not only

fukutan 1 Sep 27, 2022
AsyncButtonBuilder offers a simple way to extend any type of button with an asynchronous aspect

async_button_builder AsyncButtonBuilder offers a simple way to extend any type of button with an asynchronous aspect. It allows adding loading, disabl

Nollie 22 Jul 10, 2022
Create beautiful Loading and Timer buttons in Flutter

Argon Buttons (Timer and Loading) Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers

Yogesh 213 Dec 11, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
A Flutter package to show beautiful animated snackbars directly using overlay

Easily show beautiful snack bars directly using overlays. Create custom snack bars and show them with awesome animations.

Sajad Abdollahi 11 Dec 27, 2022
Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Animated Search Bar Animated Search Bar package lets you add a beautiful search bar to your Flutter app. Installation Add the latest version of packag

Mohammad Saleh 5 Aug 7, 2022
A basic flutter loading overlay

A basic loading overlay Features Creates a new scope where the user cannot leave until you programmatically pop it. Usage import 'package:flutter/mate

null 0 Nov 8, 2021
Flutter overlay loading dialog example

flutter_overlay_loading_dialog_example Demo

Javeed Ishaq 4 Mar 24, 2022
A Facebook & Twitter Like Card Loading Shimmer Skeleton Library.

PKSkeleton A Facebook & Twitter Like Card Loading Shimmer Skeleton Library. The source code is 100% Dart, and everything resides in the /lib folder. S

Pawan Kumar 283 Nov 26, 2022
A highly customizable toggle switch with a loading state.

A highly customizable toggle switch with a loading state.

null 6 Dec 30, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
Powerful Complete and Beautiful Search Component for Flutter

A highly customizable search component to accelerate your development. Overview There are many search or search components for Flutter, however this o

Tiagosito 31 Jul 27, 2022