Flutter Social Button

Flutter Social Button

GFSocial Buttons are clickable buttons that are widely used in any social accounts to get the authentication process done like login, sign-in, etc.

The Default button shape is setGFButtonShape.standardso that we will be able to get the standard shaped button with solid background color with slightly rounded corners.

Flutter Social Buttons can have only icons or icons along with Text. We will see both of them in the below section with examples:

Flutter Solid Social Button With Text

GFSocial solid button has a full background color and text on it. By default, the button type is set to GFButtonType.solid so, we were able to get buttons that have a solid background color with slightly rounded corners.

The Below code gives the icon with the text button as the above image: The icon parameter can be any widget like default flutter icons or customized asset images or icons. Unless The icon parameter is not passed, we will get a default GF Flutter Buttons without the icon

  import 'package:getwidget/getwidget.dart';

  GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
  ),

Flutter Disabled Social Button with Text

If this callback and onPressed are null, then the button will be disabled. Default GFButton will be disabled as onPressed is set to null.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: null,
    text: "primary",
   icon: Icon(Icons.facebook),
 ),

Flutter Outline Social Button with Text

The Flutter Outline Button describes the Button with a transparent background and a visible border. This button can be easily found in GFButton by adding type as GFButtonType.outline.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
    type: GFButtonType.outline,
 ),

Flutter Outline2x Social Button with Text

The Flutter Outline Icon Button describes the Button with a transparent background and a visible border of 2x border width. This button can be easily found in GFButton by adding type as GFButtonType.outline2x.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
    type: GFButtonType.outline2x,
 ),

Flutter Transparent Social Button With Text

In GFButton by adding type,GFButtonType.transparent we can get a transparent button. Default GFButton type will be GFType.solid.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
    type: GFButtonType.transparent,
 ),

Flutter Circular/Rounded Social Button with Text

We will be able to get the circular or rounded shaped buttons with solid background color with rounded corners by adding property shape with GFButtonShape.pills .

 import 'package:getwidget/getwidget.dart';

  GFButton(
    onPressed: (){},
    text: "primary",
    icon: Icon(Icons.facebook),
    shape: GFButtonShape.pills,
  ),

Flutter Square Social Button with Text

We will be able to get a square-shaped button with solid background color with no rounded corners by adding property shape with GFButtonShape.square .

 import 'package:getwidget/getwidget.dart';

  GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
    shape: GFButtonShape.square,
  ),

Flutter Social Button Size Properties

The Flutter Social Button size can be varied using the size property, which specifies the size of the button. Default button size is set to GFSize.MEDIUM.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
    size: GFSize.SMALL,
 ),

Flutter Block Social Button

The Flutter Block button specifies how wide the button should be with some spacing on both the left and right sides. By setting blockButton state, true it will change the button to a full-width block. Default blockButton is set to false.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
   icon: Icon(Icons.facebook),
    type: GFButtonType.solid,
    blockButton: true,
 ),

Flutter Full Width Social Button

The Flutter Full-Width button specifies the button should be in full width of the screen. By setting a fullWidthButton state,true it will change the button to a Full-width button. Default fullWidthButton set to false.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    icon: Icon(Icons.facebook),
    type: GFButtonType.solid,
    fullWidthButton: true,
 ),

Flutter Social Icon Button

The Flutter Social Icon Button are buttons that have features of a standard, solid button with a full-color background and slightly rounded corners and only icons as a child.

The Default button shape is setGFButtonShape.standardso that we will be able to get a standard shaped button with solid background color with slightly rounded corners. By default, button type is set toGFType.solid.

The Below example takes icon as its primary parameter to display only icon button

import 'package:getwidget/getwidget.dart';

GFIconButton(
    onPressed: (){},
    icon: Icon(Icons.facebook),
 ),

How to change flutter button size?

The Flutter Button size can be varied using the size property, which specifies the size of the button. Default button size is set to GFSize.MEDIUM.

import 'package:getwidget/getwidget.dart';

GFIconButton(
    onPressed: (){},
    icon: Icon(Icons.facebook),
    size: GFSize.SMALL,
 ),

GF Flutter Button Type

The Flutter Button type can be changed using the property type by setting it to GFButtonType.outline. The Default type of the IconButton will be GFButtonType.solid.

import 'package:getwidget/getwidget.dart';

GFIconButton(
    onPressed: (){},
   icon: Icon(Icons.facebook),
    type: GFButtonType.outline,
 ),

Flutter Social Icon Button Shape

The Shape of Icon Button can be changed by setting property shape to GFIconButtonShape.circle. Default shape of the IconButton set toGFIconButtonShape.standardwhich gives square-shaped IconButton with slightly rounded corners.

import 'package:getwidget/getwidget.dart';

GFIconButton(
    onPressed: (){},
    icon: Icon(Icons.facebook),
    shape: GFIconButtonShape.pills,
 ),

---