Flutter: Display Text over Image without using Stack widget

Last updated on February 11, 2022 Augustus 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.

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:

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

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

Thanks

Related Articles