title: Flutter: Sorting ListView items based on type
body: <p>So I have a listview.builder in my Project management app in Flutter. This listview is filled with tasks(they can be: new, started, done). I get this data from an API and want the ones that are "new" to appear at the top, the ones that are started to be in the middle and the bottom for the "done" ones! - <a href="https://i.stack.imgur.com/EGbiB.png" rel="nofollow noreferrer">This is how it looks right now</a>
  This is my <em>Class</em>, notice that I get the state from the API/JSON</p>
  
  <pre><code>class ProjectTask {
  final int id;
  final String description;
  final String state;
  final List assigned_users;
  final List subtasks;
  
  ProjectTask(this.id,
    this.description,
    this.state,
    this.assigned_users,
    this.subtasks);
  }
  </code></pre>
  
  <p>The ListView</p>
  
  <pre><code>else return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
  
            if(snapshot.data[index].state == "done") {
              return Slidable(
  
                //SLIDABLE STUFF
                delegate: SlidableStrechDelegate(),
                actionExtentRatio: 0.25,
                actions: &lt;Widget&gt;[
  
                  //ACTION ONE
                  IconSlideAction(
                    caption: ("Information"),
                    foregroundColor: Colors.white,
                    color: Colors.black38,
                    icon: Icons.info,
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context)=&gt;projectTask(snapshot.data[index])));
                    },
                  ),
                ],
  
                child: ListTile(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; projectTask(
                        snapshot.data[index],
                    )));
                  },
                  title: Text("${snapshot.data[index].description[0].toString().toUpperCase()}"
                      "${snapshot.data[index].description.toString().substring(1)}", maxLines: 1, style: TextStyle(
                      color: Colors.black87, fontSize: 17)
                  ),
                  subtitle: Text("done"),
                  leading: Icon(Icons.check_circle, color: Colors.green),
                  trailing: Icon(Icons.arrow_right, color: Colors.black54,),
                ),
              );
            }
            else if(snapshot.data[index].state == "started") {
              return Slidable(
  
                //SLIDABLE STUFF
                delegate: SlidableStrechDelegate(),
                actionExtentRatio: 0.25,
                actions: &lt;Widget&gt;[
                  //ACTION ONE
                  IconSlideAction(
                    caption: ("Information"),
                    foregroundColor: Colors.white,
                    color: Colors.black38,
                    icon: Icons.info,
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context)=&gt;projectTask(snapshot.data[index])));
                    },
                  ),
                ],
                secondaryActions: &lt;Widget&gt;[
  
                  //ACTION TWO
                  IconSlideAction(
                    caption: ("Complete Me"),
                    color: Colors.green,
                    icon: Icons.radio_button_checked,
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context)=&gt;projectTask(snapshot.data[index])));
                    },
                  )
                ],
  
                child: ListTile(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; projectTask(
                      snapshot.data[index],
                    )));
                  },
                  title: Text("${snapshot.data[index].description[0].toString().toUpperCase()}"
                      "${snapshot.data[index].description.toString().substring(1)}", maxLines: 1, style: TextStyle(
                      color: Colors.black87, fontSize: 17)
                  ),
                  subtitle: Text("working"),
                  leading: Icon(Icons.radio_button_checked, color: Colors.blue),
                  trailing: Icon(Icons.arrow_right, color: Colors.black54,),
                ),
              );
            }
            else {
              return Slidable(
  
                //SLIDABLE STUFF
                delegate: SlidableStrechDelegate(),
                actionExtentRatio: 0.25,
                actions: &lt;Widget&gt;[
                  //ACTION ONE
                  IconSlideAction(
                    caption: ("Information"),
                    foregroundColor: Colors.white,
                    color: Colors.black38,
                    icon: Icons.info,
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context)=&gt;projectTask(snapshot.data[index])));
                    },
                  ),
                ],
                secondaryActions: &lt;Widget&gt;[
  
                  //ACTION TWO
                  IconSlideAction(
                    caption: ("Start Work"),
                    color: Colors.blue,
                    icon: Icons.radio_button_checked,
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context)=&gt;projectTask(snapshot.data[index])));
                    },
                  )
                ],
  
                //LISTTILE
                child: ListTile(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; projectTask(
                      snapshot.data[index],
                    )));
                  },
                  title: Text("${snapshot.data[index].description[0].toString().toUpperCase()}"
                      "${snapshot.data[index].description.toString().substring(1)}", maxLines: 1, style: TextStyle(
                      color: Colors.black87, fontSize: 17)
                  ),
                  subtitle: Text("new"),
                  leading: Icon(Icons.radio_button_checked, color: Colors.red),
                  trailing: Icon(Icons.arrow_right, color: Colors.black54,),
                ),
              );
            }
          }
        );
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>[
  {
      "id": 7,
      "description": "Finishedddddd",
      "state": "done",
      "assigned_users": [
          {
              "username": "hugo",
              "fullname": "Hugo Johnsson"
          }
      ],
      "subtasks": []
  },
  {
      "id": 9,
      "description": "Newwww task for Huuugo",
      "state": "started",
      "assigned_users": [
          {
              "username": "hugo",
              "fullname": "Hugo Johnsson"
          }
      ],
      "subtasks": []
  },
  {
      "id": 11,
      "description": "Google presentation om IKEAS ekonomi",
      "state": "done",
      "assigned_users": [
          {
              "username": "studentone",
              "fullname": "Student One"
          }
      ],
      "subtasks": []
  },
  {
      "id": 15,
      "description": "entail",
      "state": "new",
      "assigned_users": [],
      "subtasks": [
          {
              "id": 1,
              "description": "dasdasdasd"
          },
          {
              "id": 2,
              "description": "fsdfsdfsdf"
          }
      ]
  },
  {
      "id": 17,
      "description": "gmmgmsgd",
      "state": "new",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 18,
      "description": "dasd",
      "state": "started",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 19,
      "description": "fsdfdsfsd",
      "state": "started",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 20,
      "description": "Werner",
      "state": "new",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 21,
      "description": "teadfsd",
      "state": "done",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 22,
      "description": "task",
      "state": "new",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 23,
      "description": "asdasd",
      "state": "started",
      "assigned_users": [],
      "subtasks": []
  },
  {
      "id": 24,
      "description": "asdasd",
      "state": "new",
      "assigned_users": [
          {
              "username": "hugo",
              "fullname": "Hugo Johnsson"
          }
      ],
      "subtasks": []
  }
  </code></pre>
  
  <p>]</p>