Flutter stack overlapping each containers

Question

I need to show 2 widgets in my stack widget.

I am doing like this

                              Stack(
                                children: [
                                Container(
                                width: Width * 0.7,
                                height: 75,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(20),
                                  color: Colors.white
                                ),
                                child: Row(
                                  children: [
                                    Column(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        Text('Shop Name Here',style: TextStyle(
                                                            color: Colors.red,
                                                            fontFamily: 'PoppinsMedium',
                                                            fontSize: 14)),
                                        Text('Welcome Back',style: TextStyle(
                                                            color: Colors.red,
                                                            fontFamily: 'PoppinsRegular',
                                                            fontSize: 12)),
                                      ],
                                    ),
                                    Image.asset('images/Avatar.png')
                                  ],
                                ),
                              ),

                              Positioned(
                                left: 0,
                                child: Container(width: 100, height: 60, color: Colors.white,
                                child: Image.asset('images/Icons- Main App Icon.png')
                                ))
                                ],
                              ),

I have giving position to left 0 but its showing in side the first container

Its showing like this

You can see this the ++ 2 icons are showing on the container. I need to show it like this

My question is how can i show position container on half left on first container ?

Answer 1

I did it with the following build method, feel free to play around and ask to optimize it for your needs:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orangeAccent,
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 50),
        child: Stack(
          children: [
            Positioned(
              left: 70,
              child: Container(
                alignment: Alignment.centerRight,
                width: MediaQuery.of(context).size.width * 0.7,
                height: 90,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.yellowAccent),
                child: Padding(
                  padding: const EdgeInsets.all(24.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('Shop Name Here',
                              style:
                                  TextStyle(color: Colors.red, fontSize: 14)),
                          Text('Welcome Back',
                              style:
                                  TextStyle(color: Colors.red, fontSize: 12)),
                        ],
                      ),
                      Image.asset('images/Avatar.png')
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
                left: 20,
                top: 10,
                child: Container(
                  height: 70,
                  width: 100,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.blueGrey),
                  padding: EdgeInsets.all(24),
                  child: Image.asset('images/Icons- Main App Icon.png'),
                )),
          ],
        ),
      ),
    );
  }

I wrapped your other Container with a Positioned widget, added some Padding, updated some height and weight attributes. The final outcome is something like this: https://i.sstatic.net/CGaRb.png