auth_buttons 3.0.0 icon indicating copy to clipboard operation
auth_buttons: ^3.0.0 copied to clipboard

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

auth_buttons #

Github stars Pub Version

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

Installation #

  1. Add this to your packages pubspec.yaml file:
dependencies:
  auth_buttons: <^last>
  1. Install it You can install it from the command line:
$ flutter pub get
  1. Import it Now in Dart code, you can use:
import 'package:auth_buttons/auth_buttons.dart';

Recommendation #

We recommend you to using show special when you want use some button. show help you importing part of library.

import 'package:auth_buttons/auth_buttons.dart'
    show GoogleAuthButton, AuthButtonStyle, AuthButtonType, AuthIconType;

We also recommend you to using the latest version.

Overview #

From the version 3.0.0 all AuthButtons are following the system mode. see ThemeMode for more info.

From the version 3.0.0 you're able to regroup AuthButtons for sharing style properties, to do this use the already existing AuthButtonGroup.

From the version 2.0.0 disabled state is supported.

  1. Enabled
  2. Disabled

There are three Types you can choose between them:

  1. Default
  2. Icon
  3. Secondary

Suggestion #

If you plain to use a non existing AuthButton like: Linkedin or any others along with the existing one, than make your custom one just use CustomAuthButton this provide you with a fast way to do so.

Using #

Enabled State. #

You need to use just the following code:

Default Type #

GoogleAuthButton(
  onPressed: () {},
),
LightDark
default-button-default-icondark-default-button-default-icon
GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    iconType: AuthIconType.outlined,
  ),
),
LightDark
default-button-outlined-icondark-default-button-outlined-icon
GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    iconType: AuthIconType.secondary,
  ),
),
LightDark
default-button-secondary-icondark-default-button-secondary-icon

Icon Type #

GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.icon,
  ),
),
LightDark
icon-button-default-icondark-icon-button-default-icon
GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.icon,
    iconType: AuthIconType.outlined,
  ),
),
LightDark
icon-button-outlined-icondark-icon-button-outlined-icon
GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.icon,
    iconType: AuthIconType.secondary,
  ),
),
LightDark
icon-button-secondary-icondark-icon-button-secondary-icon

Secondary Type #

GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.secondary,
  ),
),
LightDark
secondary-button-default-icondark-secondary-button-default-icon
GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.secondary,
    iconType: AuthIconType.outlined,
  ),
),
LightDark
secondary-button-outlined-icondark-secondary-button-outlined-icon
GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.secondary,
    iconType: AuthIconType.secondary,
  ),
),
LightDark
secondary-button-secondary-icondark-secondary-button-secondary-icon

Disabled State #

LightDark
disabled-buttonsdark-disabled-buttons

Do same think with the other buttons, when you want to customize any button you can do it just passing a property which you want.

Grouped buttons #

Example

auth button group usecase
AuthButtonGroup(
  style: const AuthButtonStyle(
    width: 180,
    height: 50,
    borderColor: Colors.purple,
    borderWidth: 3.0,
    margin: EdgeInsets.only(bottom: 8.0),
  ),
  buttons: [
    GoogleAuthButton(),
    AppleAuthButton(),
    //....
  ]
),
SecondaryIcon
auth button group secondary buttonsauth-button-group-icon-buttons

Full property you can pass:

GoogleAuthButton(
  key: const ValueKey<String>(''),
  onPressed: () {},
  onLongPress: () {},
  onHover: (bool value) {},
  onFocusChange: (bool value) {},
  focusNode: FocusNode(),
  autofocus: false,
  text: 'Sign in with Google',
  isLoading: false,
  themeMode: ThemeMode.system,
  textDirection: TextDirection.ltr,
  materialStyle: ButtonStyle(),
  style: AuthButtonStyle(
    buttonColor: Colors.blue,
    splashColor: Colors.red,
    elevation: 2.0,
    borderRadius: 99.0,
    textStyle: TextStyle(),
    padding: const EdgeInsets.all(8.0),
    margin: const EdgeInsets.all(8.0),
    borderColor: Colors.amber,
    borderWidth: 3.0,
    buttonType: AuthButtonType.secondary,
    width: 300.0,
    height: 50.0,
    iconSize: 40.0,
    separator: 20.0,
    iconBackground: Colors.white,
    iconType: AuthIconType.outlined,
    shadowColor: Colors.pink,
    progressIndicatorColor: Colors.blue,
    progressIndicatorValueColor: Colors.grey[300],
    progressIndicatorStrokeWidth: 2.0,
    progressIndicatorValue: 1.0,
    iconColor: Colors.purple,
    progressIndicatorType: AuthIndicatorType.circular,
    visualDensity: VisualDensity.standard,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),

return up

138
likes
140
pub points
95%
popularity

Publisher

unverified uploader

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

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

flutter, flutter_svg, google_fonts

More

Packages that depend on auth_buttons