Flutter – Display Text Over the Image

In this article, we will implement How the set the text on over the Image in Flutter. A sample image is given below to get an idea about what we are going to do in this article.

Approach

In Data structure everyone knows the stack linear data structure, Stack is nothing just placing an item one over the other. Same here we will use the stack widget that allows us to set the multiple children one over the other. Stack widget that set it child one over the other.

Example:

Stack(
     children: [
       Container(), // First child
       Container(),  // Second child
     ],
   ),

Here, the container is placed over the other as we are using the stack widget.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}

Step 3: Now we have to make a stateless widget RunMyApp Because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
  return MaterialApp(home:);
}
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. Body contains the Centered Stack widget allows to have multiple widgets. Stack has two child containers, the First container takes the image and the second container takes the text widget, which is set over the image.

Center(
   child: Stack(  // stack widget that set it child one over the another.
     children: [  // first child
       Container(
         alignment: Alignment.center,
         child: Image.asset(
           'assets/s2.png',
           height: 250,
           width: double.infinity,
           fit: BoxFit.cover,
         ),
       ),
       Container(  //second child
           alignment: Alignment.center,
           child: Text(
             'Text Over the Image',
             style: TextStyle(color: Colors.white,
                 fontWeight: FontWeight.bold,
                 fontSize: 22.0),
           )),
     ],
   ),
 ),
) ,

Final Code

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
  appBar: AppBar(
    title: Text("Text Over Image"),
  ),
  body: Center(
    child: Stack(
      children: [
        Container(
          alignment: Alignment.center,
          child: Image.asset(
            'assets/s2.png',
            height: 200,
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        ),
        Container(
            alignment: Alignment.center,
            child: Text(
              'Text Over the Image',
              style: TextStyle(color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 24.0),
            )),
      ],
    ),
  ),
) ,
    );
  }
}

Output