.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
If you're like me, you've probably loved working with Flutter for crafting stellar apps, thanks to its impressive set of widgets and tools. Today, let’s dive into a powerful widget that can enhance your app's functionality and aesthetic - the Bottom Sheet. Flutter Bottom Sheet is a slide-up panel primarily used for user actions and additional sub-environments within your screen. In this blog, we will discuss two types of bottom sheets: Persistent and Modal.
Often, in our app, we need to display additional content or menus without navigating to a new screen. That's where the bottom sheet comes into play. A bottom sheet is a widget that slides up from the bottom of the screen to display more content. It's more fantastic than a dialog and usually complements the main app content.
The primary role of a bottom sheet in the user interface(UI) is to provide a versatile yet non-intrusive way to present extra options or content to the user. With the clever use of bottom sheets, we can dramatically improve the user experience. They offer an alternative to menus or dialogs and can display complex views or even contain sub-screens.
Flutter offers two types of Bottom Sheets - Persistent Bottom Sheets and Modal Bottom Sheets.
When the user interacts with other elements of the program, the Persistent Bottom Sheet remains visible. They can be dragged up to show more content and are usually found in the app's main menu.
A Modal Bottom Sheet, on the other hand, prevents the user from interacting with the rest of the app until dismissed. Ideal for user actions or to focus attention on vital content, these sheets are "modal" and demand the user's interaction.
As mentioned earlier, a Persistent Bottom Sheet is one that remains displayed on the screen even when users interact with other parts of the app. This allows access to additional app functionalities without obfuscating the primary content on the screen. Now, onto creating our first Flutter Persistent Bottom Sheet.
Creating a Persistent Bottom Sheet in Flutter is pretty simple.
Firstly, we will be needing a Scaffold widget, as the showBottomSheet function is a part of ScaffoldState.
Now, we need to add the Persistent Bottom Sheet. This can be done using the showBottomSheet function, which takes two required properties: context and builder.
1 import 'package:flutter/material.dart'; 2 3 /// Flutter code sample for [ScaffoldState.showBottomSheet]. 4 5 void main() => runApp(const ShowBottomSheetExampleApp()); 6 7 class ShowBottomSheetExampleApp extends StatelessWidget { 8 const ShowBottomSheetExampleApp({super.key}); 9 10 @override 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 home: Scaffold( 14 appBar: AppBar(title: const Text('ScaffoldState Sample')), 15 body: const ShowBottomSheetExample(), 16 ), 17 ); 18 } 19 } 20 21 class ShowBottomSheetExample extends StatelessWidget { 22 const ShowBottomSheetExample({super.key}); 23 24 @override 25 Widget build(BuildContext context) { 26 return Center( 27 child: ElevatedButton( 28 child: const Text('showBottomSheet'), 29 onPressed: () { 30 Scaffold.of(context).showBottomSheet<void>( 31 (BuildContext context) { 32 return Container( 33 height: 200, 34 color: Colors.amber, 35 child: Center( 36 child: Column( 37 mainAxisAlignment: MainAxisAlignment.center, 38 mainAxisSize: MainAxisSize.min, 39 children: <Widget>[ 40 const Text('Hello from Persistent Bottom Sheet'), 41 ElevatedButton( 42 child: const Text('Close BottomSheet'), 43 onPressed: () { 44 Navigator.pop(context); 45 }, 46 ), 47 ], 48 ), 49 ), 50 ); 51 }, 52 ); 53 }, 54 ), 55 ); 56 } 57 } 58
In this bottom sheet example, we have an ElevatedButton on our screen. Once the user taps on this ElevatedButton, a Persistent Bottom Sheet with a height of 200 units will open. A simple 'Hello from Persistent Bottom Sheet' message is displayed on this container and a 'Close BottomSheet' button to close the bottom sheet.
But we can't just stop here, right? Let's make this bottom sheet a bit more interesting by modifying its appearance.
We can improve the appearance of our bottom sheet by playing with padding or by adding widgets.
You can have a padding of 10 units containing an Icon and three Text widgets, making it look like an options menu.
Without a detailed look at the Modal Bottom Sheet, our research of Bottom Sheets in Flutter would be incomplete. A Modal Bottom Sheet is a simple replacement for a menu or dialog that prohibits the user from engaging with the remainder of the program. It is more visually appealing and includes the option to expose more content dependent on user behavior.
Developing a Modal Bottom Sheet in Flutter is pretty straightforward, and in a few steps, you can have your sheet up and running.
Like we discussed earlier, we'll need a Scaffold, since the showModalBottomSheet function is a part of ScaffoldState. Let's set it up.
1 Scaffold( 2 appBar: AppBar( 3 title: "Modal Bottom Sheet Demo" 4 ), 5 body: Center(), 6 ); 7
The next step, feature our Flutter Modal Bottom Sheet. We'll use the showModalBottomSheet function, which also takes the context and builder, similar to the showBottomSheet function we previously used.
1 import 'package:flutter/material.dart'; 2 3 /// Flutter code sample for [showModalBottomSheet]. 4 5 void main() => runApp(const BottomSheetApp()); 6 7 class BottomSheetApp extends StatelessWidget { 8 const BottomSheetApp({super.key}); 9 10 @override 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 home: Scaffold( 14 appBar: AppBar(title: const Text('Bottom Sheet Sample')), 15 body: const BottomSheetExample(), 16 ), 17 ); 18 } 19 } 20 21 class BottomSheetExample extends StatelessWidget { 22 const BottomSheetExample({super.key}); 23 24 @override 25 Widget build(BuildContext context) { 26 return Center( 27 child: ElevatedButton( 28 child: const Text('showModalBottomSheet'), 29 onPressed: () { 30 showModalBottomSheet<void>( 31 context: context, 32 builder: (BuildContext context) { 33 return Container( 34 height: 200, 35 color: Colors.amber, 36 child: Center( 37 child: Column( 38 mainAxisAlignment: MainAxisAlignment.center, 39 mainAxisSize: MainAxisSize.min, 40 children: <Widget>[ 41 const Text('Welcome to Modal Bottom Sheet'), 42 ElevatedButton( 43 child: const Text('Close BottomSheet'), 44 onPressed: () => Navigator.pop(context), 45 ), 46 ], 47 ), 48 ), 49 ); 50 }, 51 ); 52 }, 53 ), 54 ); 55 } 56 } 57
This example displays an ElevatedButton. When the user taps it, a Modal Bottom Sheet with a height of 200 units will open up and display the message 'Welcome to Modal Bottom Sheet' and a 'Close BottomSheet' button to close the bottom sheet.
Customization is the name of the game with Flutter, and our Modal Bottom Sheet is not exempt from this. Let's spice it up a bit.
1 Container( 2 height: 200, 3 padding: EdgeInsets.all(15), 4 color: Colors.blueAccent, 5 child: Column( 6 children: [ 7 Icon(Icons.info_outline), 8 Text('FYI'), 9 Text('Learn more about Modal Bottom Sheet here'), 10 ], 11 ), 12 ); 13
Now our Modal Bottom Sheet has an Icon and two Text widgets. It doesn't just look more vibrant, it now provides some extra info, living up to its purpose.
Flutter packages are a convenient way to slice down development time and reduce the coding workload. They offer pre-built solutions for common functionalities that we can use in our app right away. Today, we'll work with the modal_bottom_sheet package in our Flutter project to create engaging modal bottom sheets.
The modal_bottom_sheet package provides various types of modal bottom sheets like Cupertino modal bottom sheet, bar modal, and material modal. Besides these, you can also create your custom modal bottom sheet.
Let’s start by adding the modal_bottom_sheet dependency to our pubspec.yaml file:
1 dependencies: 2 flutter: 3 sdk: flutter 4 modal_bottom_sheet: ^2.1.2 5
After adding the dependency, run the flutter pub get command.
Now, let's see how we can use this package to create a Material Modal Bottom Sheet.
We can call the showMaterialModalBottomSheet function and pass the required context and builder.
1 showMaterialModalBottomSheet( 2 context: context, 3 builder: (context) => Container(), 4 ) 5
This example will display a RaisedButton, and on tapping it, a Material Modal Bottom Sheet with a height of 200 units will appear, displaying the message 'Welcome to Material Modal Bottom Sheet'.
When and where should we use Persistent Bottom Sheets or Modal Bottom Sheets in a Flutter app? Both types have their own strengths and use cases.
Persistent Bottom Sheets are primarily utilized when we want to offer additional but non-essential options to the user - think of it as an extension of the app's main screen. You could consider using a Persistent Bottom Sheet for a music player app. The bottom sheet can act as a mini-player when contracted, displaying minimal controls. When expanded it shows additional controls and features like the playlist or song lyrics.
On the other hand, Modal Bottom Sheets are more disruptive and purposely so. They hijack the user's attention, unlike persistent sheets, which offer an unobtrusive experience. Modal Bottom Sheets prove useful in situations where you want the user to perform a specific action before continuing — for example, making a choice from several options, or confirming an action.
The implementation of the two bottom sheets in Flutter follows a similar approach yet with one crucial variance: 'the function'. For Persistent Bottom Sheets, we use showBottomSheet, while for Modal Bottom Sheets, we use the showModalBottomSheet function.
Consequently, the behaviour associated with these sheets varies according to the function used. Unlike Modal Bottom Sheets, Persistent Bottom Sheets don't cover the entire screen and can be minimized, allowing interaction with the rest of the screen.
While Flutter allows for extensive customization of both Persistent and Modal Bottom Sheets, we should follow some best practices to ensure a smooth user experience.
When designing a bottom sheet, it's crucial to keep the user at the forefront.
Beyond just UI, performance is a key aspect of any successful app.
Like any other widget in Flutter, bottom sheets can sometimes be tricky to work with. In this section, I will cover a few common issues and their potential solutions.
Problem: You've created a bottom sheet with some interactive widgets (like buttons or forms), but any interaction is not reflected in the bottom sheet.
Solution: Remember, a modal bottom sheet is a new route (screen) in the app. If you want to manage the state of widgets inside the modal bottom sheet, you should create a new StatefulWidget and set it as the child of your modal bottom sheet.
Problem: You want to customize the appearance of the bottom sheet (like width or background color), but any custom style isn't applied.
Solution: Wrap your bottom sheet widget with a Theme widget, and override the canvasColor (for background color) and bottomSheetTheme (for shape, modalElevation).
Problem: You want to prevent the modal bottom sheet to dismiss when the user taps outside the bottom sheet.
Solution: Use the isDismissible property of the showModalBottomSheet function. Set isDismissible: false, it prevents the modal bottom sheet from closing by tapping outside the sheet area.
These are some of the challenges you might face while integrating Bottom Sheets into your Flutter app, and their mitigation measures. Flutter provides a powerful and flexible way to create intuitive and interactive components.
In this blog, we delved into a detailed exploration of bottom sheets in Flutter, showcasing the step-by-step implementation of Persistent and Modal Bottom Sheets, along with using a Flutter package for creating Material Modal Bottom Sheets. Remember, the key to a future-proof Bottom Sheet lies in well-organized content, intuitive design, and smooth performance.
As we reach the end of our journey, there's one final tool I'd like to introduce which can enhance your Flutter development experience – WiseGPT.
WiseGPT is a revolutionary tool built for developers that aids you in writing code for numerous Flutter widgets including, but not limited to, bottom sheets and modal bottom sheets. Not only limited to widgets, WiseGPT also gracefully handles state management, making your development process a breeze.
What makes WiseGPT particularly impressive is its capability to compose code for even the most complex widgets and animations, taking the load off your shoulders. Its prowess extends to creating API endpoint codes, complete with all functions and models, all without a single prompt and mirrors the style of your code.
By integrating WiseGPT into your Flutter projects, you can upscale your app development process and productivity, while also ensuring seamless user experience with structured, efficient widgets like bottom sheets. Embrace the power of WiseGPT along with the flexibility of Flutter, and elevate your app development journey to new heights. Are you excited to infuse the power of WiseGPT into your next Flutter project? So go forth, experiment with this ultimate code assist, and elevate the performance of your app. 💙👩🏻💻
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
