Google provides us thousands of Material Style icons free for our mobile app and web apps. These icons are available on material.io website. The icons comes in SVG and PNG format with different sizes. Material icon collection is covers most of icons which is used by developers. Flutter comes with inbuilt material style icons implementation means there is no need to download icons from Material.io website. We can directly use Icons in our flutter app using flutter/src/widgets/icon.dart package. The package has a class named as Icon which can directly access all the icons. The Icon class has 5 different properties which can modify the icon in any style. So in this tutorial we would Show Material Style Design Icons in Flutter App Android iOS Example Tutorial.
Contents in this project Show Material Style Design Icons in Flutter App Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main Root MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root view class named as MyApp extends StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating Widget build area in MyApp class. Now we would create Scaffold widget and than create a Center widget. We would also create Row widget in Center widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child : Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: const <Widget>[ ], ) ) ) ); } } |
5. We would create 6 different type of Icons using Icon widget in Row widget. Here you would find all the icons list on Flutter Icons Class page. You can also see all the Icons list on Google’s Material Design Icons page.
- Icons.iconName : Is used to add Icon name.
- color : Used to set Icon filled color.
- size : Used to set Icon size. The default Icon size is 24 Pixels. If we do not define the Icon size then it will automatically the default Icon size.
- semanticLabel : It is used to set text which is announced in accessibility modes (e.g TalkBack / VoiceOver).
|
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 |
Icon( Icons.alarm, color: Colors.pink, size: 50.0, semanticLabel: 'Text to Announced in accessibility modes (e.g TalkBack/VoiceOver)', ), Icon( Icons.android, color: Colors.green, size: 48.0, ), Icon( Icons.beach_access, color: Colors.blue, size: 48.0, ), Icon( Icons.backup, color: Color(0xff424242), size: 48.0, ), Icon( Icons.insert_emoticon, color: Colors.pink, size: 48.0, ), Icon( Icons.fingerprint, color: Colors.blue, size: 48.0, ), |
6. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child : Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: const <Widget>[ Icon( Icons.alarm, color: Colors.pink, size: 50.0, semanticLabel: 'Text to Announced in accessibility modes (e.g TalkBack/VoiceOver)', ), Icon( Icons.android, color: Colors.green, size: 48.0, ), Icon( Icons.beach_access, color: Colors.blue, size: 48.0, ), Icon( Icons.backup, color: Color(0xff424242), size: 48.0, ), Icon( Icons.insert_emoticon, color: Colors.pink, size: 48.0, ), Icon( Icons.fingerprint, color: Colors.blue, size: 48.0, ), ], ) ) ) ); } } |
Screenshot:
