Bottom sheet, showModalBottomSheet, StatefulBuilder and State Management in Flutter
Here I want to talk to you about how you can implement your Bottom sheet, which is this dialog that usually appears from the bottom to show content depending on the window, for example if it is smaller in this case I don't have an emulator open it appears in this way that I think would be the most traditional one, taking up the size of the screen, but if we have a slightly larger screen like in this case it simply takes up a piece of the screen, I think the size can be customized.
Implementation
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()),
),
],
),
),
),
),
);
}The thing is how you can create it is very simple really here as you can see I have it associated with the floating button that we have in our scaffold so with that clarified here I have my floating button in this case I am using a custom Switch and then I will tell you in another video why I create it or what I am using it for The important thing is that here we are using this flatting action Button which is this button that we have here to display our Bottom sheet and how we do it for that here we have a method called showModalBottomSheet, that is, we already have it for free the ap of what would be Flutter already exists as you can see and we simply have to use it which receives the context and the builder as you can see It is something similar to what would be the ListView of the builder type if we remove the context that is not received by the ListView of the builder type and here it returns as it can be supposed it is a widget that I do not know how to mark it here but this is a widget what you can see here in this case I packaged it in this way so that it is more modularized but this really is a widget as you can see it takes it perfectly but x already left it like that and here what you want to do is up to you, you can show any content therefore it does not have any implementation so very complicated to put it in some way well here what I placed was the SingleChildScrollView precisely for the issue of the scroll if we have a lot of content it does not break etcetera you already know why of this if not defense there is a fixed size right now I will explain why of this and here I have my filter which was the one I was telling you about again in another video here you can place any content again so important points that we have here here the border sheet behaves as if it were an additional page what do I mean by this here I have a page if I enter this page here it is another completely different page that has a completely different state, that is to say it is another widget that is attached to what is the parent which would be in this case the scaffold.
Pages and state
The Bottom sheet behaves exactly that way as if it were a separate page and not as a dependency of it, what the state refers to is, so here you see, every time I perform an operation, in this case it would be the textfield, I don't want to use it, it would be for example the ListTile, which would be the Switch that I have here that every time I change it, obviously here we see the change, and for this to happen, well obviously I change the condition here, but for this to work, you have to place the setState here to update the state of the page, in our case, the Switch, and to do this, you have to use the StatefulBuilder type widget in the root.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter