Press "Enter" to skip to content

Add Images, Icons and Circle Avatar to Flutter Application

Images, Logos, icons, etc are important parts of an application design. In this articles let’s learn how to add images, icons and circle avatar to our flutter application and how to adjust their size using height and width measurements.

Adding Images

Step 1:

First of all, open your flutter application(project) folder.
On the top of the android studio, you may find this location if you forgot.

Step 2:

There you need to create a new folder for keeping your images.
As an example, we create a folder named ‘images’.

Step 3:

Put the images those you want to insert into your flutter project.
As an example an image, two png images named ‘rose’, and ‘dahlia’ are placed.

Step 4:

In android studio, make the application program in ‘Project’ explorer mode.
At the bottom on the project file list, open the file named ‘pubspec.yaml’.

Step 5:

Specify the image file names or file directory (images) as assets.

Adding entire folder. Here we can access all files inside the ‘images’ folder.

 assets:
   - images/

Or specify the filenames separate:

assets:
  - images/rose.PNG
  - images/daliah.PNG

Don’t forget to specify file format such as jpg, png, jpeg, gif, etc

Step 6:

Now you can import these images on your flutter application using these codes:

 Image(image: AssetImage('images/daliah.png')

OR

 Image.asset("images/rose.png)

Adjusting Image Width and Height Sizes

You can simply change size of the image using width and height attributes.

 Image.asset("images/rose.png", width: 100, height:100),
 Image.asset("images/rose.png", width: 150),
Images on Flutter application

Adding Icons

Flutter contains a lot of inbuilt icons on their package.

You can simply add them by this syntax of code:

Icon(
       Icons.favorite
    ),

Where favorite is an icon of heart. There are a lot of icons in the icons list.

Changing Icons Size and Color

Icon(
      Icons.favorite,
      size: 125.0,
      color: Colors.red, 
    ),
Icons on flutter

Adding Circle Avatar

Avatar is the display picture of person or an account. Many of accounts like WhatsApp, Twitter, etc are using circle typed avatar means rounded images for representing profile picture. Let us see how to create a circle avatar in our flutter project.

CircleAvatar(
             backgroundImage: AssetImage('images/dahlia.png'),            
             )

Adjusting Size and background color of Circle Avatar

You can change the size of the circle avatar by adjusting their radius also can change background color using backgroundColor attribute. Default background color is light blue.

CircleAvatar(
              backgroundImage: AssetImage('images/dahlia.png'),
              maxRadius: 50,
              backgroundColor: Colors.green,
            ),
Circle avatar on flutter

Sample Output: (Images, Icon and Circle Avatar together)

images icons circle avatar on flutter

Full Application Code:

Here we have designed the layout using Rows and Columns and added two images, an image and a circle avatar.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Images on Flutter';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: FlutterImages(),
      ),
    );
  }
}
class FlutterImages extends StatefulWidget {
  @override
  _FlutterImagesState createState() => _FlutterImagesState();
}

class _FlutterImagesState extends State<FlutterImages> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Image(image: AssetImage('images/dahlia.png'),  width: 150,),
              Image.asset("images/rose.png", width: 150),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Icon(
                Icons.favorite,
                size: 125,
                color: Colors.red,
              ),
              CircleAvatar(
                backgroundImage: AssetImage('images/rose.png'),
                maxRadius: 50,
                backgroundColor: Colors.green,
              ),
            ],
          )
        ],
      )

    );
  }
}
24

Be First to Comment

Leave a Reply

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