Hello Developers,

In this demonstration, I will briefly discuss Flutter's mostly used widget, which is called Button. If you have previous experience working with flutter buttons, this short note will help you a lot. If you do not have any experience with the flutter button, this tutorial is made for you.

Buttons are used to trigger certain functionalities and events in the app. These events can be searching, making a choice, routing to a new view, etc. These buttons can be placed in many elements of the UI such as forms, app bar, drawer, container, etc. But different buttons suits different places. Such as the button with text does not look that great in the app bar. Luckily, we have different types of buttons to satisfy our needs.

Commonly used buttons are:

1. Elevated Button
2. Icon Button
3. Text Button
4. Outlined Button
5. Floating Action Button
6. Inkwell Button
7. Toggle Button
8. Radio Button

In this tutorial, we will learn about Elevated, Icon, Text, and Outlined Button.

Elevated buttons are the most commonly used button in any application. It has two required parameters. Those parameters are onPressed and child. Child parameter can hold Text, Row, Column, Image, Icons, etc. onPressed parameter holds a function which will be triggered when the button is pressed. There are also a few other optional parameters that you can set. One of them is the style parameter. In style parameter we can set ElevatedButton.styleForm() where we can declare padding, background color, elevation, max size, min size etc. Here is an example code below:

ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.indigo,
            elevation: 20,
            padding: const EdgeInsets.all(20),
            minimumSize: const Size(40, 80)
          ),
          onPressed: () {},
          child: const Text(
            'Button'
          )
      ),

Icon buttons are used when we want to see the button as an icon. The difference between an Elevated button and an Icon button is that the Icon button does not hold any child parameter. Instead, the child Icon button has an icon parameter. In the icon parameter, we can set an Icon widget. Here is an example code below:

IconButton(
        icon: const Icon(Icons.search),
        onPressed: () {},
        style: IconButton.styleFrom(
          padding: const EdgeInsets.all(20),
          ),
      ),

If we want a clickable text which will trigger an event we can use the Text Button. The parameters of the text button are similar to the Elevated button. Here is an example code:

TextButton(
        onPressed: () {},
        style: IconButton.styleFrom(
          padding: const EdgeInsets.all(20),
        ),
        child: const Text(
            'Button',
          style: TextStyle(
            color: Colors.green,
            fontSize: 25,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),

I hope this might help you in the journey of flutter development.

Read More: Want to know about Flutter Container?