How to overlay text and icon on an image in Flutter

When working with images, you often need to overlay text or icons on them. Perhaps to show the name of the image, or an icon to favourite it. In Android, the trusted android:background xml attribute does the trick. In iOS, you can add an UIImageView to the bottom of your view hierarchy. But, how can you do that in Flutter?

One of Flutter’s cornerstone widgets is Container. You often use it for positioning and size. And, it provides a decoration property, which is a decoration painted behind the child.

For this code tutorial, we will set up an app with 2 screens.  The first screen will display an image, with a title at the bottom, aligned left. The second will display the same, with an additional icon in the bottom right of the image.

Setting up the app

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Firstly, we create a Material app in main.dart, which will launch the HomePage widget.

 

Secondly, we create home_page.dart. This will eventually display an image with a title in bottom left. But for now, it just displays a message. It also shows a menu with an image icon, to access SecondPage.

 

Thirdly, we create example2_page.dart. This will eventually display an image with a title in bottom left and an icon in bottom right. But for now, it just displays a message.

 

Example 1: Showing an image and a title using BoxDecoration

Before we dive deeper into the code, we need to have an image to show. There are different ways to load images in Flutter; for this code tutorial, we will load it from assets. So grab your phone, take a picture, download it to your laptop/desktop, create an assets folder (same level as lib folder) and save the image as image.jpg.

Then, amend your pubspec.yaml file.

 

 

Now, we can show the image, with a title showing in the bottom left. The image is at the top of the screen, with a height of 200.0, and fills the width. We will use a Container: specifically, its decoration property for the image and its constraint property for the size. The title is a child of the container. To position it, we use the Container’s alignment and padding properties. Let’s amend home_page.dart as follows.

Voila!

Image and title
Image and title

Example 2: Showing an image, a title and an icon using BoxDecoration and Stack

For this screen, we want to show 2 child elements on the image, ie the title and an icon. So, we need a layout widget that can place children in specific positions, namely a Stack. So let’s amend second_page.dart as below.

 

Voila

Image, title and icon
Image, title and icon

 

 

 

 

 

 

 

What next?

In this code tutorial, we used the decoration property from Container. It is a complex widget, so I recommend reading the official doc (and running the sample code in there). When working with images, you will most likely need to load them from the network, so the Display images from the internet recipe may come in handy.

Author: Natalie Masse Hooper

Mobile app developer with 14 years experience. Started with the Android SDK in 2010 and switched to Flutter in 2017. Past apps range from start ups to large tech (Google) and non tech (British Airways) companies, in various sectors (transport, commercial operations, e-commerce).

2 thoughts on “How to overlay text and icon on an image in Flutter”

Leave a Reply

Your email address will not be published.