Flutter – Hoja inferior modal

La hoja inferior modal es una alternativa a un menú o un cuadro de diálogo y evita que el usuario interactúe con el resto de la aplicación. Aparecerá sobre la interfaz de usuario para que no haya necesidad de navegar a una página diferente. Se puede usar para realizar una pequeña tarea que no requiere que se construya toda la pantalla nueva.

Constructor:

Future<T> showModalBottomSheet <T>(
{@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
Color barrierColor,
bool isScrollControlled: false,
bool useRootNavigator: false,
bool isDismissible: true,
bool enableDrag: true,
RouteSettings routeSettings}
)

Propiedades:

• constructor: Un constructor para el contenido de la hoja.
• backgroundColor: para mostrar el color de fondo.
• elevación: eleva el snackbar aumentando la sombra.
• shape: Forma de la hoja inferior modal.
• clipBehavior: el contenido se recortará de acuerdo con esta opción.
•  barrierColor: Color para mostrar en el fondo después de que se muestre la hoja inferior modal.
• isScrollControlled: activa o desactiva el desplazamiento.
•  useRootNavigator: el parámetro useRootNavigator garantiza que el navegador raíz se use para mostrar BottomSheet cuando se establece en verdadero.
•  isDismissible: especifica si el usuario puede descartar la hoja inferior modal tocando la malla.
•  enableDrag: el parámetro enableDrag especifica si la hoja inferior se puede arrastrar hacia arriba y hacia abajo y descartarla deslizando hacia abajo.
•  routeSettings: Establece los RouteSettings de la hoja inferior modal.

Nota: El contexto y el constructor tienen la clase @required aplicada, lo que significa que estos parámetros son de uso obligatorio. 

Implementación:

Archivo: main.dart 

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: const ModalBottomSheetDemo(),
      ),
    );
  }
}
 
class ModalBottomSheetDemo extends StatelessWidget {
  const ModalBottomSheetDemo({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          // when raised button is pressed
          // we display showModalBottomSheet
          showModalBottomSheet<void>(
            // context and builder are
            // required properties in this widget
            context: context,
            builder: (BuildContext context) {
              // we set up a container inside which
              // we create center column and display text
 
              // Returning SizedBox instead of a Container
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const <Widget>[
                      Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
 
      // RaisedButton is deprecated and should not be used
      // Use ElevatedButton instead.
 
      // child: RaisedButton(
      //     child: const Text('showModalBottomSheet'),
      //     onPressed: () {
 
      //     // when raised button is pressed
      //     // we display showModalBottomSheet
      //     showModalBottomSheet<void>(
 
      //         // context and builder are
      //         // required properties in this widget
      //         context: context,
      //         builder: (BuildContext context) {
 
      //         // we set up a container inside which
      //         // we create center column and display text
      //         return Container(
      //             height: 200,
      //             child: Center(
      //             child: Column(
      //                 mainAxisAlignment: MainAxisAlignment.center,
      //                 children: <Widget>[
      //                 const Text('GeeksforGeeks'),
      //                 ],
      //             ),
      //             ),
      //         );
      //         },
      //     );
      //     },
      // ),
    );
  }
}

Producción:

Explicación: aquí hemos creado 2 widgets sin estado donde el primer widget sin estado se usa para construir nuestra pantalla principal usando la aplicación material. En el primer widget sin estado, hemos definido nuestra barra de aplicaciones dentro del andamio y llamamos a nuestro segundo widget sin estado. 

En el segundo widget sin estado, estamos creando contenido dentro de nuestra pantalla principal. Aquí creamos un botón elevado llamado showmodalbottomsheet button. Cuando lo presionamos, muestra la hoja inferior modal dentro de la cual agregamos la propiedad del constructor que muestra el texto geeksforgeeks dentro de la columna.

Aplicando diferentes propiedades:

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: const ModalBottomSheetDemo(),
      ),
    );
  }
}
 
class ModalBottomSheetDemo extends StatelessWidget {
  const ModalBottomSheetDemo({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Center(
      // REPLACED: RaisedButton class with Elevated button class.
      // Raisedbutton is deprecatred and shouldn't be used.
       
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          // adding some properties
          showModalBottomSheet(
            context: context,
            // color is applied to main screen when modal bottom screen is displayed
            barrierColor: Colors.greenAccent,
            //background color for modal bottom screen
            backgroundColor: Colors.yellow,
            //elevates modal bottom screen
            elevation: 10,
            // gives rounded corner to modal bottom screen
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            builder: (BuildContext context) {
              // UDE : SizedBox instead of Container for whitespaces
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const <Widget>[
                      Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Producción:

Explicación: en el código anterior, agregamos algunas propiedades como barrierColor , backgroundColor , forma y elevación.