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

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

Make resilience your competitive advantage

A Quick Guide to Displaying Text on Images in Flutter

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

105 Stories To Learn About Ios App Development

10 Things to check on Android code reviews

10 good rules for bad App

The Noonification: Accelerating Android Application Development With the ADB Idea Plugin (10/12/2022)

11 Tips to Save Time on App Development & Launch Processes

105 Stories To Learn About Ios App Development

10 Things to check on Android code reviews

10 good rules for bad App

The Noonification: Accelerating Android Application Development With the ADB Idea Plugin (10/12/2022)

11 Tips to Save Time on App Development & Launch Processes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps