Flutter: How to place Text over an Image

Updated: February 10, 2023 By: Augustus 2 comments

In Flutter, you can place text over an image by using the Stack widget.

Example

Screenshot

The code (without boilerplate)

Stack(
          children: [
            Image.network(
                'https://www.kindacode.com/wp-content/uploads/2020/10/sample.jpg',
                width: double.infinity,
                height: 250,
                fit: BoxFit.cover),
            Positioned(
              // The Positioned widget is used to position the text inside the Stack widget
              bottom: 10,
              right: 10,

              child: Container(
                // We use this Container to create a black box that wraps the white text so that the user can read the text even when the image is white
                width: 300,
                color: Colors.black54,
                padding: const EdgeInsets.all(10),
                child: const Text(
                  'I Like Potatoes And Oranges',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            )
          ],
)

Full source code in main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Kindacode.com"),
        ),
        body: Stack(
          children: [
            Image.network(
                'https://www.kindacode.com/wp-content/uploads/2020/10/sample.jpg',
                width: double.infinity,
                height: 250,
                fit: BoxFit.cover),
            Positioned(
              // The Positioned widget is used to position the text inside the Stack widget
              bottom: 10,
              right: 10,

              child: Container(
                // We use this Container to create a black box that wraps the white text so that the user can read the text even when the image is white
                width: 300,
                color: Colors.black54,
                padding: const EdgeInsets.all(10),
                child: const Text(
                  'I Like Potatoes And Oranges',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            )
          ],
        ));
  }
}

Hope this helps. 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
2 Comments
Inline Feedbacks
View all comments
Flutter Developer
Flutter Developer
3 months ago

Even your example shows the Android version text pushed down a little bit. Can we get it to match the iOS version?

trackback
Flutter: Display Text over Image without using Stack widget | Kindacode
3 years ago

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

Related Articles