title: Sorting a Future List in Flutter
body: <p>I've been looking for a solution to sort a list (ascending and descending) <code>On Button Press</code> inside of a <code>FutureBuilder</code>, that is a <code>Future&lt;List&gt;</code>, but can't seem to understand how to define it as a List and then sort it on a button press. So I call the API, the API returns some dummy value, it's gets built in the Future Builder and in a <code>ListView.builder</code>, now I want sort the list by id (or by any type for that matter) but the method is not working because the list is null. The code:</p>
  <p>API Call for the dummy data:</p>
  <pre><code>Future&lt;List&lt;Post&gt;&gt; fetchPosts() async {
    List&lt;Post&gt; posts = [];
    final response = await http.get('https://jsonplaceholder.typicode.com/posts');
  
    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      var postsJson = jsonDecode(response.body);
      for (int i = 0; i &lt; postsJson.length; i++) {
        posts.add(Post.fromJson(jsonDecode(response.body)[i]));
      }
      return posts;
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load posts');
    }
  }
  
  </code></pre>
  <p>The Future Builder:</p>
  <pre><code> List&lt;Post&gt; posts = []; /// if a define it like this, the value is always null
   Future&lt;List&lt;Post&gt;&gt; futurePosts;
  
    @override
    void initState() {
      super.initState();
      futurePosts = fetchPosts();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              children: [
                MaterialButton(color: Colors.grey, onPressed: (){
  // here I am setting set to compare the values of all IDs so it can be sorted ascending and descending by number of ID every time I press the button
                  setState(() {
                    posts.sort((a, b) =&gt; a.id.compareTo(b.id));
                  });
                },),
                Container(
                  height: 1000,
                  child: FutureBuilder&lt;List&lt;Post&gt;&gt;(
                    future: futurePosts,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return ListView.builder(
                          shrinkWrap: true,
                          itemCount: snapshot.data.length,
                          itemBuilder: (context, index) {
                            return Text('${snapshot.data[index].id}')
                          },
                        );
                      } else if (snapshot.hasError) {
                        return Text(&quot;${snapshot.error}&quot;);
                      }
                      return Container();
                    },
                  ),
  </code></pre>
  <p>But it seems my understanding and code is not working for me at this point. Any help is appreciated, thanks in advance!</p>