How do you convert a list future to a list to use as a variable not a widget?

user_2387962 0
Viewed 11556

I'm trying to implement the PaginatedDataTable class in flutter. A required field in the constructor of this class, is the class DataTableSource. Looking at the data table example in the material section of the flutter gallery examples here. There is a member variable for the DataTableSource called List<Dessert> _desserts where it's values are hard coded. In my implementation, I'm making a http call and returning some json to be decoded. 

List<Result> parseResults(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<Result>((json) => Result.fromJson(json)).toList();
}

Future<List<Result>> fetchResults(http.Client client) async {
  final response = await client.get('https://api.myjson.com/bins/j5xau');

  // Use the compute function to run parseResults in a separate isolate
  return compute(parseResults, response.body);

In my DataTableSource class I'm not sure how to instantiate the list. 

`final List<Result> results = fetchResults(http.Client);`

doesn't compile because fetchResults() returns a future. If I change the return type to a future the results does compile but I need my returned json to be of type List so I can use methods like sort etc..How should I convert the future to a list.

dart flutter future
1 Answers

In your DataTableSource class just remove the results variable. Then in your build function, you can use a FutureBuilder widget like this:

FutureBuilder<List<Result>>(
  future: fetchResults(http.Client), 
  builder: (BuildContext context, AsyncSnapshot<List<Result>> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return Text('Press button to start.');
      case ConnectionState.active:
      case ConnectionState.waiting:
        return Text('Awaiting result...');
      case ConnectionState.done:
        if (snapshot.hasError)
          return Text('Error: ${snapshot.error}');
        return Text('Result: ${snapshot.data}');
    }
    return null; // unreachable
  },
)

Note that snapshot.data is a List<Result> now and you can use it in the same way you were using it back when it was a hard coded value.

Edit:

If you don't want to use a FutureBuilder I would suggest that you have a function that basically modifies the value of the results when the http call completes. Here's an example of what I mean:

Make DessertDataSource take in a List<Result> in its constructor to define the value of results like so: 

class DessertDataSource extends DataTableSource {
  final List<Result> results;
  DessertDataSource(this.results);
  // rest of the class
}

In the _DataTableDemoState, make _dessertsDataSource no longer final and change its initial value to DessertDataSource([]). Also, add a boolean indicating when the data is loaded already or not.

class _DataTableDemoState extends State<DataTableDemo> {
  // other fields!
  DessertDataSource _dessertsDataSource = DessertDataSource([]);
  bool isLoaded = false;

Then add the following function to _DataTableDemoState. The boolean ensures we only make the http call once.

Future<void> getData() async {
  final results = await fetchResults(http.Client);
  if (!isLoaded) {
      setState(() {
        _dessertsDataSource = DessertDataSource(results);
        isLoaded = true;
      });
  }
}

Finally call that function upon pressing a button or some other trigger or maybe just at the beginning of your build function.

@override
Widget build(BuildContext context) {
    getData();
    return MYWidget();
}

Then whenever the data is returned from the http call, the widget will automatically update with the new data.

user_48820320
Related