Tabla de Contenido
Introducción
En esta ocasión veremos sobre un widget que nos sirve para mostrar contenido en la parte inferior de la pantalla que se sobrepone a la actual, como algo secundario a la información principal.
Bottom Sheet
Los BottomSheet son una especie de modal que se muestra desde la parte inferior de la pantalla hacía arriba, dependiendo del tamaño dado. Muestra contenido secundario dentro de ese espacio. En español sería algo como hojas inferiores.
Uso
- Es recomendado utilizar el Bottom Sheet solo para contenido adicional o secundario.
- Recomendado utilizarlo en tamaño mediano, que no pase la mitad de la pantalla.
- Tienen una apariencia para hacerlas desaparecer o esconder con facilidad del contenido principal.
- También se puede usar para mostrar acciones adicionales como compartir por ejemplo.
- Otro uso que tiene es mostrar listados con íconos y texto.
Tipos
Hay dos tipos de BottomSheet:
Estándar: Es una hoja inferior persistente para mostrar contenido adicional como dijimos anteriormente, puede permanecer persistente mientras se interactúa con otra parte de la aplicación. Se puede mostrar con la funciónScaffoldState.showBottomSheeto utilizando directamente la propiedadbottomSheetdel widgetScaffold.Modal: Es una alternativa a los diálogos o menús, se pueden mostrar con la función de FluttershowModalBottomSheet.
Constructor
BottomSheet: Constructor estándar para crear unBottomSheet, por lo general se utilizan las opciones que se nombraron en los tipos anteriormente.
Propiedades
animationController: es el controlador de animación del widget, animaciones de entrada y salida.backgroundColor: es el color de fondo delBottomSheet.builder: es una propiedad para construir el contenido de la hoja.constraints: con esta propiedad se puede definir el tamaño delBottomSheet.elevation: propiedad para determinar la elevación que tendría la hoja sobre la pantalla principal.enableDrag: si la propiedad estrue, se puede mover el widget sobre la pantalla.onClosing: es una función que se llama cuando se va cerrando elBottomSheet.onDragEnd: funciona de la mano con elenableDragy se llama cuando se empieza a mover elBottomSheet.onDragStart: funciona de la mano con elenableDragy se llama cuando se empieza a mover de forma vertical.shadowColor: propiedad para cambiar el color de la sombra que deja el widget al tener elevación.shape: es la propiedad para ver la forma que tendrá elBottomSheet.showDragHandle: propiedad para activar la barra en el medio para dividir el modal.
Ejemplo
import 'package:flutter/material.dart';
class BottomSheetScreen extends StatelessWidget {
const BottomSheetScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Bottom Sheet Screen'),
),
body: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BottomSheetModal(),
BottomSheetModal2(),
BottomSheetModal3()
],
),
),
);
}
}
class BottomSheetModal extends StatelessWidget {
const BottomSheetModal({
super.key,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return SizedBox(
height: 200,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.share_outlined),
),
const Text('Compartir')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.delete_outline),
),
const Text('Eliminar')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.edit_note_outlined),
),
const Text('Editar')
],
),
],
),
);
},
);
},
child: const Text('Mostrar BottomSheet con íconos'),
);
}
}
class BottomSheetModal2 extends StatelessWidget {
const BottomSheetModal2({
super.key,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showBottomSheet(
context: context,
showDragHandle: true,
builder: (context) {
return SizedBox(
height: 200,
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Mostramos información permanente sobre un BottomSheet.'
'Puede seguir interactuando con la pantalla.'),
const SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Cerrar'),
),
],
),
),
);
});
},
child: const Text('Mostrar BottomSheet Estándar'),
);
}
}
class BottomSheetModal3 extends StatelessWidget {
const BottomSheetModal3({
super.key,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showModalBottomSheet<void>(
showDragHandle: true,
context: context,
builder: (BuildContext context) {
return SizedBox(
height: 200,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Row(
children: [
Checkbox(
value: false,
onChanged: (value) {},
),
const Text('Tendencia')
],
),
Row(
children: [
Checkbox(
value: false,
onChanged: (value) {},
),
const Text('Prioridad')
],
),
Row(
children: [
Checkbox(
value: false,
onChanged: (value) {},
),
const Text('Más vistos')
],
),
],
),
const Divider(
color: Colors.black,
),
Row(
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.share_outlined),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.add_outlined),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.delete_outline),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.download_outlined),
),
],
),
],
),
);
},
);
},
child: const Text('Mostrar BottomSheet con división'),
);
}
}
Conclusión
En conclusión, el widget BottomSheet, es muy útil para mostrar acciones adicionales al usuario que le permitan accionar de forma más rápida dentro de la misma pantalla.
¡Gracias por leer!
