flutter-tutorial

Flutter Icons

An icon is a graphic image that represents a programme or any other entity that has meaning for the user. It can be both selected and inaccessible. The company’s logo, for example, is not selectable. It may also contain a hyperlink that leads to another page. It also serves as a symbol in lieu of a full description of the actual entity.

To build icons in our apps, Flutter includes an Icon Widget. Flutter allows us to build icons using either built-in or custom icons. In the Icons class, Flutter gives a list of all icons. We’ll learn how to use Flutter icons in the application in this tutorial.

Icon Widget Properties

The Flutter icons widget offers several settings that can be used to customise the icons. The following properties are described in detail:

  • icon: This icon is used to specify the name of the icon that will be displayed in the app. Material design icons, which are symbols for common actions and items, are used extensively in Flutter.
  • colour: This property is used to specify the icon’s colour.
  • size: This property is used to specify the icon’s size in pixels. Icons usually have the same height and width.
  • textDirection: This property is used to specify the icon’s rendering direction.

Let’s look at an example of Flutter icons.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Learn Code Zone'),
        ),
        body: Column(
          children: <Widget>[
            //icon with label below it
            Container(
              padding: EdgeInsets.all(30),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Column(children: <Widget>[
                      Icon(Icons.camera_front, size: 70),
                      Text('Front Camera'),
                    ]),
                    Column(children: <Widget>[
                      Icon(Icons.camera_enhance, size: 70),
                      Text('Camera'),
                    ]),
                    Column(children: <Widget>[
                      Icon(Icons.camera_rear, size: 70),
                      Text('Rear Camera'),
                    ]),
                  ]),
            )
          ],
        ));
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *