Filter Listview from a local and Internet listing, Search, Switch Flutter
Im going to explain something that I consider very interesting which is the use of filters to excuse the redundancy filter data here in Flutter In this case as you can see obviously this component can be placed anywhere and previously if you have already followed the application a little you should already know that for the part of the posts which is the one I have here the one placed here above What happens is that it is a little obvious that the screens are small and placing so much information in one place can seem a little complicated because in the end the screen is small and the organization of our application is lost a little So I preferred to take advantage of the features that we have here on mobile devices that we can quickly access any part of the application and I placed it here above I say here below on the button Maybe I placed it for that button since due to the thumb issue I think it is more comfortable here but well at least for now it is here it is not much of a problem
So what do we have here Look here we have a very important point These are from the books that even though I have several books they are counted I think they are few that around 15 or 30 books I dont really remember between Spanish and English but it is a certain number of records that is to say it is not like in the posts where I have 1000 records therefore what I mean with all this is that it will be a local sort therefore it will be extremely fast and right now I will also show you how the implementation would be when the sort is not going to be local or rather the filter is not going to be local so here we are going to see what I did
Switch with condition
Note that I have the elements to filter the form elements simply a Style with the little icon and everything else this doesnt matter anymore here I place the switch the switch that is for the part well the switch that we have here if I want it in Spanish or English here notice that they keep changing and this is because it works exactly with the same value with the onlyLang Well here it really doesnt make much sense the term because before it was Spanish but I was cutting it out and now Im seeing that it doesnt make much sense maybe Ill change it But well here what we review both here and here is the language which can be Spanish or English here I think it would be better to use an enumeration but again that is a small application I am going to handle certain languages in particular and obviously it is more comfortable to do it through a String and more efficient it would be a little bit more difficult to say the difference is not a big deal but it handles it here directly with a String so if it is in Spanish which is the value that is obtained here when I click on this then this would be placed here in Spanish and would go to true I think it is not very mysterious again here we place Spanish when We select it and place Spanish here and vice versa here Obviously this will be updated automatically using Set State so that when we press one the other loses its value and we can do this type of toggle:
Filter
Over here as you can see then here by the way This is the one for the posts I mean its from my academy because there I dont have the share one only the one for the languages here it is and there we have the toggle and here part of this We also have the price that works in a similar way since for the price I also use another switch just as you saw with another variable which in this case is free paid So if its free more or less the same then I put it free of course Here Im also putting that I may not select any that is to say if I come here Notice that I can turn it off which doesnt happen here but here I can manage them independently But in the end they are married
Switch with 3 conditions
What happens is that here there is a third condition which is free payment or simply none Unlike this one which I could have also placed Yes but well I like things so here I am handling it this way and that is why here we have a conditional if it is free what I do is the toggle and I turn it off and Well if it is not free the same if it is empty or paid I place free here because I manage there are only three states and this is basically the same but with pay and here as I told you with the value we place here that it is the condition
Local filter
The very simple structure we go with the filter part as I indicated to you it is a local listing therefore it is very simple here what was what I did basically I always use a negation that is to say I see it backwards therefore here what I ask is the denied condition that is to say what should not happen based on the value and here I deny it that is to say if Well if this leaves me here The important thing to notice is always the first condition if this ol liland is different from empty that is to say it has a selected value then here I begin to check what it is and here this one that I place the denied condition since here what I am placing is when it will not be displayed while if it does not enter any of these filters So if it will be displayed
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: StatefulBuilder(
// height: 200,
// color: Colors.white,
builder: (BuildContext context, setState) => Center(
child: Column(
children: [
const SizedBox(
height: 20,
),
Text(LocaleKeys.filters.tr(),
style: Theme.of(context)
.textTheme
.displayMedium!
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(
height: 10,
),
ListTile(
leading: const Icon(Icons.language,
color: Colors.purple),
title: const Text('Solo en español'),
trailing: Switch.adaptive(
value: _onlyLang == 'spanish',
activeColor: Colors.purple,
onChanged: (value) {
_onlyLang = 'spanish';
_filter();
setState(() {});
}),
),
ListTile(
leading: const Icon(Icons.language,
color: Colors.purple),
title: const Text('Only in english'),
trailing: Switch.adaptive(
value: _onlyLang == 'english',
activeColor: Colors.purple,
onChanged: (value) {
_onlyLang = 'english';
_filter();
setState(() {});
}),
),
ListTile(
leading: const Icon(Icons.exposure_zero,
color: Colors.purple),
title: Text(LocaleKeys.free.tr()),
trailing: Switch.adaptive(
value: _freePay == 'free',
activeColor: Colors.purple,
onChanged: (value) {
if (_freePay == 'free') {
_freePay = '';
} else {
_freePay = 'free';
}
setState(() {});
_filter();
}),
),
ListTile(
leading: const Icon(Icons.payments,
color: Colors.purple),
title: Text(LocaleKeys.pay.tr()),
trailing: Switch.adaptive(
value: _freePay == 'pay',
activeColor: Colors.purple,
onChanged: (value) {
if (_freePay == 'pay') {
_freePay = '';
} else {
_freePay = 'pay';
}
setState(() {});
_filter();
}),
),
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;
}
setState(() {});
_filter();
},
))
.toList(),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(LocaleKeys.close.tr()),
),
],
),
),
),
),
);By show then here again I put the denied and that is why here you see the denial because if it were not the denied and it would be when I want to enable it here I would put the true and here I would put that it will be Equal equal for the rest it is a bit the same in the rest of the filters here I put free pay and free Pay is equal equal to free then here I put the conditions in which He should be in this case yes we remove the denied when He should be free which for me is when I put a value of 000 or it is simply not defined but for the commented I deny the condition to indicate when it is going to be hidden since again we are here asking for the condition of free for pay it is basically the same as above as you can see here Well be very careful here with the parentheses here I had to put some parentheses just in case but there it worked for me the same way and for the category exactly the same logic I put the denied here and if it does not enter any of these it means that it can be maintained Then we put a true.
// filters
String _onlyLang = '';
String _freePay = '';
int _categoryId = 0;Here also the little trick apart from the navigation that I think is very easy to understand is that here obviously Book does not have a property called Show therefore I had to create it specifically to be able to filter if I check here eh to see where it is here I created it additionally and it is precisely to manage that logic here I place Show and here too and in all the constructors that was what a small patch did there and finally to filter the data which well is what I am handling currently it has not finished convincing me But well as much as it works and it does not give me that much problem here I have the one called I went to the book I mean for the tutorials here I have the one called well the one you had before Only that here it is called item Book which is the one that allows me to create the element that is to say the visual box that we have here so what I do here is if this is not defined it will not be seen and therefore I simply draw a box of the element so that is why we can see that here they are filtered quickly for example Here I am going to place it is in English if I place it in Spanish Look The English one disappears but it is not that it is removed from the list but simply hidden by a show:
Widget _itemBook(int position, BuildContext context) {
final appModel = Provider.of<AppModel>(context, listen: false);
final book = bookResponseModel.books[position];
if (!book.show) {
return const SizedBox();
}
String image = '';
if (book.post.image != '') {
image = '${BlogHelper.baseUrlImage}${book.post.path}/${book.post.image}';
}
return Column(***ITEM)As you can see and it is basically The good thing here I do not have a free book that is why nothing appears to date and if paid all would appear which are the ones I have to date and by technology a bit the same with javascript ccs python here the rest appear I only have this one in python since the rest of the python I placed them in different categories and this is basically how this works as I told you it does not convince me much But remember that here the subject of the lists with the list builder is being a bit complicated to handle So I also did not want to simply remove elements from the array that is to say to be doing the Push and the Pot every time because it seems a little more inefficient to me and I think that this would be a little more efficient in the same way you can comment on how you would solve this situation something a little more elegant but again at least for the moment it is what has occurred to me so this is how this works this again is a local listing and that is why you see that everything works extremely fast now the thing changes a little when it is a list that changes for example in the posts that I have many posts I have been writing for years post obviously I dont bring all 1000 posts or more that I have defined here at once but I simply bring the latest ones and when it reaches the last one then it brings the rest of the publications as you can see it reaches the end well it arrives and it brings more and more here it reached the end and it is loading more here I should put a loading icon I will put it later remember that I am still developing the application but that is what it is doing therefore I am not going to filter on what I have locally
Remote or Internet filter
Otherwise it would be on the whole and therefore it is a filter that I perform on the server therefore here again it would not be called a local function but it would be good for the server So for the rest here I also have the Well later I will explain to you about the shic button in another video or similar filters here it would be by a search field but again that matters little Because it is done on the server and here obviously I have nothing paid or free because they are completely open publications problems more or less the same here so here in the organization does not change much Here Notice that I am no longer calling a filter call but this I use it is like the initial query to obtain my data the data that I am going to show well This do not pay attention to it This is for the next page and so on that is not the case but here you can see that I am asking for the filters the post or lilan and the share which are the ones I have here the filters that I have defined here these two the categories that are a little further down here is the category so it is more or less the same but in this case I am calling to a method of help that I here as:
_dataList() async {
bookResponseModel = await AcademyHelper.getMyBooks(appModel.userToken);
}To get the paginated list of the posts then in a few words what it is doing is every now and then a request to the server to simply get the paginated list based on the users selection that simple that is the small difference the good thing about this is that it is more or less transparent to you here I show you a little bit of the query it is simply the parameters and over here Well I do some checks to define whether I am going to pass the data or not since I do not want to be passing empty data to review it on the server if it is not present here then I do not attach it as part of the Data and I make the request to my server that would be practically everything for the rest here I finally get a list and at the end I do a setState State Well here I have another little thing that the tests that I am doing to see if it is mounted I do a sec State But at the end it does a sec State something sec State and paints the data in this case if I were doing well completely rewriting the list of publications but it is for what was commented before because I have many posts then I cannot bring them all at once because it would be extremely inefficient So what I do is to set the data to see if it is set up I handle it a little differently otherwise this same filter I also implemented it in the tutorials in the Academy part or in the courses and it works in a similar way to the books Only here it would be a little more simplified since well the date I am not speaking English at least not fluently and therefore I do not have any course spoken in English and therefore I do not have a filter to search for courses in English but otherwise here I also have the list of categories and if it is free or not and here I do have free content for example this one from YouTube in case you do not see it there you can see that it is from the previous Laravel 10 course place no lie this is the one from the est is the Live version of the course that I have to date of Laravel the one from YouTube is down here that I think has the wrong title now that I am watching But well that is another topic so well that is how the filters work anything you can comment and what you would change from my implementation and without further ado we will see each other in another video
I agree to receive announcements of interest about this Blog.
We will see how to filter lists with ListView or another in Flutter.
- Andrés Cruz