How To Display Text Over The Images Using Flutter App

Posted By Bajarangi soft , Posted On 27-11-2020

When working with images, you often need to overlay text or icons on them. Perhaps to show the name of the image, or an icon to favourite it. In Android, the trusted android:background xml attribute does the trick. In iOS, you can add an UIImageView to the bottom of your view hierarchy. But, how can you do that in Flutter?

Text Over The Image

Step 1
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below

flutter: 
  assets: 
   - assets/images/

Complete Code For Text Over The Images In Flutter
main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({this.title});
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        centerTitle: true,
        title: Text('Text Over Image '),
      ),
      body: Center(
        child: Container(
          height: 250,
          width: 200,
          child: Stack(
            children: <Widget>[
              Center(
                child: new Image.asset(
                  'assets/images/image3.jpg',
                  width: size.width,
                  height: size.height,
                  fit: BoxFit.fill,
                ),
              ),
              Center(
                child: Text("Bajarangisoft.com",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                        color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

How To Display Text Over The Images Using Flutter App

Step 1 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 1
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.