Shahnaz Raheem
Shahnaz Raheem

Reputation: 228

Flutter how can I create a 3 layer stack

I need to show 3 containers but for a column but need to show like they are overlapping

Like this

enter image description here

As you see in the image I need to show 3 widgets Image then this creates a new account title than another container.

My code is just showing an image and the last container I need to know how can I add this middle container as in the image

Stack(
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(top: statusBarHeight * 0.8),
              height: height * 0.4,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(
                    'assets/images/place2.jpg',
                  ),
                  fit: BoxFit.fill,
                ),
              ),
            ),
            SingleChildScrollView(
              child: Padding(

                padding: EdgeInsets.only(top: height * 0.3),
                child: SingleChildScrollView(
                  child: ClipRRect(
                    borderRadius: BorderRadius.only(
                        topRight: Radius.circular(30), topLeft: Radius.circular(30)),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[

                          SizedBox(
                            height: height * 0.031,
                          ),
                          Container(
                            width: width,
                            margin: EdgeInsets.only(left: 10),
                            child: Text(
                              'PLACES',
                              textAlign: TextAlign.left,
                              style: TextStyle(fontSize: 30),
                            ),
                          ),
                          SizedBox(
                            height: height * 0.02,
                          ),

                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                print('back');
              },
              child: Align(
                alignment: Alignment.topLeft,
                child: Container(
                  margin: EdgeInsets.only(left: width * 0.03),
                  padding: EdgeInsets.only(top: statusBarHeight * 2),

                  child: Icon(
                    Icons.arrow_back_ios,
                    size: 25,
                    color: Colors.white,
                  ),
                ),
              ),
            ),



          ],
        )

Upvotes: 0

Views: 620

Answers (1)

Srilal Sachintha
Srilal Sachintha

Reputation: 1405

Try Using 'Stack' widget. Its Similar to a Column but its Stacks its children on top of each other. its featured on Flutter Widget of the Week in Here Read the Usage in Here

Upvotes: 1

Related Questions