Menu
showModalBottomSheet does not provide any styling or decorations. I want to create something like the Google Tasks bottomsheet.
531
Modal bottom sheets can be created and displayed using the showModalBottomSheet function. The showModalBottomSheet has two required properties: BuildContext and WidgetBuilder .
Modal: A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. How to Create Bottomsheet With Circular Corners In Flutter?
What is Bottomsheet In Flutter? The bottom sheet is a material design bottom sheet. There are two kinds of bottom sheets in material design. Persistent: A persistent bottom sheet shows information that supplements the primary content of the app.
The purpose of a modal bottom sheet is to create room for more content in your app. Modal bottom sheets are very common in mobile apps. They are often used to display links to other apps on the user’s mobile device. As mentioned earlier, with a modal bottom sheet, interaction with other elements of the UI is blocked.
There are basically two types of Bottomsheets: Persistent and Modal. Persistent bottomsheet do not hide the screen content and focus on both sides. But Modal bottomsheet focuses more on bottomsheet rather than the main screen content. When the persistent button is tapped then the page will be pushed and the Persistent bottomsheet will be displayed.
You can now do it using the default showModalBottomSheet method that now supports adding a ShapeBorder and also backgroundColor!
showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), backgroundColor: Colors.white, ... ); Instead of overriding the entire theme of the app (which caused problems in various parts of my app) as suggested by other answers, I decided to take a look at the implementation for showModalBottomSheet and find the problem myself. Turns out that all that was needed was wrapping the main code for the modal in a Theme widget that contains the canvasColor: Colors.transparent trick. I also made it easier to customize the radius and also the color of the modal itself.
You can use either the package on pub or a gist containing the same code. Don't forget to import the proper package/file.
showRoundedModalBottomSheet( context: context, radius: 20.0, // This is the default color: Colors.white, // Also default builder: (context) => ???, ); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
