A flutter package that provides multiple states for a button with endless customizability.

Overview

multi_state_button

Pub support support

A package which provides multiple states for a button with endless customizability.

Sample

Getting Started

Add dependency

dependencies:
  multi_state_button: ^1.1.3

Super simple to use

import 'package:multi_state_button/multi_state_button.dart';
class MyApp extends StatelessWidget {
    static const String _submit = "Submit";
    static const String _loading = "Loading";
    static const String _success = "Success";
    final MultiStateButtonController multiStateButtonController =  MultiStateButtonController(initialStateName: _submit);
    @override
    Widget build(BuildContext context) {
        return MultiStateButton(
            multiStateButtonController: multiStateButtonController,
            buttonStates:[
                ButtonState(
                  stateName: _submit,
                  child: Text(
                    _submit,
                  ),
                  textStyle: TextStyle(color: Colors.white, fontSize: 20),
                  size: Size(160, 48),
                  color: Colors.blue,
                  onPressed:() => multiStateButtonController.setButtonState = _loading,
                  ),
                  ButtonState(
                  stateName: _loading,
                  alignment: Alignment.center,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: CircularProgressIndicator(
                        strokeWidth: 3,
                        color: Colors.white,
                    ),
                  ),
                  decoration: BoxDecoration(
                    color: Colors.teal,
                    borderRadius: BorderRadius.all(Radius.circular(48)),
                  ),
                  size: Size(48, 48),
                  onPressed: () => multiStateButtonController.setButtonState = _success,
                  ),
                  ButtonState(
                  stateName: _success,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        _success,
                      ),
                      const SizedBox(
                        width: 16,
                      ),
                      Icon(
                        Icons.check,
                        color: Colors.white,
                      )
                    ],
                  ),
                  textStyle: TextStyle(color: Colors.white, fontSize: 22),
                  color: Colors.green,
                  size: Size(200, 48),
                  onPressed: ()=> multiStateButtonController.setButtonState = _submit,
                  ),
            ],
        );
    }
}

Properties to configure

MultiStateButton properties

class MultiStateButton extends StatefulWidget {
  /// List of button states.
  /// Note: Default initial State is the first button state.
  /// Can override this behaviour with [initialStateName] constructor parameter of [MultiStateButtonController].
  final List<ButtonState> buttonStates;

  /// Used to change the current state of the button
  final MultiStateButtonController multiStateButtonController;

  /// Transition duration between button state transition.
  /// Defaults to 500 milliseconds
  final Duration transitionDuration;

  /// Transition curve between button state transition.
  /// Defaults to [Curves.easeIn]
  final Curve transitionCurve;
}

SingleStateButton properties

class SingleStateButton extends StatelessWidget {
  /// State for single state button
  final ButtonState buttonState;
}

ButtonState Properties

class ButtonState {
  /// This is the name used to identify the state of the button.
  /// This name is used to change the state using [MultiStateButtonController]
  final String stateName;
  final Widget child;
  final VoidCallback? onPressed;

  /// Size of the button
  final Size? size;

  /// Color of the button.
  /// This should be null if boxDecoration is not null.
  final Color color;

  /// Decorate the button with color, border radius, box shadow, gradient etc...
  final BoxDecoration? decoration;

  /// Used to align the child.
  /// Defaults to [Alignment.center]
  final AlignmentGeometry alignment;

  /// If descendant of the button is a Text child, this textStle is used to enable transition animtation between two states.
  final TextStyle? textStyle;

  /// The transformation matrix to apply before painting the button.
  final Matrix4? transform;

  /// The clip behavior when [decoration] is not null.
  final Clip clipBehavior;

  /// The decoration to paint in front of the child.
  final Decoration? foregroundDecoration;

  /// SubRoutine to run on transition animation ends.
  final VoidCallback? onAnimationEnd;

  /// The alignment of the child, relative to the size of the button, if [transform] is specified.
  /// When [transform] is null, the value of this property is ignored.
  final AlignmentGeometry? transformAlignment;
}

Example Project

support

Features and bugs

Please file feature requests and bugs at the issue tracker.

You might also like...

Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

flutter_instagram_stories A Flutter package for displaying stories just like Whatsapp & Instagram. Built-in groups (multiple stories with one icon), c

Dec 9, 2022

A 3D pushable button built in Flutter. Ideal for important CTAs in the app.

A 3D pushable button built in Flutter. Ideal for important CTAs in the app.

Pushable Button A 3D pushable button built in Flutter. Ideal for important CTAs in the app. Usage PushableButton( child: Text('ENROLL NOW', style: s

May 14, 2022

counter button flutter plugin

counter_button Counter Button is a flutter library that allows you to create a button with animation effects when you increase or decrease the counter

Dec 20, 2021

A sign in button helper library for Flutter

A sign in button helper library for Flutter

A Flutter plugin for iOS and Android for generating signin buttons for different social media account. Feedback and Pull Requests are most welcome! In

Dec 29, 2022

How to Create Bouncing Button in Flutter

How to Create Bouncing Button in Flutter

Bouncing Button 📱 Screenshots Download the Following App for Preview 🖥 Flutter Tutorial All Flutter Tutorials plus additional Code and shorter posts

Mar 15, 2022

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Sep 27, 2022

A Flutter app that shows a random Steve Jobs quote on every button click

A Flutter app that shows a random Steve Jobs quote on every button click

Inspire App An app I made while learning Flutter that shows a random Steve Jobs quote on every button click. Used technologies Dart Screenshots Contri

Dec 2, 2021

A Custom 3D Button in Flutter

A Custom 3D Button in Flutter

Clicky Button for flutter A Custom 3D Button in Flutter Demo How To Use it import 'clicky_button/clicky_button.dart' ... ClickyButton( child: Tex

Sep 2, 2022

A radio button widget for flutter that supports custom builders and a variable number of animations.

A radio button widget for flutter that supports custom builders and a variable number of animations.

custom_radio An animatable radio button that can be customized to the max. I found it strange that flutter only provides two radio widgets: Radio and

Dec 28, 2022
Releases(v1.1.1)
Owner
null
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 package that provides a dropdown form field using a dropdown button inside a form field.

Dropdown form field A dropdown form field using a dropdown button inside a form field. Demo Features Can be used as regular form field. Simple to impl

Carlos Eugenio Torres 72 Jan 1, 2023
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
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Ashok Kumar Verma 0 Nov 30, 2021
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
A Flutter package with an advanced dropdown Button which let you give different design on DropdownButton

Use decorated_dropdown button to add DropdownButton with decoration properties l

Hari Prasad Chaudhary 1 Dec 17, 2021
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
A Flutter package to create a nice circular menu using a Floating Action Button.

FAB Circular Menu A Flutter package to create a nice circular menu using a Floating Action Button. Inspired by Mayur Kshirsagar's great FAB Microinter

Mariano Cordoba 198 Jan 5, 2023
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

floating_bottom_bar This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and

MindInventory 11 Oct 10, 2022
Lite version of smart_select package, zero dependencies, an easy way to provide a single or multiple choice chips.

Lite version of smart_select package, zero dependencies, an easy way to provide a single or multiple choice chips. What's New in Version 2.x.x Added p

Irfan Vigma Taufik 97 Dec 15, 2022