Flutter: How to place Text over an Image

Last updated on February 11, 2022 Augustus Loading... One comment

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
1 Comment
Inline Feedbacks
View all comments
trackback
Flutter: Display Text over Image without using Stack widget | Kindacode
2 years ago

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

Related Articles