Flutter – Creating Bottomsheet GetX Library

Bottomsheets are the sheets displayed at the bottom to show any content that we want to display. Normally, when we create a bottomsheet, the syntax for creating it is long, and it also uses context. To avoid this, we can create a bottom sheet with simple code with the help of the 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 a bottomsheet using GetX

Step 1 : Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Adding the Dependency

To add the dependency to the pubspec.yaml file, add get as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

dependencies:
    flutter:
        sdk: flutter
    get: ^4.7.2

Now run the below command in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add http get

Step 3 : Import dependencies

Import the material file using the following statement in the newly created file.

import 'package:flutter/material.dart';

Import the below files for the working of the application.

import 'package:get/get.dart';

Step 4 : Working with main.dart

But, before going to code part, we need to discuss about Constructor and Propertoes of Get.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
})

properties of Get.bottomSheet():

main.dart:

import 'package:flutter/material.dart';

// Importing GetX package for state management and routing.
import 'package:get/get.dart'; 

void main() {
    // Entry point of the application.
    runApp(MyApp()); 
}

class MyApp extends StatelessWidget {
  // The root widget of the application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      // Using GetMaterialApp instead of MaterialApp for GetX features.
      title: 'Bottomsheet',
      theme: ThemeData(
        primarySwatch: Colors.blue, // Setting the primary theme color.
      ),
      home: HomePage(), // Setting the default home page of the app.
      debugShowCheckedModeBanner: false, // Hides the debug banner.
    );
  }
}

class HomePage extends StatelessWidget {
  // The main screen of the application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks Bottomsheet'), // Title of the app bar.
        backgroundColor: Colors.green[400], // Background color of the app bar.
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // Centering the column's children.
          children: [
            ElevatedButton(
              child: Text('Show bottomsheet'), // Button text.
              onPressed: () {
                // Action to perform when the button is pressed.
                Get.bottomSheet(
                  // Displays a bottom sheet using GetX.
                  Container(
                    // Container for the bottom sheet content.
                    height: 150, // Fixed height of the bottom sheet.
                    color: Colors.greenAccent, // Background color of the bottom sheet.
                    child: Column(
                      // Column to arrange text widgets vertically.
                      children: [
                        Text('Hii 1', textScaleFactor: 2), // Enlarged text.
                        Text('Hii 2', textScaleFactor: 2),
                        Text('Hii 3', textScaleFactor: 2),
                        Text('Hii 4', textScaleFactor: 2),
                      ],
                    ),
                  ),
                  barrierColor: Colors.red[50], // Color of the barrier (scrim) behind the bottom sheet.
                  isDismissible: false, // Prevents the bottom sheet from being dismissed by tapping outside.
                  shape: RoundedRectangleBorder(
                    // Defines the shape of the bottom sheet.
                    borderRadius: BorderRadius.circular(35), // Rounded corners with a radius of 35.
                    side: BorderSide(
                      // Border settings.
                      width: 5, // Border width.
                      color: Colors.black, // Border color.
                    ),
                  ),
                  enableDrag: false, // Disables dragging to dismiss the bottom sheet.
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

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.

Get.bottomSheet without any Border:

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 with Border:

Get.bottomSheet(
    // Displays a bottom sheet using GetX.
    Container(
        // Container for the bottom sheet content.
        width: double.infinity, // Full width of the screen.
        height: 200, // Fixed height of the bottom sheet.
        color:Colors.green, // Background color of the bottom sheet.
        child: Column(
              // Column to arrange text widgets vertically.
              children: [
                    Text('Hii 1', textScaleFactor: 2), // Enlarged text.
                    Text('Hii 2', textScaleFactor: 2),
                    Text('Hii 3', textScaleFactor: 2),
                    Text('Hii 4', textScaleFactor: 2),
              ],
        ),
    ),
    barrierColor: Colors.red[50], // Color of the barrier (scrim) behind the bottom sheet.
    isDismissible:false, // Prevents the bottom sheet from being dismissed by tapping outside.
    shape: RoundedRectangleBorder(
    // Defines the shape of the bottom sheet.
    borderRadius: BorderRadius.circular(30), // Rounded corners with a radius of 35.
    side: BorderSide(
      // Border settings.
      width: 2, // Border width.
      color: Colors.black, // Border color.
        ),
    ),
    enableDrag:false, // Disables dragging to dismiss the bottom sheet.
);

When the above code is executed with these properties, the output will be:

singh_teekam

Follow

Improve

Article Tags :

• Flutter
• Flutter UI-components