Add text in each image case


I have an image in Row and I would like add Text in each case how can I do please
Thank you for your help


Hello Carl,
you can use the Stack widget to overlay text and images:


Hello Patrick thank you for your answer.
I used Stack but I dont have the same positioning when I used an other device exemple virtual device and my smartphone device.

Below my script.

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(widget.title),
body: Container(
width: 400,
height: 200,
child: Stack(
children: [
alignment: Alignment(0.0, 0.0),
child: Image.asset(‘assets/image.png’, scale: 2,),
alignment: Alignment(-0.58, 0.0),
child: Text(nb[0].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
alignment: Alignment(-0.35, 0.0),
child: Text(nb[1].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
alignment: Alignment(-0.12, 0.0),
child: Text(nb[2].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
alignment: Alignment(0.12, 0.0),
child: Text(nb[3].toString(), textScaleFactor: 2,style: TextStyle(color: Colors.yellow),),
alignment: Alignment(0.36, 0.0),
child: Text(nb[4].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
alignment: Alignment(0.60, 0.0),
child: Text(nb[5].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
floatingActionButton: FloatingActionButton(
onPressed: newNumber ,
tooltip: ‘Increment’,
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.

Below virtual device and my smartphone
device phone

You are using a single image for the six squares with surrounding rounded border. I’m not an UI expert but I guess your device and the emulator you are using don’t have the same pixel densities;

To avoid misalignments and complicated calculations to align texts, I’d rather build that UI using a single square image, with the text overlay, repeated six time in a row, with a surrounding container to display the magenta rounded border.


Hello Patrick thank you again for your help
Finally I found a solution is not easy I add Positioned for each number

          left: (MediaQuery.of(context).size.width - 253) / 2,
          top: (MediaQuery.of(context).size.height - 108) / 2,
          child: Text(
                textScaleFactor: 2,
               style: TextStyle(color: Colors.yellow),
1 Like