Flutter: creación de la biblioteca GetX de Bottomsheet

Bottomsheets son las hojas que se muestran en la parte inferior para mostrar cualquier contenido que queramos mostrar. Normalmente, cuando creamos bottomsheet, la sintaxis para crear es larga y también usa contexto. Para evitar esto, podemos crear una hoja inferior con un código simple con la ayuda de la biblioteca GetX. También podemos crear usando la sintaxis Get.bottomsheet() en el widget sin estado y no hay necesidad de usar el widget con estado para crear la hoja inferior. Así que GetX es muy poderoso en muchos sentidos y nos ayuda mucho en el desarrollo. 

Siga los pasos a continuación para crear una hoja inferior usando GetX:

• Cree una nueva aplicación de Flutter:

flutter create app_name

• Agregue el paquete get al archivo pubspec.yaml:

• Importe el paquete get en el archivo main.dart:

import 'package:get/get.dart';

• Escriba el código en el archivo main.dart para crear la hoja inferior.

Constructor de 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})

Analicemos algunas propiedades de Get.bottomSheet():

• backgroundColor : el color de fondo de la hoja inferior.
• forma : La forma proporcionada a la hoja inferior.
• barrierColor : El color de la barrera que se muestra cuando se abre la hoja inferior.
• isDismissible : cuando queremos cerrar la hoja inferior haciendo clic fuera de la hoja inferior, su valor debe ser verdadero o falso.
• enableDrag : si se establece en false, no podemos arrastrar la hoja inferior. De forma predeterminada, se establece en verdadero.

El archivo main.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,
 
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Explicación:

• El primer paso es crear una aplicación utilizando GetMaterialApp para incluir las funcionalidades de la biblioteca GetX .
• Proporcione inicio como página de inicio().
• Cree Scaffold y en esto, cree AppBar y el cuerpo.
• Cree un botón dentro del cuerpo y luego escriba el código para crear la hoja inferior.
• Get.bottomSheet() se puede crear sin usar el contexto.
• Agregue algunas propiedades a Get.bottomSheet() para hacerlo más hermoso.

Producción:

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,
                );

Cuando se ejecuta el código anterior, la salida es:

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,

                );

Cuando el código anterior se ejecuta con estas propiedades, la salida será: