Getx Bottomsheet tutorial for beginners

 

Getx Bottomsheet :

Creating a Flutter Getx bottomsheet is explained in this part of the tutorial, we will be creating this widget without using a context.As you are aware of GetX functionality if not may visit our previous tutorials.

Bottomsheet is a widget which can be opened from bottom to top where we can provide menu options using this widget we can save some screen space.

Using GetX we can create a bottomsheet without a context and also you can easily use this with a stateless widget no need for statefulwidget which can increase the performance of the app.

You can customize the data displayed in the bottomsheet just like any other widget you can display list’s, grid view and also any form to collect information from user.

In this tutorial we will be considering a simple example on displaying bottomsheet with the ListTile with a title and icon.

GetX Bottomsheet Video Tutorial :

Go through the below tutorial for more detailed implementation on bottomsheet.

 

pubspec.yaml :

Add the dependency inside the pubspec.yaml and specify the latest version to avoid code conflicts.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

 

main.dart :

Declaring the MyApp()  inside the void main

void main(){
  runApp(MyApp());
}

 

Also let’s declare the bottomsheet using getx we have provided elevation of 20.0 and also provided the below parameters.

We have disabled drag option, provided background color and also shape with rounded corners for the bottomsheet. You can also make use of few more parameters available.

Get.bottomSheet(
  
  elevation: 20.0,
  enableDrag: false,
  backgroundColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(30.0),
      topRight: Radius.circular(30.0),
    )
  )

);

Inside the bottom sheet we will provide a container inside which we have specified ListTile widget in the form of a list.

You can customize the container with different widgets according to your requirements.

Container(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: [
        ListTile(title: Text("Option 1"),
        trailing: Icon(Icons.access_alarms),),
        ListTile(title: Text("Option 2"),
          trailing: Icon(Icons.ac_unit),),
        ListTile(title: Text("Option 3"),
          trailing: Icon(Icons.present_to_all_sharp),),
        ListTile(title: Text("Option 4"),
          trailing: Icon(Icons.keyboard),),
      ],
    ),
  ),
),

Providing the full source code below for GetX bottomsheet implementation.

import 'package:flutter/material.dart';
import 'package:get/get.dart';


void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Getx"),),
        body: Column(
          children: [
            TextButton(onPressed: (){
              Get.bottomSheet(
                Container(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
                        ListTile(title: Text("Option 1"),
                        trailing: Icon(Icons.access_alarms),),
                        ListTile(title: Text("Option 2"),
                          trailing: Icon(Icons.ac_unit),),
                        ListTile(title: Text("Option 3"),
                          trailing: Icon(Icons.present_to_all_sharp),),
                        ListTile(title: Text("Option 4"),
                          trailing: Icon(Icons.keyboard),),
                      ],
                    ),
                  ),
                ),
                elevation: 20.0,
                enableDrag: false,
                backgroundColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30.0),
                    topRight: Radius.circular(30.0),
                  )
                )

              );
            }, child: Text("BottomSheet"))
          ],
        ),
      ),
    );
  }
}

Getx Bottomsheet Output :

This below screen depicts the usage of flutter GetX bottomsheet implementation.

 

If you have any query’s on this tutorial on getx bottomsheet implementation do let us know in the comment section below.If you like this tutorial do like, share this tutorial for more interesting updates.