# GF Badge

img

# Badges

Typically GFBadge takes text widget as child, to display number or characters inside badges.

import 'package:getwidget/getwidget.dart';

GFBadge(
  onPressed: (){},
  child: Text("12"),
),

# Size

Badge size can be varied using size property, which specifies the size of the badge. Default badge size set to GFSize.medium.

import 'package:getwidget/getwidget.dart';

GFBadge(
    onPressed: (){},
    child: "primary",
    size: GFSize.small,
 ),

# Shape

Shape of Badge can be changed by setting property shape to GFIconButtonShape.circle. Default shape of the Badge set to GFIconButtonShape.standard which gives square shaped IconButton with slightly rounded corners.

import 'package:getwidget/getwidget.dart';

GFBadge(
    onPressed: (){},
    child: "primary",
    shape: GFIconButtonShape.pills,
 ),
Description The GFBadge Shape
Attribute shape
Type GFBadgeShape.standard, GFBadgeShape.square, GFBadgeShape.pills, GFBadgeShape.circle
Default GFButtonShape.standard

# Custom Properties

Name Description
child child of type [widget] alternative to text
textcolor the color to use for this badge;s text
textStyle defines the styling of the text
border defines the border side
bordershape defines the shape of the border
color GFColor is used to change the background of the button.

# Button with Badges

Badges can be used with button to display, the badges with label and GFButton properties.

import 'package:getwidget/getwidget.dart';

GFButtonBadge(
  onPressed: () {},
  text: 'primary',
  icon: GFBadge(
    child: Text("12"),
  ),
),

Default button shape set to GFButtonShape.standard so that we will able to get standard shaped button with solid background color with slightly rounded corners.

# Solid Button Badge

img

By default, button type set to GFType.solid so, we able to get buttons have a solid background color with slightly rounded corners.

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

import 'package:getwidget/getwidget.dart';

GFButtonBadge(
  onPressed: (){},
  text: "primary",
  icon: GFBadge(
    child: Text("12"),
  ),
),

# Disabled Button Badge

img

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';

GFButtonBadge(
    onPressed: null,
    text: "primary",
    icon: GFBadge(
       child: Text("12"),
     ),
 ),

# Outline Button Badge

img

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

import 'package:getwidget/getwidget.dart';

GFButtonBadge(
    onPressed: (){},
    text: "primary",
    icon: GFBadge(
      child: Text("12"),
    ),
    type: GFType.outline,
 ),

# Pills Button Badge

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

import 'package:getwidget/getwidget.dart';

  GFButtonBadge(
    onPressed: (){},
    text: "primary",
    icon: GFBadge(
      child: Text("12"),
    ),
    shape: GFButtonShape.pills,
  ),

# Button Badge Size

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

import 'package:getwidget/getwidget.dart';

GFButtonBadge(
    onPressed: (){},
    text: "primary",
    icon: GFBadge(
      child: Text("12"),
    ),
    size: GFSize.small,
 ),

# Properties

GF Button Badge can be styled with several attributes to look a specific way. Each and every attribute is described below.

# Color

GFColor is used to change the background of the button.

Description The color to use from application's color pallete
Attribute color
Type GFColor
Default GFColor.primary

# Size

Description The GFButtonBadge Size
Attribute size
Type GFSize.large, GFSize.medium, GfSize.small
Default GFSize.medium

# Shape

Description The GFButtonBadge Shape
Attribute shape
Type GFButtonShape.standard, GFButtonShape.square, GFButtonShape.pills
Default GFButtonShape.standard

# Type

Description The GFButtonBadge Type
Attribute type
Type GFType.solid, GFType.outline, GFType.outline2x, GFType.transparent
Default GFType.solid

# Position

Description The GFButtonBadge Position
Attribute position
Type GFPosition.start, GFPosition.end
Default GFPosition.start

# Custom Properties

Name Description
onPressed callback i.e, called when the button is tapped
onLongPressed callback i.e, called when the button is long-pressed
text text of type [string] to describe button's label. text will be priority over child
icon icon of type [widget] to describe button's label with icon
child child of type [widget] alternative to text
textcolor the color to use for this button's text when the button is enabled
textStyle defines the styling of the text
disabledColor the fillcolor of the button when the button is disabled
disabledTextColor the color to use for this button's text when the button is disabled
borderSide defines the border side
bordershape defines the shape of the border
buttonBoxShadow if true, default boxShadow appears around button.
boxShadow defines the boxShadow
fullWidthButton if true, defines the full width of the button.
blockButton if true, defines the block button.
padding defines internal padding of the button
focusColor fillColor of the button when it has the input focused
hoverColor fillColor of the button when the pointer is hovered over it
splashColor indicates that the button has been touched
highlightColor indicates that the button is actively being pressed

# Icon Badge Button

Badges can be used with button to display, the badges with icons and GFIconButton properties.

import 'package:getwidget/getwidget.dart';

GFIconBadge(
  child: GFIconButton(
   onPressed: (){},
   icon: Icon(Icons.ac_unit),
  ),
  counterChild: GFBadge(
    child: Text("12"),
  ),
),

Default icon button shape set to GFButtonShape.standard so that we will able to get standard shaped button with solid background color with slightly rounded corners.

# IconButton Badge Size

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

import 'package:getwidget/getwidget.dart';

GFIconBadge(
  child: GFIconButton(
   onPressed: (){},
   icon: Icon(Icons.ac_unit),
   size: GFSize.large,
  ),
  counterChild: GFBadge(
    child: Text("12"),
  ),
),

# IconButton Badge Type

Button type can be changed using property type by setting to GFType.outline. Default type of the IconButton will be GFType.solid.

import 'package:getwidget/getwidget.dart';

 GFIconBadge(
  child: GFIconButton(
   onPressed: (){},
   icon: Icon(Icons.ac_unit),
   type: GFType.outline,
  ),
  counterChild: GFBadge(
    child: Text("12"),
  ),
),

# IconButton Badge Shape

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

import 'package:getwidget/getwidget.dart';

GFIconBadge(
  child: GFIconButton(
   onPressed: (){},
   icon: Icon(Icons.ac_unit),
   shape: GFIconButtonShape.pills,
  ),
  counterChild: GFBadge(
    child: Text("12"),
  ),
),
Description The GFIconButton Shape
Attribute shape
Type GFIconButtonShape.standard, GFIconButtonShape.square, GFIconButtonShape.pills, GFIconButtonShape.circle
Default GFIconButtonShape.standard

# Custom Properties

Name Description
child child of type [widget] alternative to text
textcolor the color to use for this badge;s text
textStyle defines the styling of the text
borderSide defines the border side
bordershape defines the shape of the border
color GFColor is used to change the background of the button.
iconSize defines the size of icon
buttonBoxShadow if true, default boxShadow appears around button.
boxShadow defines the boxShadow
Last Updated: 10/23/2020, 1:15:02 PM