Customizable Material and Cupertino buttons with progress indicators and more

Overview

future_button

Coverage Status Build status Pub version

Customizable Material and Cupertino buttons with progress indicators and more.

Useful if you want to run some background tasks when user presses on the button, and then show the result of the task.

Demonstration

How to use it

Usage is extremely simple - right now 5 types of buttons are supported:

  • CupertinoButton (normal + filled)
  • FlatButton (normal + icon)
  • IconButton
  • OutlineButton (normal + icon)
  • RaisedButton (normal + icon)

To convert a button to a FutureButton, just add a Future prefix and make sure that your onPressed callback is of type Future Function() , instead of usual void Function().

Everything that the package does can be customized. Below is the list of all parameters:

/// The widget that's used as the progress indicator.
/// You can substitute it with your own progress indicator if necessary.
/// See [defaultMaterialProgressIndicatorBuilder] and[defaultCupertinoProgressIndicatorBuilder] for more info.
final WidgetBuilder progressIndicatorBuilder;

/// The location of progress indicator.
/// See [ProgressIndicatorLocation] for more info.
final ProgressIndicatorLocation progressIndicatorLocation;

/// Whether to show the result of the Future.
/// Will show [successIndicatorBuilder] if Future completes without errors.
/// Otherwise, will show [failureIndicatorBuilder].
final bool showResult;

/// Whether to animate the transitions using [AnimatedSwitcher].
/// Defaults to [true].
final bool animateTransitions;

/// Indicator to show when the Future is completed successfully.
/// Defaults to [defaultSuccessResultIndicatorBuilder].
final WidgetBuilder successIndicatorBuilder;

/// Indicator to show when the Future fails.
/// Defaults to [defaultFailureResultIndicatorBuilder].
final WidgetBuilder failureIndicatorBuilder;

/// For how long should the result be shown for.
/// Default to `Duration(seconds: 2)`.
final Duration resultIndicatorDuration;

/// Curve that's used to animate the button size.
/// Defaults to [Curves.easeInOut].
final Curve animationCurve;

/// Duration that's used to animate the button size.
/// Defaults to `Duration(milliseconds: 150)`.
final Duration animationDuration;

Example

FutureRaisedButton.icon(
  icon: Icon(Icons.star),
  label: Text('Star'),
  onPressed: () async {
    // Do some background task
    await Future.delayed(Duration(seconds: 5));
  },
);

See example project for more details.

Getting Started

Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  future_button: ^0.1.1

Install it

You can install packages from the command line:

$ flutter pub get

Import it

Now in your Dart code, you can use:

import 'package:future_button/future_button.dart';

Contact me

E-mail: [email protected]

You might also like...

Fancy design of radio buttons in Flutter (package).

Fancy design of radio buttons in Flutter (package).

A Flutter package for new radio button design. With Elegant Animation. Features Usage TODO: Include short and useful examples for package users. Add l

Nov 26, 2021

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

Dec 30, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

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

Apr 15, 2022

A Simple and easy to use flutter package for showing progress bar.

A Simple and easy to use flutter package for showing progress bar.

progress_dialog A Simple and easy to use flutter package for showing progress bar. #Usage Import the package import 'package:custom_progress_dialog/cu

May 23, 2022

Flutter progress dialog. Support both Android and iOS platform.

Flutter progress dialog. Support both Android and iOS platform.

Flutter Progress Dialog [pub packages] | Flutter progress dialog. Support both Android and iOS platform

Oct 9, 2022

Flutter progress button

Flutter progress button

flutter_progress_button flutter_progress_button is a free and open source (MIT license) Material Flutter Button that supports variety of buttons style

Dec 6, 2022

Square progress bar

Square progress bar

Square progress bar because why not 😎 Features Dynamic sizing Animated progress bar Gradient color progress bar Prgreess bar cap shape customization

Dec 2, 2022

A collapsible sidebar for Flutter apps implementing the Material Design.

A collapsible sidebar for Flutter apps implementing the Material Design.

collapsible_sidebar A collapsible sidebar for Flutter apps implementing the Material Design. Features Material Design Pre-built customizable tile widg

Nov 30, 2022

RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter.

RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter.

RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.

Jan 1, 2023
Comments
  • Animated result

    Animated result

    Now FutureButton can show the result of the Future.

    Added:

    • defaultSuccessResultIndicatorBuilder and defaultFailureResultIndicatorBuilder
    • successIndicatorBuilder and failureIndicatorBuilder in GenericFutureButtonWidget
    • Changes to GenericFutureButtonState
    • More tests
    opened by kekland 0
  • setState only when widget is mounted

    setState only when widget is mounted

    Usecase

    Use FutureIconButton in the list and remove each item quickly.

    Problem

    When the user removes an item quickly from the list some of the future buttons throw the following error.

    Null check operator used on a null value
    #0      State.setState (package:flutter/src/widgets/framework.dart:1287)
    #1      GenericFutureButtonState.onPressed (package:future_button/src/generic_future_button.dart:277)
    <asynchronous suspension>
    

    This happens because the item list no longer exists in the tree and the future button tries to set the state on it.

    Solution

    A simple solution is to check if the widget is mounted before setting the state.

    opened by burhanrashid52 0
  • type 'NoSuchMethodError' is not a subtype of type 'Exception' error on ios 14.4

    type 'NoSuchMethodError' is not a subtype of type 'Exception' error on ios 14.4

    When I use the FutureCupertinoButton it throws this error. I am on:

    Flutter 1.22.6 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9b2d32b605 (3 weeks ago) • 2021-01-22 14:36:39 -0800 Engine • revision 2f0af37152 Tools • Dart 2.10.5

    Using a simulator with iOS 14.4, error stack below:

    GenericFutureButtonState.onPressed (generic_future_button.dart:273)
    <asynchronous gap>
    GenericFutureButtonState.onPressed (generic_future_button.dart:1)
    GestureRecognizer.invokeCallback (recognizer.dart:183)
    TapGestureRecognizer.handleTapUp (tap.dart:598)
    BaseTapGestureRecognizer._checkUp (tap.dart:287)
    BaseTapGestureRecognizer.handlePrimaryPointer (tap.dart:222)
    PrimaryPointerGestureRecognizer.handleEvent (recognizer.dart:476)
    PrimaryPointerGestureRecognizer.handleEvent (recognizer.dart:1)
    PointerRouter._dispatch (pointer_router.dart:77)
    PointerRouter._dispatchEventToRoutes.<anonymous closure> (pointer_router.dart:122)
    _LinkedHashMapMixin.forEach (compact_hash.dart:377)
    PointerRouter._dispatchEventToRoutes (pointer_router.dart:120)
    PointerRouter.route (pointer_router.dart:106)
    GestureBinding.handleEvent (binding.dart:358)
    GestureBinding.dispatchEvent (binding.dart:338)
    RendererBinding.dispatchEvent (binding.dart:267)
    GestureBinding._handlePointerEvent (binding.dart:295)
    GestureBinding._flushPointerEventQueue (binding.dart:240)
    GestureBinding._handlePointerDataPacket (binding.dart:213)
    GestureBinding._handlePointerDataPacket (binding.dart:1)
    _rootRunUnary (zone.dart:1206)
    _rootRunUnary (zone.dart:1)
    _CustomZone.runUnary (zone.dart:1100)
    _CustomZone.runUnaryGuarded (zone.dart:1005)
    _invoke1 (hooks.dart:265)
    _dispatchPointerDataPacket (hooks.dart:174)
    
    opened by mattg1995 1
  • Update for Flutter 1.22.0 (New Button universe)

    Update for Flutter 1.22.0 (New Button universe)

    Flutter v1.22.0 brought some new Material buttons:

    • TextButton, replacing FlatButton
    • ContainedButton, replacing RaisedButton
    • OutlinedButton, replacing OutlineButton

    An update is necessary to support those new buttons and new themes for them.

    good first issue 
    opened by kekland 4
Releases(v0.1.2)
Owner
Erzhan
18 y.o. CS and Economics undergrad student, full-stack developer.
Erzhan
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter widget to create a group of buttons fast ?? Included Radio and CheckBox buttons models with custom groping types ?? Show some ❤️ and star the

Stanislav Ilin 162 Dec 26, 2022
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

null 3 Jan 28, 2022
Love the material AppBar? Do you want to add more color to the appbar? Here's a gradientAppBar.

Gradient App Bar Love the material AppBar? Do you want to add more color to the appbar? Here's a gradientAppBar. It works just like the normal AppBar.

Joost Lekkerkerker 131 Nov 11, 2022
Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Hugo Delaunay 196 Dec 2, 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
Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

custom_radio_grouped_button Custom Radio Buttons and Grouped Check Box Button Custom Flutter widgets that makes Checkbox and Radio Buttons much cleane

Ketan Choyal 144 Sep 23, 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
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vũ Phương 2 Jul 4, 2022
A widget for swiping through a deck of cards with gestures or buttons.

swiping_card_deck A widget for swiping through a deck of cards with gestures or buttons. This package was inspired when I was trying to develop a Tind

Justin Hutchins 8 Oct 17, 2022