How to create a bottom sheets in Flutter like in (Instagram,snapchat)

Viewed 311

Can anyone tell how to create this type of bottom sheet . Specifically how to add the notch on the top of the sheet Thanks in advance:)This is how i need it

2 Answers

You can make the BottomSheet's shape round using the shape parameter of showModalBottomSheet (code from other SA answer):

showModalBottomSheet(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(5.0),
  ),
  ...
);

It might already work to simply put the contents of the sheet inside a column, starting with a simple rectangle that can act like the notch. AFAIK there's no built-in way to do this.

If that doesn't place it high enough, I explained as a response to another question earlier how to overlay a shape, in that case a FAB, on top of the sheet, by creating a scaffold inside the sheet. You could do something similar as well.

Related