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 Bottom sheets 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 Bottom Sheet:
- 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ón
ScaffoldState.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 Flutter
showModalBottomSheet.
Constructor
- BottomSheet: Constructor estándar para crear un BottomSheet, 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 del BottomSheet.
- builder: es una propiedad para construir el contenido de la hoja.
- constraints: con esta propiedad se puede definir el tamaño del BottomSheet.
- elevation: propiedad para determinar la elevación que tendría la hoja sobre la pantalla principal.
- enableDrag: si la propiedad es true, se puede mover el widget sobre la pantalla.
- onClosing: es una función que se llama cuando se va cerrando el BottomSheet.
- onDragEnd: funciona de la mano con el
enableDragy se llama cuando se empieza a mover el BottomSheet. - onDragStart: funciona de la mano con el
enableDragy 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á el BottomSheet.
- showDragHandle: propiedad para activar la barrita 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 este artículo!!!