Press "Enter" to skip to content

Flutter : Text on Image | A Widget on Another – Overlay

A great design is an important part in a good Application on both Android and iOS. In flutter, it’s easy to design layouts but little complicated if you are a beginner.

In this article let’s learn a simple way to place a widget on another widget as overlapping. For example, placing a text on image or placing a text on a container, etc.

Let’s start…

As first, let’s learn how it works…

We can use ‘Stack’ widget for this purpose. As we know the working of stack, in flutter, stack accepts children one by one and last inserted children will be shown at top.

For example, if you place two texts on stack, last placed text will be placed over on previous one.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Overlay Widgets';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: BuildBody(),
      ),
    );
  }
}
class BuildBody extends StatefulWidget {
  @override
  _BuildBodyState createState() => _BuildBodyState();
}

class _BuildBodyState extends State<BuildBody> {
  @override

  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Text("first"),
        Text("Second"),
      ],
    );

  }
}

Output:

Flutter Text on Text overlapping design

Let us place a text on an image. Learn here if you want to know how to add an image into a flutter project.

 Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.asset('images/pavlova.jpg'),
        Text("How are you today?",
        style: new TextStyle(
          fontSize: 20,
          color: Colors.red,
        ) ,),
      ],
    );

  }

Output

flutter Text on Image overlapping

If you want to change the position of the text, then you need to place the text on a container and add ‘padding’ property to the container.

Example

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.asset('images/pavlova.jpg'),
        Container(
          padding: EdgeInsets.fromLTRB(70, 150, 0, 0),
          child: Text("How are you today?",
            style: new TextStyle(
              fontSize: 20,
              color: Colors.red,
            ) ,),
        )

      ],
    );
  }

Output

Text on image with padding space

If you want to centralize the text on image, then use ‘Center’ widget first and place the text as child.

If you want to centralize both image and text, then place everything inside a container with width as approximate width of the image.

Example:

Widget build(BuildContext context) {
    return Container(
          height: 250,
          child: Stack(
            children: <Widget>[
              Image.asset('images/pavlova.jpg'),
              Center(
                  child:  Container(
                    child: Text("How are you today?",
                      style: new TextStyle(
                        fontSize: 20,
                        color: Colors.red,
                      ) ,),
                  )
              )
          ],
          )
        );
  }

Output:

Center Text on image in Flutter

There are many other ways to centralize or align the positions of widget. You can read some of them here.

Be First to Comment

Leave a Reply