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.

Related article: Placing text over an image with the Stack widget.

Example

The code:

SizedBox(
          width: double.infinity,
          height: 250,
          child: GridTile(
            child: Image.network(
                'https://cdn.pixabay.com/photo/2020/10/09/19/39/utah-5641320_960_720.jpg',
                width: double.infinity,
                height: 250,
                fit: BoxFit.cover),
            footer: Container( // You can use GridTileBar instead
              child: Text(
                'This Is A Beautiful Photo',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              ),
              width: double.infinity,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
              color: Colors.black54,
            ),
          ),
        ),

Output:

Hope this helps 🙂