Buttons In Flutter

Create Free Backend With Appwrite

Flutter Buttons

Buttons are an essential part of any application. They allow you to interact with the app and perform various actions. In this section, you will learn about different types of buttons available in Flutter, along with examples for each.

Button Types in Flutter

You can get different types of buttons in Flutter, such as:

Button Description
Material Button Mostly used button with material design.
Elevated Button Shadowed button for important actions.
Text Button Flat button for less important actions.
Outlined Button Border button for secondary actions.
Icon Button Button with an icon.
Floating Action Button Circular main action button.
Dropdown Button Button to select from a list of options.
Popup Menu Button Button that shows more options.
Info

Note: You will learn about each button type with real world examples in upcoming sections.

Button Useful Properties

Here are some common properties that you can use with buttons in Flutter:

Property Description
onPressed Things to do when the button is pressed.
child Widget to display inside the button.

Example 1: Simple MaterialButton In Flutter

If you want to create a simple button with text, use the MaterialButton widget. It is a versatile button that can display text, icons, and more.

MaterialButton(
  onPressed: () {
    // action to perform when button is pressed
  },
  color: Colors.blue,
  child: const Text('Press Me', style: TextStyle(color: Colors.white)),
)
Run Online

In upcoming sections, you will learn about different types of buttons available in Flutter, along with examples for each. Click on the links below to get started with flutter buttons: