Home > Enterprise >  how to display text with png in the stack?
how to display text with png in the stack?

Time:12-10

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: enter image description here

this is what i want: enter image description here

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

CodePudding user response:

Just want to add a small example of Stack Widget

     import 'package:flutter/material.dart';

class StackWidetSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Over Image'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: Image.network(
                'https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg',
                height: MediaQuery.of(context).size.height,
                width: double.infinity,
                fit: BoxFit.cover,
              ),
            ),
            Container(
                alignment: Alignment.center,
                child: Text(
                  'Show text here',
                  style: TextStyle(color: Colors.pink,
                      fontWeight: FontWeight.bold,
                      fontSize: 22.0),
                )),
          ],
        ),
      ),
    );
  }
}

enter image description here

CodePudding user response:

Try below code hope its help to you.

Refer Stack class enter image description here

  • Related