https://github.com/chrisedg87/flutter_rounded_loading_button

A simple implementation of an animated loading button widget for Flutter
https://github.com/chrisedg87/flutter_rounded_loading_button

Last synced: 7 months ago
JSON representation

A simple implementation of an animated loading button widget for Flutter

• Host: GitHub
• URL: https://github.com/chrisedg87/flutter_rounded_loading_button
• Owner: chrisedg87
• License: mit
• Created: 2020-01-23T15:11:42.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-06-17T20:36:49.000Z (over 1 year ago)
• Last Synced: 2025-03-07T22:17:44.809Z (8 months ago)
• Language: Dart
• Size: 4.2 MB
• Stars: 350
• Watchers: 3
• Forks: 88
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-flutter-cn - Rounded Loading Button - 带有加载指示器的按钮，包括成功和错误动画，由[Chris Edgington](https://twitter.com/ChrisTheEdg)创建。 (组件 / UI)
• fucking-awesome-flutter - Rounded Loading Button - Button with a loading indicator, complete with success and error animations by 🌎 [Chris Edgington](twitter.com/ChrisTheEdg). (Components / UI)
• awesome-flutter-cn - Rounded Loading Button - 带 loading 指示器，并在完成后带有成功/失败动画的按钮控件，[Chris Edgington](https://twitter.com/ChrisTheEdg). (组件 / UI)
• awesome-flutter - Rounded Loading Button - Button with a loading indicator, complete with success and error animations by [Chris Edgington](https://twitter.com/ChrisTheEdg). (Components / UI)

README

          
# rounded_loading_button

[![pub package](https://img.shields.io/pub/v/rounded_loading_button.svg)](https://pub.dev/packages/rounded_loading_button) 

![build](https://github.com/chrisedg87/flutter_rounded_loading_button/workflows/build/badge.svg)

[![codecov](https://codecov.io/gh/chrisedg87/flutter_rounded_loading_button/branch/master/graph/badge.svg?token=3HQDMRP8N2)](https://codecov.io/gh/chrisedg87/flutter_rounded_loading_button)

[![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg)](https://pub.dev/packages/effective_dart)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg)](https://github.com/Solido/awesome-flutter)

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

![](screenshots/loading-button.gif)

## 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!