CODEWITHSUNDEEP
flutterflutter-layout
李国兵
李国兵

Reputation: 127

How to make ModalBottomSheet's child Widget protrude at the top like this pic：

How to make ModalBottomSheet's child Widget protrude at the top

like this pic：

enter image description here

Upvotes: 0

Views: 242

Answers (2)

VolcanoCoder
VolcanoCoder

Reputation: 733

Add this line to Stack

overflow: Overflow.visible,

and add negative value to Positioned Widget sample:

Stack(
    overflow: Overflow.visible,  // add this line
    children: [
       Positioned(
          bottom: -150, // negative value
          child: Container(
             height: 80,
             width: 100,
             child: Image.network('https://assets.webiconspng.com/uploads/2017/09/Shopping-Bag-PNG-Image-40241.png'),
             )
       )])

Upvotes: 0

Mobina
Mobina

Reputation: 7109

You can use a Stack to make the shopping bag icon position on top of the modal. The 40 in margin: EdgeInsets.only(top: 40) that is set for the container is half the height of the shopping bag icon.

showModalBottomSheet(
            backgroundColor: Colors.transparent,
              context: context,
              builder: (context) => Stack(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 40),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(30.0),
                        topRight: Radius.circular(30.0),
                        bottomLeft: Radius.zero,
                        bottomRight: Radius.zero,
                      ),
                    ),
                  ),
                  Positioned(
                    left: 50,
                    child: Container(
                      height: 80,
                      width: 100,
                      child: Image.network('https://assets.webiconspng.com/uploads/2017/09/Shopping-Bag-PNG-Image-40241.png'),
                    ),
                  ),
                ],
              ));

Result:

res

Upvotes: 2

Related Questions