Flutter Button Widget
What is Flutter Button?
Flutter provides a Button Widget that allows you to create interactive buttons in your app. Flutter provides several types of buttons out-of-the-box, including Material buttons, Cupertino buttons, and InkWell buttons.
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.
Features of Flutter Buttons
Some of the key features of Flutter Buttons are:
Customizable appearance: Flutter Buttons provide various customization options like color, shape, size, font, and more. You can customize the appearance of the button to match your app's theme and design.
Interactive feedback: Flutter Buttons provide interactive feedback when pressed. This helps users understand that the button has been pressed and provides a better user experience.
Accessibility support: Flutter Buttons provide accessibility support, making it easier for users with disabilities to interact with your app. You can add labels, hints, and other accessibility attributes to your buttons to make them accessible.
Animation and transitions: Flutter Buttons provide animation and transition support, making your app more engaging and visually appealing. You can animate the button's appearance, color, and shape, and add transition effects when the button is pressed.
Flexibility: Flutter Buttons are flexible and can be used in different contexts and layouts. You can use buttons as standalone elements or combine them with other widgets to create more complex layouts.
Platform-specific design: Flutter Buttons provide support for both Material Design and Cupertino design. This allows you to create buttons that match the design guidelines of the platform your app is running on.
Overall, Flutter Buttons provide a powerful and flexible tool for creating interactive and responsive user interfaces in your app. With a wide range of customization options, accessibility support, and animation and transition effects, Flutter Buttons make it easy to create engaging and visually appealing user interfaces.
How to create GF Button in Flutter?
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"
),
Flutter Disabled Button
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"
),
Types of Flutter Buttons
Following are the different types of buttons available in Flutter:
- Flat Button
- Raised Button
- Floating Button
- Drop Down Button
- Icon Button
- Inkwell Button
- PopupMenu Button
- Outline Button
- Elevated Button
- Rounded Button
- Toggle Button
- Circular Button
Let us discuss each button in detail.
FlatButton: Flutter flat button is a Material Design button that does not have a background color. It is typically used for secondary actions in an app.
RaisedButton: Flutter raised button is a Material Design button that has a background color and is elevated. It is typically used for primary actions in an app.
DropdownButton: Flutter dropdown button is a button that displays a dropdown menu when pressed. It is typically used to select an item from a list of options.
IconButton: 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 the Icon Button head to the Flutter Icon Button section.
InkWell: Flutter inkwell button is a button that provides visual feedback when pressed. It is typically used for interactive elements in an app.
PopupMenuButton: Flutter popup menu button is a button that displays a popup menu when pressed. It is typically used to display a list of actions or options.
OutlineButton: Flutter outline button is a Material Design button that has a border but no background color. It is typically used for secondary actions in an app.
ElevatedButton: Flutter Elevated Button is a button in flutter that 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.
ToggleButton: 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.
RoundedButton: 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.
Circular Button: A 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 examples of demo code for the flutter button with GFButton.
How to Set Button Color in flutter?
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 |
How to Set Button Size in Flutter?
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 |
How to Change Button Shape in Flutter?
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 |
GF Flutter Button Type Properties
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:
| Name | Description |
|---|---|
| Description | The GFButton Type |
| Attribute | type |
| Type | GFButtonType.solid, GFButtonType.outline, GFButtonType.outline2x, GFButtonType.transparent |
| Default | GFButtonType.solid |
How to change Button Position in Flutter?
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 |
GFButton Custom Properties
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 |
Are you tired of spending countless hours creating UI components for your Flutter app? GetWidget has the solution you need! Our pre-built, clean UI widget library reduces your development time by 40%, so you can focus on creating a fantastic user experience for your customers. Whether you're building a web app or a desktop flutter app, GetWidget is fully compatible with both.
In addition to using GetWidget for your Flutter app development needs, if you require assistance with your project or want to hire Flutter developers, our team is here to help! Our developers have years of experience in Flutter app development and are passionate about creating high-quality, user-friendly apps. Contact us today to discuss your project and learn how we can help take your app to the next level!
Last Updated: September 20, 2023
