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 over the images in Flutter? Text Widget Text Widget How to Display Text Over the Images in Flutter? To display Text over an image we can use . Code Snippet will look like the below: Stack Widget 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 Journey !!! Flutter Keep Learning !!! Keep !!! Fluttering is one of the most popular online portals dedicated to and daily thousands of unique visitors come to this portal to enhance their knowledge on . FlutterAgency.com Flutter Technology Flutter First published here

Super

2022 - Android Advocate of the Year

2022 - HackerNoon Contributor of the Year - Flutter

2022 - Ios Writer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Flutter

Nominated for 2022 - Android Advocate of the Year

Nominated for 2022 - Ios Writer of the Year

Too Long; Didn't Read

Get free API security automated scan in minutes

A Quick Guide to Displaying Text on Images in Flutter

Too Long; Didn't Read

Company Mentioned

@pankajdas

RELATED STORIES