Flutter Creating Elevated Button with Material Icons Example

Material Icons are very popular among web and mobile developers because they will make the application stylish and cooler. In Flutter we will get all the Google Material Style Icons out of the box means they come with Flutter. We don’t have to import or download it from outside. All we have to do is call them in our application using Icon widget. In today’s tutorial we would learn to implement Google & Flutter Material Style icons in Flutter mobile application. Flutter Creating Elevated Button with Material Icons Android iOS Example.

Note:- To see all the list of Icons from Flutter Visit Flutter Icon Class Page from here. Google Material Style Icons can also be used by simply calling them. Here is the list of all Material Icons From Google.

Contents in this project Flutter Creating Elevated Button with Material Icons Example:-

1. Open your project’s main.dart file and import material.dart package.

2. Creating void main runApp() method and Here we would call our main MyApp class.

3. Creating our main MyApp class extends State less widget.

4. Creating a function named as printMSG(). In this function we would simply print a message on Terminal window. We would call this function on Elevated button click event.

5. Creating Widget Build Area -> Material App -> Scaffold Widget -> Center Widget -> Column Widget. We are using Column widget to arrange all the buttons in Vertical format.

6. Creating 3 ElevatedButton.icon() widget, Each wrap inside a Container widget.

  • onPressed : To set click event on Elevated Icon Button.
  • label : To set Elevated Button Text.
  • icon : To set Icon inside Elevated Icon widget.
  • style : To Style the Elevated Button.

7. Complete source code for main.dart file:

Screenshots:-

Flutter Creating Elevated Button with Material Icons Example

Leave a Reply

Your email address will not be published.