# GF Badge
# 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
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
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
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 |