Flutter: Display Text over Image without using Stack widget

In Flutter, we can use the GridTile widget to display text over an image. This method is easier to implement but less customizable than using the Stack widget.

See also: Flutter: How to place Text over an Image with Stack

Example

Screenshot:

The image in the example is from pixabay.com (you can get free beautiful images here).

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Center(
        child: SizedBox(
          width: double.infinity,
          height: 250,
          child: GridTile(
            child: Image.network(
                'https://www.kindacode.com/wp-content/uploads/2022/02/the-road.webp',
                width: double.infinity,
                height: 250,
                fit: BoxFit.cover),
            footer: Container(
              // You can use GridTileBar instead
              child: const Text(
                'This Is A Beautiful Photo',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              ),
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
              color: Colors.black54,
            ),
          ),
        ),
      ),
);

You can find more exciting examples about the GridTile widget in this article.

Further reading:

• Flutter image loading builder example
• Flutter: Caching Network Images for Big Performance gains
• Flutter: Reading Bytes from a Network Image
• Flutter: TextField and Negative Numbers
• Flutter: Text with Read More / Read Less Buttons

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.