pills-button.md

description	Flutter Pills/Rounded/Circular Button Widget looks like a solid button with rounded corners. It comes with 200 + custom properties to customize button size, color.

Flutter Pills Button

GFButtons are clickable buttons that are used widely in an application. GFButtons come in many shapes and one of the shapes is a pill-shaped button.

We will be able to get flutter circular/rounded shaped button with solid background color with rounded corners by adding property shape with GFButtonShape.pills

The simple example of GFButton with pill shape is as follows:

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
  ),

Flutter Rounded Solid Button

By default, button type is set to GFButtonType.solid so, that we will be able to get pills shaped buttons that have a solid background color with rounded corners.

The callback is called when the button is tapped. By adding a callback to onPressed enables the button.

import 'package:getwidget/getwidget.dart';

  GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
  ),

Flutter Pills/Rounded Disabled Button

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

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: null,
    text: "primary",
    shape: GFButtonShape.pills,
 ),

Flutter Pills/Rounded Block Button

The Flutter Block button specifies how wide the button should be. By setting blockButton state,true it will change the button to a full-width block with rounded corners. Default blockButton set to false.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
    blockButton: true,
 ),

Flutter Pills/Rounded Full Width 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 with rounded corners and no border on the left or right. Default fullWidthButton set to false.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
    fullWidthButton: true,
 ),

Flutter Rounded Button Size

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

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
    size: GFSize.SMALL,
 ),

Flutter Pills/Rounded Outline Button

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

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
    type: GFButtonType.outline,
 ),

Above mentioned properties like size, blockButton, fullWidthButton, enabling and disabling of button works well in Outline Button also.

Flutter Pills/Rounded Outline2x Button

Flutter Pills Outline2x Button describes as the Button with a transparent background and a visible border with 2x border-width. This button can easily get in GFButton by adding type as GFButtonType.outline2x.

import 'package:getwidget/getwidget.dart';

GFButton(
    onPressed: (){},
    text: "primary",
    shape: GFButtonShape.pills,
    type: GFButtonType.outline2x,
 ),

Above mentioned properties like size, blockButton, fullWidthButton, enabling and disabling of button works well in Outline2x Button also.