Flutter – Creating Bottomsheet GetX Library

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.

Constructor of Get.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: