How to Use Flat Icons in Flutter App

In this example, we are going to show you the way to use Flat Icons in Flutter App. Flat Icons are thin-weight icons that have very elegant looks. See the example below for more details:

Read This Also: How to Use Font Awesome Icons in App

First, you need to add flat_icons_flutter package into dependency by adding the following lines on pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  flat_icons_flutter: ^1.0.2

Use Flat Icons on Flutter App:

import 'package:flat_icons_flutter/flat_icons_flutter.dart';
Icon(FlatIcons.download)

Flat Icons Size and Color:

Icon(FlatIcons.download,  //icon data
   size: 50, //icon size
   color: Colors.green //icon color
)

Use Default Material Icon sets.

Icon(Icons.menu)

Full Code Example of above screenshot:

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Flat Icons on Flutter", style: TextStyle(fontWeight: FontWeight.w300)),
             backgroundColor: Colors.indigoAccent,
             leading: Icon(FlatIcons.menu),
             actions: [
                 IconButton( 
                   onPressed: (){},
                   icon:Icon(FlatIcons.search),
                 ),

                 IconButton( 
                   onPressed: (){},
                   icon:Icon(FlatIcons.user),
                 ),

                 IconButton( 
                   onPressed: (){},
                   icon:Icon(FlatIcons.print),
                 )
             ],
          ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: ElevatedButton.icon(
              style: ElevatedButton.styleFrom(
                primary: Colors.redAccent
              ),
              onPressed:(){

              }, 
              icon: Padding( 
                    padding: EdgeInsets.all(15),
                    child:Icon(FlatIcons.download, size: 50),
                ),
              label: Text("Flat Icons", style: TextStyle(fontSize:40, fontWeight: FontWeight.w300),),
            )
            
          )
       );
  }
}

You can use the Code snippet suggestion of IDE to find the icon for your project.

In this way, you can use Flat Icons on the Flutter app.

No any Comments on this Article


Please Wait...