2


So I have this container wrapped inside a container.
Parent container has full screen background image, the child container has icon with border, which is hiding behind parent container background image.
Why is this happening? Is there something like z-index in flutter?
I know I can use other widgets to achieve my goal, but I am new to the flutter & trying to understand the concepts.
So I would appreciate if someone could tell me the reason behind this & a fix as well.

Thanks
enter image description here

home: SafeArea(
    child: Scaffold(
      //body: WeatherScreen()
      body: Container(
        height: double.infinity,
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("assets/images/clear-day.png" ),
              fit: BoxFit.cover
          )
        ),
        child: Container(
          height: double.infinity,
          width: double.infinity,
          alignment: Alignment.center,
          child: Ink(
            decoration: BoxDecoration(
              border: Border.all(width: 4)
            ),
            child: InkWell(
              child: Icon(
                Icons.verified_user
              ),
            ),
          ),
        ),
      ),
    ),
  ),
wordpress user
  • 548
  • 7
  • 24
  • I strongly recommend using stack for this, its specifically made for such cases. If you want to use only container maybe try to swap the contaner's parent with child. – Henok Mar 31 '20 at 14:56
  • I am going through the learning phase & have not reached the stack widget yet, I will read about it later. I am just more curious about why the parent box decoration is overriding the child's box decoration. Is this the normal behavior? Also I cannot set the decoration image to child container as in my real application the child container does not have full width and height. – wordpress user Mar 31 '20 at 15:31
  • If you want me to post an answer with stack let me know then. – Henok Mar 31 '20 at 15:32

0 Answers0