Return async value to initState()

Question

I've the below code that is working fine, reading the csv data from url and printing the output:

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }
  print(rowsAsListOfValues);
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    fetchUserData();
  }

  @override
  Widget build(BuildContext context) { // ... // }
}

Instead of getting the output printed, I need it to be returned into a variable, which I can display in y widget, I tried to do it as below:

Future<List<List<dynamic>>> fetchUserData() async {   /// change
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }

  return rowsAsListOfValues;    /// change
}

class _MyHomePageState extends State<MyHomePage> {
  var rowsAsListOfValues;  /// new

  @override
  void initState() {
    super.initState();
    rowsAsListOfValues = fetchUserData();    /// new
    print(rowsAsListOfValues);   /// new
  }

  @override
  Widget build(BuildContext context) { // ... // }
}

But I got the output as I/flutter ( 7505): Instance of 'Future<List<List<dynamic>>>'

How can I fix it?

`initState` cannot be marked async. You can, however, start an async function (without awaiting it), then set the state inside that function once the underlying async operation has finished. — Riwen, Oct 15 '20 at 13:06

score 3 · Accepted Answer · edited Oct 15 '20 at 12:39

3

You need to switch from initState to didChangeDependency in this case. Because you need to await some process and you cant wait in initState. However you can wait like this

@override
void didChangeDependencies() async {
  super.didChangeDependencies();
  rowsAsListOfValues = await fetchUserData();
  super.setState(() {}); // to update widget data
  /// new
  print(rowsAsListOfValues);
}

And this is the result

I/flutter (24313): [[vranches], [Dammam, 2], [Khobar, 3]]

edited Oct 15 '20 at 12:39

Hasan A Yousef

22,789
24
132
203

answered Oct 15 '20 at 11:47

Ulaş Kasım

810
1
8
14

1

You can add setState((){}); after await so when it fetches data it setState the correct data – Ulaş Kasım Oct 15 '20 at 12:32

score 1 · Answer 2 · edited Oct 15 '20 at 13:03

You can wrap your code with Future.delayed() as given below.

 @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero,()async{
       rowsAsListOfValues =await fetchUserData();   
       setState(() {});
       print(rowsAsListOfValues);   // this return correct value
    });
   print(rowsAsListOfValues);  // this return null
  }

Full Code

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

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

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _AppState createState() => _AppState();
}

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }
  return rowsAsListOfValues;
}

class _AppState extends State<HomePage> {
  var rowsAsListOfValues;
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero, () async {
      rowsAsListOfValues = await fetchUserData();
      setState(() {});
      print(rowsAsListOfValues);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$rowsAsListOfValues',
            ),
          ],
        ),
      ),
    );
  }
}

Bro here i am geeting data as I/flutter (10842): [[ches], [Dammam, 2], [Khobar, 3]] — Khadga shrestha, Oct 15 '20 at 12:34
With your code, I'm getting: `MediaQuery.of() called with a context that does not contain a MediaQuery.` — Hasan A Yousef, Oct 15 '20 at 12:54
Thanks, I got it now why it returned `null` I was calling it outside the `async` scope. — Hasan A Yousef, Oct 15 '20 at 13:04
I believe `async` is not allowed on `initState` to prevent the use of Futures during component initialization. Your code `Future.delayed(Duration.zero, ...)` simply hacks over that error check. — tim-montague, Nov 18 '21 at 20:49

tim-montague · Answer 3 · 2021-12-26T23:10:23.873

The initState method is synchronous, and does not support async. I recommend the use of FutureBuilder, but you can also move the code to an async function.

FutureBuilder

import 'package:flutter/material.dart' show
  Widget, FutureBuilder, AsyncSnapshot
;

class _MyHomePageState extends State<MyHomePage> {

  static Future<void> fetchUserData() {
    return Future().delayed(
      Duration(seconds: 10),
      () => 'loaded'
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: Future.wait([
        fetchUserData()
      ]),

      builder: (
        BuildContext context,
        AsyncSnapshot snapshot
      ) {
        if (snapshot.hasData) {
          return Text(snapshot.data);
        }
        return Text('loading...');
      }
    );
  }
}

Async function

@override
void initState () {
  super.initState();
  (() async {
    rowsAsListOfValues = await fetchUserData();
    print(rowsAsListOfValues);
  })();
}

OR

@override
void initState() {
  super.initState();
  initLoad();
}

void initLoad() async {
  rowsAsListOfValues = await fetchUserData();
  print(rowsAsListOfValues);
}

score -1 · Answer 4 · answered Oct 15 '20 at 11:37

-1

I feel more relaxed when using then() with async functions. You can try this:

  

    fetchUserData().then((value) {
       setState(() {
        rowsAsListOfValues = value;
       });
    });

Or you can use await like this.

  @override
  void initState() async {
    super.initState();

    rowsAsListOfValues = await fetchUserData();
                      
    print(rowsAsListOfValues);  
  }

answered Oct 15 '20 at 11:37

Akif

7,098
7
27
53

The `.then()` option worded fine, the `await` option gave `_MyHomePageState.initState() returned a Future.` – Hasan A Yousef Oct 15 '20 at 12:01
Don't forget to use `async` in `inintState`: void initState() `async` { – Akif Oct 15 '20 at 12:42
I did, I can not see `setState(() {});` where shall we use it? – Hasan A Yousef Oct 15 '20 at 13:19
There is an explanation about it: https://stackoverflow.com/a/53373017/10659482 – Akif Oct 15 '20 at 13:31

Return async value to initState()

4 Answers4

FutureBuilder

Async function

Linked