Flutter: Display Text over Image without using Stack widget

Last updated on October 21, 2020 The Frog Loading... One comment

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 🙂

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
noshin
noshin
11 months ago

Thanks

Related Articles