GF Badge

Badge contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.

Badge
Badges
Typically GFBadge takes text widget as child, to display number or characters inside badges.
import 'package:getflutter/getflutter.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:getflutter/getflutter.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:getflutter/getflutter.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:getflutter/getflutter.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
Solid Button Badge
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:getflutter/getflutter.dart';
  
GFButtonBadge(
  onPressed: (){},
  text: "primary",
  icon: GFBadge(
    child: Text("12"),
  ),
),
Disabled Button Badge
Disabled Button Badge
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:getflutter/getflutter.dart';
​
GFButtonBadge(
    onPressed: null,
    text: "primary",
    icon: GFBadge(
       child: Text("12"),
     ),
 ),
Button Badge Type (Outline Button)
Outline Button Badge
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:getflutter/getflutter.dart';
​
GFButtonBadge(
    onPressed: (){},
    text: "primary",
    icon: GFBadge(
      child: Text("12"),
    ),
    type: GFType.outline,
 ),
Button Badge Shape (Pills Button)
We will able to get pills shaped button with solid background color with rounded corners by adding property shape with  GFButtonShape.pills . 
import 'package:getflutter/getflutter.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:getflutter/getflutter.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 Button with Badge
Badges can be used with button to display, the badges with icons and GFIconButton properties.
import 'package:getflutter/getflutter.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:getflutter/getflutter.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:getflutter/getflutter.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:getflutter/getflutter.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

Social Button

GF Avatar

Last updated 4 months ago


Description	The GFBadge Shape
Attribute	shape
Type	`GFBadgeShape.standard, GFBadgeShape.square, GFBadgeShape.pills, GFBadgeShape.circle`
Default	`GFButtonShape.standard`


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


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


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


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

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.


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

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


Description	The GFIconButton Shape
Attribute	shape
Type	`GFIconButtonShape.standard, GFIconButtonShape.square, GFIconButtonShape.pills, GFIconButtonShape.circle`
Default	`GFIconButtonShape.standard`