How can you properly return a List from a Future to use in a ListView.Builder in Flutter?

Question

I'm looking to get a list from a Future and to use this list in a ListView.Builder. Only problem is I'm obviously finding a good way to accomplish this. Here's some code snippets if anyone can offer me some advice. Thanks!

Where I call the function for the Data and also the ListView.Builder

class _ChangeQuarterState extends State<ChangeQuarter> {
  static const Color greycolor = Color.fromRGBO(220, 220, 220, 10);


 Future<List<Quarter>> quarters = getQuarters();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(95.0),
        child: AppBar(
          automaticallyImplyLeading: false, // hides leading widget
          flexibleSpace: QuarterAppBar(),
        ),
      ),
      body: Container(
        child: ListView.builder(
          itemCount: quarters[index],
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
              child: Card(
                color: (index % 2 == 0) ? greycolor : Colors.white,
                child: Container(
                    height: 60,
                    padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                    child: InkWell(
                      onTap: () => Navigator.pop(context),
                      child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(right: 5),
                          child: Text(quarters[index].quarter,
                              style: TextStyle(
                                  fontSize: 20,
                                  fontFamily: 'Montserrat',
                                  color: BBFILightBlue),
                              textAlign: TextAlign.left),
                        ),

Where I get the data I want to turn into a list for the Builder

Future<Quarter> getQuarters() async {
  final http.Response response = await http.get(
    'https://fakedapi.com/getQuarters',
    headers: <String, String>{
      'Authorization': 'topsecret',
    },
  );
  if (response.statusCode <400) {
    return  Quarter.fromJson(json.decode(response.body));


  } else {
    throw Exception('Failed to get quarters');
  }
}

Does this answer your question? [What is a Future and how do I use it?](https://stackoverflow.com/questions/63017280/what-is-a-future-and-how-do-i-use-it) — nvoigt, Sep 28 '20 at 06:47

score 1 · Accepted Answer · answered Sep 28 '20 at 01:30

You can copy paste run full code below
You can use FutureBuilder and operate snapshot.data
code snippet

Future<List<Quarter>> _future;

@override
  initState() {
    _future = getQuarters();
  }


FutureBuilder(
            future: _future,
            builder: (context, AsyncSnapshot<List<Quarter>> snapshot) {
              switch (snapshot.connectionState) {
                ...
                  } else {
                    return ListView.builder(
                        itemCount: snapshot.data.length,
                        shrinkWrap: true,
                        ...
                                  child: Text(
                                      snapshot
                                          .data[index].quarter,

working demo

full code

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

List<Quarter> quarterFromJson(String str) =>
    List<Quarter>.from(json.decode(str).map((x) => Quarter.fromJson(x)));

String quarterToJson(List<Quarter> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Quarter {
  Quarter({
    this.quarter,
  });

  String quarter;

  factory Quarter.fromJson(Map<String, dynamic> json) => Quarter(
        quarter: json["quarter"],
      );

  Map<String, dynamic> toJson() => {
        "quarter": quarter,
      };
}

class ChangeQuarter extends StatefulWidget {
  @override
  _ChangeQuarterState createState() => _ChangeQuarterState();
}

class _ChangeQuarterState extends State<ChangeQuarter> {
  static const Color greycolor = Color.fromRGBO(220, 220, 220, 10);
  Future<List<Quarter>> _future;

  Future<List<Quarter>> getQuarters() async {
    /*final http.Response response = await http.get(
      'https://fakedapi.com/getQuarters',
      headers: <String, String>{
        'Authorization': 'topsecret',
      },
    );*/
    String jsonString = '''
    [{
    "quarter" : "1"
},
{
    "quarter" : "2"
},
{
    "quarter" : "3"
},
{
    "quarter" : "4"
}
]
    ''';
    final http.Response response = http.Response(jsonString, 200);

    if (response.statusCode < 400) {
      return quarterFromJson(
          response.body); //Quarter.fromJson(json.decode(response.body));

    } else {
      throw Exception('Failed to get quarters');
    }
  }

  @override
  initState() {
    _future = getQuarters();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(95.0),
          child: AppBar(
            automaticallyImplyLeading: false, // hides leading widget
            //flexibleSpace: QuarterAppBar(),
          ),
        ),
        body: FutureBuilder(
            future: _future,
            builder: (context, AsyncSnapshot<List<Quarter>> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text('none');
                case ConnectionState.waiting:
                  return Center(child: CircularProgressIndicator());
                case ConnectionState.active:
                  return Text('');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    return Text(
                      '${snapshot.error}',
                      style: TextStyle(color: Colors.red),
                    );
                  } else {
                    return ListView.builder(
                        itemCount: snapshot.data.length,
                        shrinkWrap: true,
                        itemBuilder: (context, index) {
                          return Padding(
                              padding: EdgeInsets.symmetric(
                                  vertical: 1.0, horizontal: 4.0),
                              child: Card(
                                  color: (index % 2 == 0)
                                      ? greycolor
                                      : Colors.white,
                                  child: Container(
                                      height: 60,
                                      padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                                      child: InkWell(
                                          onTap: () => Navigator.pop(context),
                                          child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: <Widget>[
                                                Container(
                                                  margin:
                                                      EdgeInsets.only(right: 5),
                                                  child: Text(
                                                      snapshot
                                                          .data[index].quarter,
                                                      style: TextStyle(
                                                          fontSize: 20,
                                                          fontFamily:
                                                              'Montserrat',
                                                          color: Colors.blue),
                                                      textAlign:
                                                          TextAlign.left),
                                                )
                                              ])))));
                        });
                  }
              }
            }));
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ChangeQuarter(),
    );
  }
}

How can you properly return a List from a Future to use in a ListView.Builder in Flutter?

1 Answers1