21
May

Flutter Icons

0

Flutter Icons:

In this tutorial, we are going to learn about Icons. an icon is a picture image or graphical image or ideal picture image used or displayed on a mobile/computer desktop screens to help the user navigate an on Android or IOS devices based on this icon. The definition of an icon is a graphic representation of a person or thing that is symbolic or is a noted figure to get an idea based on this icon.

In flutter we have two types of Icos:

  • Material Style Icons
  • IOS Style Icons

We have so many Icon Providers some of them are listed below:

  • AntDesign
  • Entypo
  • EvilIcons
  • Feather
  • FontAwesome
  • Foundation
  • Ionicons
  • MaterialIcons by Google,
  • MaterialCommunityIcons by MaterialDesignIcons.com
  • Octicons by Github,
  • Zocial
  • SimpleLineIcons

There are so many Icon providers available and we have many Icons available we want to use. In this tutorial, we are using an Icon from IonIcons, FontAwesome, AntDesign and MaterialIcons icons only for example purpose but you can you any of the provider’s Icons according to your app’s requirements.

Creating Flutter Icons:

Add the dependency package:

If we want to use Icons In Flutter we have to add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_icons: ^0.1.4

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_icons/flutter_icons.dart';

Methods to Use Icons In Flutter:

Prop Description
getIconData Using this method we are getting the Icon It Returns the IconData object, eg : IconData iconData = AntDesign.getIconData("stepforward")
hasIconData Checks  whether the Icon already present or not if the name is valid in current icon set.eg: bool isNameValid = AntDesign.hasIconData("stepforward")

Getting Flutter Icons from Icon Providers:

using the below code we are fetching the Icons from the Icons provides. In below code we are getting the Flutter Icons from the four Icons providers. as shown.

Icon(Ionicons.getIconData("ios-search"));
Icon(AntDesign.getIconData("stepforward"));
Icon(FontAwesome.getIconData("glass"));
Icon(MaterialIcons.getIconData("ac-unit"));

Complete Example Code For Flutter Icons:

Copy and Paste below code into your main.dart file

main.dart

 

import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.

// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Ionicons.getIconData("ios-search")),
Icon(AntDesign.getIconData("stepforward")),
Icon(FontAwesome.getIconData("glass")),
Icon(MaterialIcons.getIconData("ac-unit")),
],
),
),
);
}
}

Congratulations You Have Learned Using Flutter Icons ….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories