How to put a container on top of an image on Flutter-CodePudding

Sorry for the bad sketch, but I just wanted to make my idea clearer, so let's say I have an image, (black rectangle), and over this picture I want to have a container (yellow rounded rectangle), and between the two I want to have a third container (white), I also don't want the parts of the image outside of the yellow frame to appear

CodePudding user response：

I think what you are looking for is Stack. Stack let you lay out widgets above each other. So for example in your case you would create something like this:

Stack(
  children: [
    Image.asset('example'),
    Container(
      color: Colors.yellow,
    ),
    Container(
      color: Colors.white,
    )
  ],
)

of course with specific decoration for the containers.

CodePudding user response：

If you want to put Container() in center of an image then use below code :

Stack(
  children: [
    Image.asset(...),
    Positioned.fill(
      child : Container(...),
    ),
])

Or, you can give value of top, bottom, left and right in Positioned() widget.

CodePudding user response：

Try using Container Box Decoration Property for background image and place your inner widget in child

Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    image: const DecorationImage(
                        image: AssetImage( //TODO: Place your image here
                          'assets/dummy/projects_dummy.webp',
                        ),
                        fit: BoxFit.cover)),
                child: InnerChildWidget() //Add your inner child here
              ),

CodePudding user response：

Stack(
          children: [
            Center(
              child: Container(
                width: 70,
                height: 70,
                color: Colors.red,
              ),
            ),
            Center(
              child: Container(
                width: 50,
                height: 50,
                color: Colors.yellow,
              ),
            ),
            Center(
              child: Container(
                width: 30,
                height: 30,
                color: Colors.green,
              ),
            ),
            Center(
              child: SvgPicture.asset(
                "assets/Doctor1.svg",
                height: 10,
                width: 10,
              ),
            )
          ],
        ),


[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/opppw.png