CODEWITHSUNDEEP
flutter
Saffron-codes
Saffron-codes

Reputation: 188

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

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

Upvotes: 1

Views: 1160

Answers (2)

fravolt
fravolt

Reputation: 3001

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.

Upvotes: 0

Csisanyi
Csisanyi

Reputation: 895

I'm not 100% about the notch on the top, but flutter has a Material Design BottomSheet class.

Here is how to implement it https://api.flutter.dev/flutter/material/showModalBottomSheet.html

Upvotes: 1

Related Questions