A Quick Guide to Displaying Text on Images in Flutter

Text Widget allows you to display text in your Flutter application. sometimes users need to display dynamic text on a dynamic list of images as per the client’s requirement so in this article we will go through how to display Text Widget over the images in Flutter?

How to Display Text Over the Images in Flutter?

To display Text over an image we can use Stack Widget. Code Snippet will look like the below:

Stack(
    children: <Widget>[
        yourImageWidget,
        Center(child: Text("someText")),
    ]
)

PhotosList class will have a code snippet like the below:

PhotosList({Key key, this.photos}) : super(key: key);

@override
Widget build(BuildContext context) {
    return _buildBody();
}

Widget _buildBody() {
    return new ListView.builder(
            itemCount: photos.length,
            itemBuilder: (context,int){
            return Stack(
                children: <Widget> [
                    new CachedNetworkImage(imageUrl: photos[int].url),
                    Center(child: Text(photos[int].title)),
                ]
            );
            }
        );
    }
}

You can also try the below way:

Container(
         child: Center(child: Text('test'),),
         height: 190.0,
         width: MediaQuery.of(context).size.width - 100.0,
         decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(5),
         color: Colors.blue,
         image: DecorationImage(
                image: new NetworkImage(
                "https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_03.jpg"
                  ),
          fit: BoxFit.fill
              )
                 ),
              ),

Let’s understand with an example like the below:

return Container(
      child: const Center(
        child: Text(
          'This is My Text',
          style: TextStyle(color: Colors.black, fontSize: 30),
        ),
      ),
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(
               "https://www.akamai.com/content/dam/site/im-demo/perceptual-standard.jpg?imbypass=true"),
              fit: BoxFit.fitHeight)),

We will get output like the below:

Conclusion:

Thanks for being with us Flutter Journey !!!

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

First published here