| description |
|---|
How to design a custom flutter button with GF Button with the option to create disable button, Square button, Social button, Elevated button, icon button with 100+ properties to customize. |
GF Button is a Flutter Button that is a clickable element, that can be used for click events like click functions, page routing, social authentications, form submissions, or anywhere that needs simple, standard button functionality. Flutter Buttons have a broad area and can be used with any other widgets as well.
The Flutter Buttons are the very simple yet most commonly used component in almost all of the pages. The simple code of a GFButton looks like the following:
GFButton(
onPressed: (){},
text:"primary"
),The Flutter Disable Button is used to get a disabled button in the application. The disabled button will have a null value on the onPressed parameter. The simple code of the GFDisabled Button is as follows:
GFButton(
onPressed: null,
text:"primary"
),GF Buttons or Flutter Buttons are a very widely used component in any application. Hence the GFButtons are highly customizable and have a wide range of properties that gives a better look and feel for any application. The GFButton's properties are described below:
Flutter Elevated Button is a button in flutter which is the most commonly used flutter button which upon clicking, elevates or triggers to show the button action. The more customized properties can be seen in Gf Flutter Elevated Button
Flutter Rounded Button or Flutter Pills Button is a button in flutter wherein the corners of the buttons are circular in shape. In other words, it is a button with border-radius in it. For more customizable properties head to Flutter Pills/Rounded Button.
Flutter Icon Button or Icon Button Flutter is a flutter button where the button has icons on them. It can even have a text which is a button with text or text with an icon which is a text icon button. To know more about Icon Button head to the** **Flutter Icon Button section
Flutter Toggle Button or Flutter Toggle Switch is a switch button **that toggles between two states and the two states are often **ON/OFF state.
**For more information head to **Flutter Toggle Switch Button.
Flutter circular button or Flutter Pills/Rounded Button is a type of Flutter Button that has circular corners in them. For more examples head to Flutter Circular button
FLUTTER BUTTON WIDGET MORE EXAMPLE CODE **: **You can follow our Blogs for more example demo code for the flutter button with GFButton.
Button Colors can be the background fill colors for solid buttons or the color can be for the border to the outline buttons.
GFColors are used to change the background of the button.
| Name | Description |
|---|---|
| Description | The color to use from the application color palette |
| Attribute | color |
| Type | GFColors |
| Default | GFColors.PRIMARY |
Flutter Button can be of any size and can be changed according to the need.
GFSize can be used to determine the size of the buttons as follows:
| Name | Description |
|---|---|
| Description | The GFButton Size |
| Attribute | size |
| Type | GFSize.LARGE, GFSize.MEDIUM, GFSize.SMALL |
| Default | GFSize.MEDIUM |
The shape of the button like standard, square, or pills can be determined by the shape property.
| Name | Description |
|---|---|
| Description | The GFButton Shape |
| Attribute | shape |
| Type | GFButtonShape.standard, GFButtonShape.square, GFButtonShape.pills |
| Default | GFButtonShape.standard |
The button type of the button like solid, outline can be determined by the following properties:
| Name | Description |
|---|---|
| Description | The GFButton Type |
| Attribute | type |
| Type | GFButtonType.solid, GFButtonType.outline, GFButtonType.outline2x, GFButtonType.transparent |
| Default | GFButtonType.solid |
The GFButton can be placed in the start or at the end of the position using the position property:
| Name | Description |
|---|---|
| Description | Position of icon in the button. |
| Attribute | position |
| Type | GFPosition.start, GFPosition.end |
| Default | GFPosition.start |
Flutter Buttons can be customized using GFButton Custom properties which are listed below:
| Name | Description |
|---|---|
| onPressed | callback i.e, called when the button is tapped |
| onLongPressed | callback i.e, called when the button is long-pressed |
| text | describe the button's label. text will be a priority over child |
| icon | 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 the 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 |