Flutter – Creating Bottomsheet GetX Library

17 May, 2021
Bottomsheets are the sheets displayed at the bottom to show any content which we want to display. Normally, when we create bottomsheet the syntax for creating is long, and it also uses context. To avoid this, we can create bottomsheet with simple code with the help of GetX library. We can create using syntax Get.bottomsheet() in Stateless widget also and there is no necessity to use Stateful widget for creating bottomsheet. So GetX is very powerful in so many ways, and it helps us a lot in the development. 
Follow the below steps to create bottomsheet using GetX :
Create a new Flutter app:
flutter create app_name
Add get package to pubspec.yaml file:
Import get package in main.dart file:
import 'package:get/get.dart';
Write the code in main.dart file to create bottomsheet.
Future<T?> bottomSheet<T>(Widget bottomsheet, 
{Color? backgroundColor, 
double? elevation, 
bool persistent = true, 
ShapeBorder? shape, 
Clip? clipBehavior, 
Color? barrierColor, 
bool? ignoreSafeArea, 
bool isScrollControlled = false, 
bool useRootNavigator = false, 
bool isDismissible = true, 
bool enableDrag = true, 
RouteSettings? settings, 
Duration? enterBottomSheetDuration, 
Duration? exitBottomSheetDuration})
Let’s discuss some properties of Get.bottomSheet():
backgroundColor: The background color of the bottom sheet.
shape: The shape provided to the bottom sheet.
barrierColor: The barrier color displayed when bottomsheet is opened.
isDismissible: When we want to close the bottomsheet by clicking outside of bottomsheet then its value should be true else false.
enableDrag: If it is set false then we cannot drag bottomsheet. By default, it is set to true.
The main.dart file:
Dart
import 'package:flutter/material.dart';import 'package:get/get.dart'; void main() {  runApp(MyApp());} class MyApp extends StatelessWidget {     // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return GetMaterialApp(      title: 'Bottomsheet',      theme: ThemeData(         primarySwatch: Colors.blue,      ),      home: HomePage(),      debugShowCheckedModeBanner: false,    );  }} class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeeksforGeeks Bottomsheet'),        backgroundColor: Colors.green[400],      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            ElevatedButton(              child: Text('Show bottomsheet'),              onPressed: (){                Get.bottomSheet(                   Container(                    height: 150,                    color: Colors.greenAccent,                    child:Column(                      children: [                        Text('Hii 1', textScaleFactor: 2),                        Text('Hii 2',  textScaleFactor: 2),                        Text('Hii 3',  textScaleFactor: 2),                        Text('Hii 4',  textScaleFactor: 2),                      ],                    )                  ),                  barrierColor: Colors.red[50],                  isDismissible: false,                  shape: RoundedRectangleBorder(                    borderRadius: BorderRadius.circular(35),                    side: BorderSide(                      width: 5,                      color: Colors.black                    )                  ),                  enableDrag: false,                 );              },            ),          ],        ),      ),    );  }}
Explanation:
The first step is to build an app using GetMaterialApp to include the functionalities of GetX library.
Provide home as HomePage().
Create Scaffold and in this, create AppBar and body.
Create a button inside the body and then write the code to create bottomsheet.
Get.bottomSheet() can be created without using the context.
Add some properties to Get.bottomSheet() to make it more beautiful.
Output:
Get.bottomSheet(  
                  Container(
                    height: 150,
                    color: Colors.greenAccent,
                    child:Column(
                      children: [
                        Text('Hii 1', textScaleFactor: 2),
                        Text('Hii 2',  textScaleFactor: 2),
                        Text('Hii 3',  textScaleFactor: 2),
                        Text('Hii 4',  textScaleFactor: 2),
                      ],
                    )
                  ),
                  barrierColor: Colors.red[50],
                  isDismissible: false,
                );
When the above code is executed, the output is:
Get.bottomSheet(  
                  Container(
                    height: 150,
                    color: Colors.greenAccent,
                    child:Column(
                      children: [
                        Text('Hii 1', textScaleFactor: 2),
                        Text('Hii 2',  textScaleFactor: 2),
                        Text('Hii 3',  textScaleFactor: 2),
                        Text('Hii 4',  textScaleFactor: 2),
                      ],
                    )
                  ),
                  barrierColor: Colors.red[50],
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(35),
                    side: BorderSide(
                      width: 5,
                      color: Colors.black
                    )
                  ),
                  enableDrag: false,

                );
When the above code is executed with these properties, the output will be:
surinderdawra388
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ListView Class in Flutter
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter Tutorial
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget