Flutter - Working with Material Button

Buttons are material components that provide the user a single tap facility for taking actions, making choices, submitting forms, saving data, opening a new page, etc. Buttons are triggered when the user taps on them. They are the most commonly used feature provided in almost all Flutter apps. For using buttons, you need to import the Material Components package for Flutter, i.e., "package:flutter/material.dart". Based on their classification, buttons are divided into two categories - deprecated and non-deprecated. The button works on material apps only.

Special features of a Button

• Easy addition of different child widgets for different purposes
• Easy theming of the buttons
• Easy addition of themed text and icons
• Provide action functionalities

Types of Buttons

Buttons are classified broadly into the following categories:

1. Text Button
2. Icon Button
3. Floating Action Button
4. Elevated Button
5. Dropdown Button
6. PopUp Menu Button

Given below is a brief description of each of the categories:

1. Text Button

The simplest of all the buttons is a text button. They are regular text without any outline or boundary. 

Example:

TextButton(
    child: Text(
        "Text Button",
        style: TextStyle(
            color: Colors.green,
        ),
    ),
    onPressed: () {},
),

Output:

2. Icon Button

These are picturized buttons with colors filled inside them. Icon Buttons represent a cartoonish image of the category defined inside. These are used to create profile screens, option tabs, etc.

Example:

IconButton(
    icon: Icon(Icons.code, size: 50),
    color: Colors.green,
    onPressed: () {},
),

Output:

3. Floating Action Button

These are small circular buttons that hang on the screen of the application. You can set the position of your action button by using but by default, it is placed at the center of the screen. They create a hovering effect when tapped.

Example:

FloatingActionButton(
    child: Icon(Icons.person),
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
    onPressed: () {},
),

Output:

4. Elevated Button

This button has a special feature of increased elevation. When an elevated button is pressed, its elevation is increased to a certain value. They do not offer straightforward styling like the rest of the buttons, but you can use a styleFrom method to style an elevated button explicitly.

Example:

ElevatedButton(
    child: Text(
            'ElevatedButton',
          ),
    onPressed: () {},
),

Output:

5.Drop Down button

These buttons provide an option to choose from a list of available options. It is a drop-down list.

Example:

// Current Dropdown value
String dropdownvalue = 'Profile';

// List of Dropdown items
var items = [
    'Profile',
    'Settings',
    'Account',
    'Go Premium',
    'Logout',
];
   
// Code for actual DropdownButton         
DropdownButton(
    focusColor: Colors.green,
    value: dropdownvalue,
    icon: const Icon(Icons.keyboard_arrow_down),
    items: items.map((String items) {
        return DropdownMenuItem(
            value: items,
            child: Text(
                items,
                style: TextStyle(
                    color: Colors.green,
                ),
            ),
        );
    }).toList(),
    onChanged: (String? newValue) {
        setState(() {
        dropdownvalue = newValue!;
        });
    },
),

Output:

6. Pop Up Menu Button

It is represented by three vertical dots. It displays a menu bar from which the user selects their chosen option. 

Example:

PopupMenuButton(
  itemBuilder:
      (context) => [
        PopupMenuItem(child: Text("Profile"), value: 1),
        PopupMenuItem(child: Text("Account"), value: 2),
        PopupMenuItem(child: Text("Settings"), value: 1),
        PopupMenuItem(child: Text("About GFG"), value: 1),
        PopupMenuItem(child: Text("Go Premium"), value: 1),
        PopupMenuItem(child: Text("Logout"), value: 1),
      ],
),

Output:

How to add a button to your application?

Given below are the basic steps you always need to perform while creating a button.

1. Create a parent widget for whom you want to set your button as a child 
2. Add the child property for the respective parent widget
3. Explore the requirements of your app and choose which type of button you want to add to it.
4. Declare the button and add the styling.
5. Modify your button using the in-built theming properties provided by the material package. 

Example:

Suppose you want to create a raised button that has an icon of a favorite titled alongside "GeeksforGeeks is" as text. 

• Step 1: Since it is an elevated button that will have a text widget and an icon side-by-side, let's enclose it in a Column widget as its parent.
• Step 2: Create a child property to which well will assign our button.
• Step 3: Add the required theming to your button according to your choice.
• Step 4: Add an elevated button and icon to your column
• Step 5: Beautify your button.

Implementation:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'GeeskforGeeks';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
          backgroundColor: Colors.green,
        ),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        color: Colors.green,
        onPressed: () {},
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'GeeksforGeeks is',
              style: TextStyle(
                color: Colors.white,
              ),
            ), // <-- Text

            Icon(
              // <-- Icon
              Icons.favorite,
              size: 24.0,
            ),
          ],
        ),
      ),
    );
  }
}

Output: