Add text in each image case

Hello

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

case

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

https://api.flutter.dev/flutter/widgets/Stack-class.html

hth

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(
backgroundColor: Colors.black,
appBar: AppBar(
centerTitle: true,
title: Text(widget.title),
),
body: Container(
width: 400,
height: 200,
child: Stack(
children: [
Align(
alignment: Alignment(0.0, 0.0),
child: Image.asset(‘assets/image.png’, scale: 2,),
),
Align(
alignment: Alignment(-0.58, 0.0),
child: Text(nb[0].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
),
Align(
alignment: Alignment(-0.35, 0.0),
child: Text(nb[1].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
),
Align(
alignment: Alignment(-0.12, 0.0),
child: Text(nb[2].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
),
Align(
alignment: Alignment(0.12, 0.0),
child: Text(nb[3].toString(), textScaleFactor: 2,style: TextStyle(color: Colors.yellow),),
),
Align(
alignment: Alignment(0.36, 0.0),
child: Text(nb[4].toString(),textScaleFactor: 2, style: TextStyle(color: Colors.yellow),),
),
Align(
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;
(see https://material.io/design/layout/pixel-density.html#pixel-density-on-android).

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.

Hth

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

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