Create a static list of Widgets in a Wrap/Row based on a list of objects in Flutter
I wanted to show you how you can create a list. In this case, I am not referring to the listviw type list or the builder type listviw, which is the one we are seeing here on the screen:
ListView.builder(
itemCount: bookResponseModel.books.length,
itemBuilder: (_, int position) {
return _itemBook(position, context);listviw builder = RecycleView
Remembering a little, remember that the builder type listView is the equivalent of the RecycleView in native Android and what it does is recycle the items that are not seen on the screen to display them, that is, for example right now we are seeing this, we are up here, if we go down a little, it will hide at some point and when it is already hidden, in principle based on some logic, that same component would be displayed again, what it does is simply change the information because it is down there, that is, it is a little more efficient than simply creating a bunch of lists in memory, it simply reuses what we already have generated there, well, I am not here to talk about that.
listview builder not recommended for static listing
But in this case I am referring to this type of listing that obviously does not require a listView although we could also use it but it would be a little more uncomfortable to display it this way and obviously you would not use a builder type listview because in this case I would think or I believe it would be the most logical that it would be quite inefficient because it is not necessary to maintain, as they say, that process of verifying if this item is not being displayed to hide it just like this listing that we have up here, this listing is also made up of a model that would be a little bit the most interesting although it could also be anything, so how did I build this listing in this case to apply filters is what I want to show you by the way I did this using the bottom sheet which I also already have a video on how to build it there you can see and what I did was the following here I am placing it in Wrap which is what allows me to adapt all this content:
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(),
// children: [
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss555'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss555'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss555'),
// ],
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(LocaleKeys.close.tr()),
),Easily in a stack in this case or by rows one row another row that is a kind of equivalent for what would be the column and what would be the round but this in this case when it gets here to the end it simply angles it down then it does the hard work for me just like what is the Row and what is the Column it also receives what is a widget list understand a children which is what we have here so in this case I have is a list of objects which is what I want to show but again it can be a primitive for example a String which is what I have here I'm going to see if I can place a breakpoint here I'm going to reload the page here to see exactly what category if everything can be understood in a better way I look here for the courses one again okay it was the books one where I placed the point here let's see what it is directly a list with some entity in my case it is what I call categories and here you can see what I want to convert to a button to filter whose video I also already showed you how I made the filter here so it is very simple really as you can see here what I did was use the map method that allows me to map a structure in this case a list of categories of an object to another structure in this case a list of widgets which is exactly what this children that we have here receives a list of widgets which you can see then here we simply obtain the object, the category, the category individually how it works with forage here we iterate it here we have or compose the widget that we want to build in this case it is simply a text Button as you can see here that receives a text that in this case is the text or the message that appears here the one you see let me reload here each one of these items that we have here obviously you can place here whatever you want an icon directly between an image a link any other type of widget what I require in this case is a button so I used this structure that we have here this would return all this obviously a map up to this point and what we need is a list so for that we use the function well the method called to list that allows us to convert those maps to what is directly a list and we place it here directly, so that's how easy it is to build from the same widget, from the same builder method, you could say a widget list based on a list of objects or any other primitive that you want to use.
We can also create widgets based on a list as follows:
List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headlineSmall,
),
);- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter