Buttons In Flutter

Save

Buttons In Flutter are the graphical control element that provides a user to trigger an event such as taking actions, making choices, searching things, and many more. They can be placed anywhere in our UI like dialogs, forms, cards, toolbars, etc.

Buttons In Flutter is a part of the material design library. Flutter provides several types of buttons that have different shapes, styles, and features.

Features of Buttons

The standard features of a button in Flutter are given below:

  1. We can easily apply themes on buttons, shapes, color, animation, and behavior.
  2. We can also theme icons and text inside the button.
  3. Buttons can be composed of different child widgets for different characteristics.

Types of Flutter Buttons

Following are the different types of button available in Flutter:

1. Text Button

It is a text label button that does not have much decoration and displayed without any elevation. The flat button has two required properties that are: child and onPressed(). It is mostly used in toolbars, dialogs, or inline with other content. By default, the Text button has no color, and its text color is depend on the theme color.

2. Elevated Button

It is a button, which is based on the material widget and has a rectangular body. It is similar to a Text button, but it has an elevation that will increase when the button is pressed.

This button has Two callback functions for Used on the App end.

onPressed(): It is triggered when the button is pressed.

onLongPress(): It is triggered when the button is long pressed.

It is to note that this button is in a disabled state if onPressed() and onLongPressed() callbacks are not specified.

Here is the Code with its some Properties.

3. Floating Action Button

A FAB button is a circular icon button that triggers the primary action in our application. It is the most used button in today’s applications. We can use this button for adding, refreshing, or sharing the content. Flutter suggests using at most one FAB button per screen. There are two types of Floating Action Button:

FloatingActionButton: It creates a simple circular floating button with a child widget inside it. It must have a child parameter to display a widget.

FloatingActionButton.extended: It creates a wide floating button along with an icon and a label inside it. Instead of a child, it uses labels and icon parameters.

4. Icon Button

An IconButton is a picture printed on the Material widget. It is a useful widget that gives the Flutter UI a material design feel. We can also customize the look and feel of this button. In simple terms, it is an icon that reacts when the user will touch it.

5. Outlined Button

It is similar to the Text button, but it contains a thin grey rounded rectangle border. Its outlined border is defined by the shape attribute.

That’s all for this Article 🎊 .

Conclusion

We learned about some Buttons in Flutter in this blog.

Visit the link for additional information on the Buttons Widget in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.

Markus Walter

Markus Walter

Founder, Das Apartment Living

Talk to Sales

Global

Live Chat
Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home