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.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends State less widget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
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.
|
1 2 3 |
void printMSG() { print('Elevated Button Clicked...'); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ])))); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: printMSG, label: Text('Alarm Button'), icon: Icon(Icons.access_alarm), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 22, ), ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: printMSG, label: Text('Group Button'), icon: Icon(Icons.group_add_rounded), style: ElevatedButton.styleFrom( primary: Colors.purple, ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: printMSG, label: Text('Mobile Data Button'), icon: Icon(Icons.g_mobiledata), style: ElevatedButton.styleFrom( primary: Colors.pink, ), )), |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { void printMSG() { print('Elevated Button Clicked...'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.all(5), child: Text( 'ElevatedButton With Icons', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: printMSG, label: Text('Alarm Button'), icon: Icon(Icons.access_alarm), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 22, ), ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: printMSG, label: Text('Group Button'), icon: Icon(Icons.group_add_rounded), style: ElevatedButton.styleFrom( primary: Colors.purple, ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: printMSG, label: Text('Mobile Data Button'), icon: Icon(Icons.g_mobiledata), style: ElevatedButton.styleFrom( primary: Colors.pink, ), )), ])))); } } |
Screenshots:-
