how to display text with png in the stack?

Question

i have a problem in my flutter project, as you can see on the picture, I am not able to see my text, placing this text above png pictures does not help. I am able to see my text for a second, before my png photos are uploaded. It is like those photos where always "on top" of my screen, how to place them belowe? Size of a pictures is ofcourse not a problem, the only problem is why i can't see my text.

Scaffold(
      body: SizedBox.expand(
        child: Container(
          color: Colors.red,
          //padding: EdgeInsets.only(left: 10),
          child: FittedBox(
              fit: BoxFit.fitWidth,
              child: Stack(children: [
                Image.asset('assets/images/bigWoman.png'),
                Image.asset('assets/images/bigWomanBlueblueWorld.png'),
                Container(
                  child: Text("my text"),
                ),
              ])),
        ),
      ),
      backgroundColor: Theme.of(context).backgroundColor,
    );

this is what i have:

this is what i want:

my thin picture, when i am not using BoxFit.fitWidth, and this shuld be a problem:

Ravindra S. Patil · Answer 1 · 2021-12-09T11:14:45.717

1

Try below code hope its help to you.

Refer Stack class here

Refer Positioned class here

 return Scaffold(
  appBar: AppBar(
    title: Text('Your Title'),
  ),
  body: Stack(
    children: [
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage(
              'assets/images/6.png',
            ),
          ),
        ),
      ),
      Positioned(
        left: 20,
        bottom: -5,
        child: Container(
          padding: EdgeInsets.all(8),
          child: Text(
            'Put Your Text Here',
            style: TextStyle(
              fontSize: 15,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    ],
  ),
);

Your result screen->

edited Dec 09 '21 at 11:14

answered Dec 09 '21 at 10:11

Ravindra S. Patil

11,757
3
13
40

the problem is that i need to use SizedBox.expand(), to better display my picture, do you have an idea how to use it to have picture on entire screen? I think this line is a problem – Maciek Dec 09 '21 at 10:39
or FittedBox(fit: BoxFit.fitWidth, (...)) – Maciek Dec 09 '21 at 10:40
you want to this image is entire screen? – Ravindra S. Patil Dec 09 '21 at 10:49
yes, entire screen, look on my edids above, i put my thin picture there – Maciek Dec 09 '21 at 11:03
the coment above is solution for my problem, thx for your help and time <3 – Maciek Dec 09 '21 at 11:06
@Maciek please check my updated answer, same as your expected output – Ravindra S. Patil Dec 09 '21 at 11:15

how to display text with png in the stack?

1 Answers1

Linked