Bottom sheet, showModalBottomSheet, StatefulBuilder y Manejo de estado en Flutter
Veremos como utilizar los Modal de tipo Bottom Sheet en Flutter mediante showModalBottomSheet y algunas consideraciones adicionales.
Por aquí quiero hablarte de cómo puedes implementar tu Bottom sheet, que viene siendo este diálogo que aparece de la parte usualmente de abajo para mostrar un contenido dependiendo de la ventana por ejemplo as es más chiquita en este caso no tengo abierto un emulador aparece de esta forma que creo que sería la más tradicional ocupando el tamaño de la pantalla pero si tenemos una pantalla un poco más grande como en este caso simplemente ocupa un trozo de la pantalla esto creo que se puede personalizar el tamaño.
Implementación
FloatingActionButton(
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return _bottomSheetFilter();
},
);
},
child: const Icon(Icons.filter_alt_rounded),SingleChildScrollView _bottomSheetFilter() {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: StatefulBuilder(
// height: 200,
// color: Colors.white,
builder: (BuildContext context, setState) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: [
const SizedBox(
height: 20,
),
Text(LocaleKeys.filters.tr(),
style: Theme.of(context)
.textTheme
.displayMedium!
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(
height: 10,
),
TextField(
controller: _searchController,
textInputAction: TextInputAction.search,
onSubmitted: (value) {
setState(() {
_dataList();
setState(() {});
});
},
decoration: InputDecoration(
labelText: LocaleKeys.searchPost.tr(),
// labelText:
// 'Buscar publicación... (Enter para enviar)',
border: const OutlineInputBorder(),
),
),
ListTile(
leading: const Icon(Icons.language, color: Colors.purple),
title: const Text('Solo en español'),
trailing: Switch.adaptive(
value: _postOnlyLang == 'spanish',
activeColor: Colors.purple,
onChanged: (value) {
_postOnlyLang = 'spanish';
_dataList();
setState(() {});
}),
),
ListTile(
leading: const Icon(Icons.language, color: Colors.purple),
title: const Text('Only in english'),
trailing: Switch.adaptive(
value: _postOnlyLang == 'english',
activeColor: Colors.purple,
onChanged: (value) {
_postOnlyLang = 'english';
_dataList();
setState(() {});
}),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
height: 1, color: Theme.of(context).primaryColor),
),
ListTile(
leading: const Icon(Icons.list, color: Colors.purple),
title: Text(LocaleKeys.categories.tr()),
),
Wrap(
spacing: 1,
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.start,
children: categories
.map((c) => TextButton(
child: Text(
c.title,
style: TextStyle(
color: _categoryId == c.id
? Colors.purple
: Theme.of(context)
.colorScheme
.secondary,
fontWeight: _categoryId == c.id
? FontWeight.bold
: FontWeight.w500),
),
onPressed: () {
if (_categoryId == c.id) {
_categoryId = 0;
} else {
_categoryId = c.id;
}
_dataList();
setState(() {});
},
))
.toList(),
),
],
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(LocaleKeys.close.tr()),
),
],
),
),
),
),
);
}El caso es cómo lo puedes crear es muy sencillo realmente aquí como puedes ver yo lo tengo asociado al botón flotante que tenemos en nuestro scaffold entonces con eso aclarado por aquí tengo mi botón flotante en este caso Yo estoy empleando un Switch personalizado ya luego esto te hablo en otro video de por qué lo creo o para qué lo estoy utilizando Lo importante es que aquí estamos empleando este flatting action Button que es este botón que tenemos acá para desplegar nuestro Bottom sheet y cómo lo hacemos para eso aquí tenemos un método llamado showModalBottomSheet, es decir ya lo tenemos de gratis ya existe la ap de lo que sería Flutter tal cual puedes ver y simplemente lo tenemos que utilizar qué recibe el contexto y el builder como puedes ver Es algo similar a lo que sería el ListView de tipo builder si le quitamos el contexto que no es recibido por el ListView de tipo builder y por aquí retorna tal cual puede suponer es un widget que no sé cómo marcarlo acá pero esto es un widget qué es lo que puedes ver por acá en este caso yo lo empaqueté de esta forma para que quede más modularizado pero esto realmente es un widget tal cual puedes ver lo toma perfectamente pero x ya lo dejo así y por aquí lo que tú quieras hacer depende de ti puedes mostrar cualquier contenido por lo tanto no tiene ninguna implementación así muy complicada por decirlo de alguna manera bien yo aquí lo que coloqué fue el SingleChildScrollView para precisamente el tema del scroll si tenemos mucho contenido no se rompa etcétera ya tú sabes el porqué de esto si no le defense hay un tamaño fijo ahorita te explico el porqué de esto y por aquí yo tengo es mi filtro que era el que te comentaba otra vez en otro video aquí puedes colocar nuevamente cualquier contenido entonces puntos importantes que tenemos aquí aquí el bor sheet se comporta como si fuera una página adicional a qué me refiero con esto aquí yo tengo una página si entro en esta página aquí es otra página completamente distinta que tiene un estado completamente distinto es decir es otro widget que se encuentra anexo a lo que es el padre que sería en este caso el scaffol.
Páginas y estados
El Bottom sheet se comporta justamente de esa manera como si fuera una página aparte y no como una dependencia de esta a lo que se refiere el estado entonces aquí fíjate cada vez que realizo alguna operación en este caso sería el el textfeld no lo quiero utilizar sería por ejemplo el ListTile que serían el Switch que tengo por aquí que cada vez que lo cambio obviamente aquí vemos el cambio y para que esto suceda bueno obviamente cambio aquí la condición pero para que esto funcione hay que colocar aquí el setState para que actualice el estado de la pagina, en nuestro caso, el Switch y para ello, hay que emplear el widget de tipo StatefulBuilder en la raiz.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter