Open In App

Flutter – Working with Material Button

Improve
Improve
Like Article
Like
Save
Share
Report

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 the 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 un-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. Elevated Button
  2. Floating Action Button
  3. Outlined Button
  4. Icon Button
  5. Text Button
  6. Dropdown Button
  7. PopUp Menu Button

Flat Button & Raised Button classes have been deprecated in the flutter. Instead, we can use Text Button and Elevated Button classes to achieve the same result. 

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

1. Flat Button

These are simple buttons with no extra styling embedded. There is no elevation factor included and the button is just a text enclosed by a colored boundary. 

Example:

            // DEPRECATED 

                // FlatButton(
                //   color: Colors.green,
                //   child: const Text(
                //     'Flat Button',
                //     style: TextStyle(color: Colors.white),
                //   ),
                //   onPressed: () {},
                // ),
                
            // We can achieve same results with Text Button also


                TextButton(
                  onPressed: () {},
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: const Text(
                      'Flat Button',
                      style: TextStyle(color: Colors.white, fontSize: 13.0),
                    ),
                  ),
                ),

Output:

Flat Button

 

2. Raised Button

These buttons are slightly elevated from the screen  They have styling options inside them. It is always preferable to avoid raised contents in materials that are already raised.

Example:

            // DEPRECATED
      // RaisedButton(
                //   color: Colors.green,
                //   textColor: Colors.white,
                //   elevation: 10,
                //   child: Text(
                //     'Raised Button',
                //   ),
                //   onPressed: () {},
                // ),
                
                
           
             // We can achieve same results with Raised Button also


                ElevatedButton(
                  onPressed: () {},
                  // style: ButtonStyle(elevation: MaterialStateProperty(12.0 )),
                  style: ElevatedButton.styleFrom(
                      elevation: 12.0,
                      textStyle: const TextStyle(color: Colors.white)),
                  child: const Text('Elevated Button'),
                ),

Output:

Raised Button

 

3. 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: const Text(
                'Raised Button',
              ),
              onPressed: () {},
            ),

Output:

4. 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.

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

Output:

Floating Action Button

 

5. Outlined Button

These are simple buttons with text in the center enclosed by a thin border. You can modify the styling of these buttons by using properties provided in the material package. They have a slight elevation.

Example:

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

Output:

Outlined Button

 

6. 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(
           splashColor: Colors.yellow,
              icon: Icon(Icons.code),
              color: Colors.green,
              onPressed: () {},
            ),

Output:

7. 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:

Text Button

 

8. Drop Down button:  These buttons provide an option to be chosen to form a list of available options. It is a drop-down list.

Example:

Dart




String dropdownvalue = 'Profile';
 
              var items = [
                'Profile',
                'Settings',
                'Account',
                'Go Premium',
                'Logout',
              ];
             
   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:

9. Pop Up Menu Button

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

Example:

Dart




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 elevatedbutton and icon to your column

Step 5: Beautify your button.

Implementation:

Dart




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:

Output

 



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads