Flutter : Listview filter to create another list

user_18348062 0
Viewed 121

I'm sorry but I'm new to this language I made a page with three sections The first section is for all servers, the second section is for free servers, and the third section is for free servers I used listview.builder with Getx and created a list of all servers But I don't know how to show only free servers or paid servers only The only thing I did was show all servers And I don't want to create three separate lists for the three sections I want one list and do a view according to each section enter image description here

controller

var servers = List.from([
    {
      'name' : 'Singapore',
      'flag' : 'assets/images/flags/singapore.png',
      'cnumber' : 7,
      'isvip' : false
    },
    {
      'name' : 'United States',
      'flag' : 'assets/images/flags/usa.png',
      'cnumber' : 3,
      'isvip' : true
    },
    {
      'name' : 'Netherlands',
      'flag' : 'assets/images/flags/netherlands.png',
      'cnumber' : 8,
      'isvip' : false
    },
    {
      'name' : 'Argentina',
      'flag' : 'assets/images/flags/argentina.png',
      'cnumber' : '2',
      'isvip' : false
    },

  ]).obs;

I use a variable (isvip) to create a paid subscription icon But I don't know how to use it to filter it to another list

flutter-layout flutter
1 Answers

I believe you're trying to make two lists, one for free servers and one for non-free servers? If so, give the following a go:

Firstly, make a new class (custom "server" object) like so:

class Server{
  String name;
  String flag;
  int number;
  bool isVIP;

  Item({required this.name, required this.flag, required this.number, required this.isVIP});
}

Next, change your servers to be a list that uses your server item:

var servers = [
    Server(
        name: "Singapore",
        flag: "assets/images/flags/singapore.png",
        number: 7,
        isVIP: false),
    Server(
        name: "United States",
        flag: "assets/images/flags/usa.png",
        number: 3,
        isVIP: true),
  ];
// The rest of your items, and add new items by doing:
// servers.add(Item(...));

Lastly, you can query the list by doing the following:

List<Item> vipServers = [];
setState(() {
      vipServers = (servers.where((element) => element.isVIP)).toList();
    });
// You can query the list by any of your server objects fields by changing the 
// "element.isVIP"

Edit: Just realised I missed part of your question. For changing the Listview, you can do the following:

Set a new List<Server> currentServerList and whenever you need to change which servers are being seen - for example, when a user clicks "Free Servers" simply do:

setState(() {currentServerList = (servers.where((element) => !element.isVIP)).toList();});

and have your ListView like this:

ListView(
          children: List.generate(currentServerList.length, (index) {
            return Text(currentServerList[index].name);
            // Whatever you wish to do inside your listview.
          }),
        ),

Edit Edit (see comments):

You can make a list of VIP servers by doing:

List<Server> vipServers = [];
setState(() {
      vipServers = (servers.where((element) => element.isVIP)).toList();
    });
// You can query the list by any of your server objects fields by changing the 
// "element.isVIP"

And you can make a list of free servers by doing:

List<Server> freeServers = [];
setState(() {
      vipServers = (servers.where((element) => !element.isVIP)).toList();
    });
// note the "!element.isVIP" meaning, where it is NOT isVIP.

You can merge these by doing

List<Server> allServers = vipServers + freeServers;
user_126269440
Related