CODEWITHSUNDEEP
dartflutter
mrs.bassim
mrs.bassim

Reputation: 479

Making the bottom sheet disappear when tapping outside it

I have a bottom sheet in my page. I want to dismiss it when I click outside of it, how to achieve this?

I'm doing it like this:

return new Directionality(
  textDirection: TextDirection.rtl,
  child: new Theme(
    data: theme,
    child: new Scaffold(
      bottomSheet: Container(
        height: MediaQuery.of(context).size.height / 3 + 35,
        color:
            Color(0x00737373), // This line set the transparent background
        child: Padding(
          padding: EdgeInsets.only(right: 10.0, left: 10.0),
          child: Container(
              height: double.infinity,
              width: double.infinity,
              decoration: BoxDecoration(
                  color: Color(0xcc2BA04F),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16.0),
                      topRight: Radius.circular(16.0))),
              child: ....
              )),
        ),
      ),
      body: 
        ...

If I touched outside the bottom sheet it will not dismiss by default. How to make it disappear when tapping outside of it?

Upvotes: 3

Views: 3875

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267554

Call showBottomSheet() to display the sheet. 

void showBottomSheet() {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: MediaQuery.of(context).size.height / 3 + 35,
        color: Color(0x00737373), // This line set the transparent background
        child: Padding(
          padding: EdgeInsets.only(right: 10.0, left: 10.0),
          child: Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(color: Color(0xcc2BA04F), borderRadius: BorderRadius.circular(20)),
          ),
        ),
      );
    },
  );
}

Upvotes: 7

Related Questions