Top 10 Flutter Button Widgets with Example codes

The Flutter Buttons are more frequently and conveniently used widget yet very useful components used in any application. It is used to navigate to other pages or to use as a call-to-action button. It is widely used in all social, e-commerce, and other applications.

Buttons are like building blocks for any application, without them the application will not be completed and it has its existence in any app. We can use Flutter built-in buttons and it has many types for any user to use as there wish.

Buttons can be seen throughout any application and it has a specific task to do and that task is a call-to-action task where-in, whenever a button is pressed or triggered it will navigate or do some of the other actions on the application to mark the existence of its use and to proceed to the next page.

Now we will see the top flutter buttons that can be used in any application with much more ease and to have a better user experience.

1. getwidget: ^2.0.4

Short Intro: GetWidget is an open-source library that comes with pre-build 1000+ UI components. It makes development faster & more enjoyable. You can customize the component as per your need.

The Buttons in the GetWidget library can be sub-divided into other types just like the below list and it has many customization properties which can be viewed by clicking the below respective links.

1. Elevated Button
https://docs.getwidget.dev/gf-button/standard-button/

2. Pills Button
https://docs.getwidget.dev/gf-button/pills-button/

3. Square Button
https://docs.getwidget.dev/gf-button/square-button/

4. Icon Button
https://docs.getwidget.dev/gf-button/icon-button/

5. Social Button
https://docs.getwidget.dev/gf-button/social-button/

The Simplest example to use the solid elevated button using the GetWidget library is as follows:

GFButton(
    onPressed: (){},
    text:"primary"
),

Check out the installation or implementation guide of GetWidget Library on the pub.dev:

https://pub.dev/packages/getwidget

Check out the full documentation of GetWidget Buttons here:

https://docs.getwidget.dev/gf-button/

Check out the Blog details of GetWidget Buttons here:

https://www.getwidget.dev/blog/flutter-button-widget-component/

Contribute and/or raise a ticket to GetWidget on GitHub:

https://github.com/ionicfirebaseapp/getwidget

2. rounded_loading_button: ^2.0.9

Short Intro: A simple implementation of an animated loading button widget for Flutter.

A simple code of how a rounded loading button can be used is shown below:

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,
)

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/rounded_loading_button

Contribute and/or raise a ticket to the rounded loading button on GitHub:

https://github.com/chrisedg87/flutter_rounded_loading_button

3. group_button: ^4.2.1

Short Intro: Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

A simple code of how a group button can be used is shown below:

GroupButton(
    isRadio: false,
    spacing: 10,
    onSelected: (index, isSelected) => print('$index button is        selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/group_button

Contribute and/or raise a ticket to group button on GitHub:

https://github.com/Frezyx/group_button

4. flutter_animated_button: ^2.0.0

Short Intro: A flutter package project which contains a collection of cool and beautiful button animations.

A simple code of how a flutter animated button can be used is shown below:

AnimatedButton(
              onPress: () {},
              height: 70,
              width: 200,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              transitionType: TransitionType.LEFT_TOP_ROUNDER,
              textStyle: submitTextStyle,
              backgroundColor: Colors.black,
              selectedBackgroundColor: Colors.lightGreen,
              borderColor: Colors.white,
            ),

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/flutter_animated_button

Contribute and/or raise a ticket to flutter animated button on GitHub:

https://github.com/NikhilVadoliya/FlutterAnimatedButton

5. flutter_signin_button: ^2.0.0

Short Intro: A Flutter plugin for iOS and Android for generating signin buttons for different social media account.

A simple code of how a flutter signin button can be used is shown below:

SignInButton(
   Buttons.Google,
   onPressed: () {
      _showButtonPressDialog(context, 'Google');
    },
 ),

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/flutter_signin_button

Contribute and/or raise a ticket to flutter signin button on GitHub:

https://github.com/ZaynJarvis/Flutter-Sign-in-Button

6. flutter_login: ^3.1.0

Short Intro: Flutter Login is a ready-made login/signup widget with many animation effects to demonstrate the capabilities of Flutter.

A simple code of how a flutter login button can be used is shown below:

FlutterLogin(
      title: 'ECORP',
      logo: AssetImage('your asset image'),
      onLogin: _authUser,
      onSignup: _signupUser,
      onSubmitAnimationCompleted: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => DashboardScreen(),
        ));
      },
      onRecoverPassword: _recoverPassword,
    );

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/flutter_login

Contribute and/or raise a ticket to the flutter login button on GitHub:

https://github.com/NearHuscarl/flutter_login

7. sign_button: ^2.0.2

Short Intro: A Flutter plugin for generating sign in buttons for different social media accounts.

A simple code of how a sign button can be used is shown below:

SignInButton(
  buttonType: ButtonType.apple,
  onPressed: () {
    setState(() {
    _buttonClick = "apple";
   });
   }),

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/sign_button

Contribute and/or raise a ticket to sign button on GitHub:

https://github.com/emreesen27/Flutter-Sign-in-Button

8. auth_buttons: ^2.0.4

Short Intro: Auth Buttons is a flutter widget library, include buttons for authenticating with the most popular social networks like Google, Facebook, Apple, and others.

A simple code of how an auth button can be used is shown below:

FacebookAuthButton(
   onPressed: () {},
   darkMode: darkMode,
   isLoading: isLoading,
   style: AuthButtonStyle(
          buttonType: buttonType,
          iconType: iconType,
          ),
 ),

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/auth_buttons

Contribute and/or raise a ticket to auth buttons on GitHub:

https://github.com/elbeicktalat/flutter_auth_buttons

9. progress_state_button: ^1.0.4

Short Intro: A customizable progress button for Flutter.

A simple code of how a progress button can be used is shown below:

ProgressButton.icon(iconedButtons: {
      ButtonState.idle:
        IconedButton(
            text: "Send",
            icon: Icon(Icons.send,color: Colors.white),
            color: Colors.deepPurple.shade500),
      ButtonState.loading:
        IconedButton(
            text: "Loading",
            color: Colors.deepPurple.shade700),
      ButtonState.fail:
        IconedButton(
            text: "Failed",
            icon: Icon(Icons.cancel,color: Colors.white),
            color: Colors.red.shade300),
      ButtonState.success:
        IconedButton(
            text: "Success",
            icon: Icon(Icons.check_circle,color: Colors.white,),
            color: Colors.green.shade400)
    }, 
    onPressed: onPressed,
    state: ButtonState.idle);

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/progress_state_button

Contribute and/or raise a ticket to progress buttons on GitHub:

https://github.com/slm/progress-state-button

10. flutter_reaction_button: ^2.0.0+1

Short Intro: Flutter button reaction it is fully customizable widget such as the Facebook reaction button.

A simple code of how a flutter reaction button can be used is shown below:

ReactionButton<String>(
                  onReactionChanged: (String? value) {
                    ScaffoldMessenger.of(ctx).showSnackBar(
                      SnackBar(
                        content: Text('Selected value: $value'),
                      ),
                    );
                  },
                  reactions: Example.flagsReactions,
                  initialReaction: Reaction<String>(
                    value: null,
                    icon: Icon(
                      Icons.language,
                    ),
                  ),
                  boxColor: Colors.black.withOpacity(0.5),
                  boxRadius: 10,
                  boxDuration: Duration(milliseconds: 500),
                 itemScaleDuration:Duration(milliseconds:200s)
);

Check out the installation or implementation guide on the pub.dev:

https://pub.dev/packages/flutter_reaction_button

Contribute and/or raise a ticket to flutter reaction buttons on GitHub:

https://github.com/GeekAbdelouahed/flutter-reaction-button

We hope this list will help you out. If you have any suggestions for this list then let us know in the comment section and we will add them to this list.