Flutter/Dart - calling a function that is a Future<String> ... but needs to return only a String

Question

I have an async function that is calling out to Firestore to pull in a data value. I got a lot of help in a previous post...learned a lot...and wanted to start over with hopefully a cleaner question. So I have the following function

Future<String> getSetList () async {

DocumentReference set01DocRef = Firestore.instance.collection('sets').document('SET01');

var snapshot = await set01DocRef.get();

songList = snapshot['songs']; //works, get expected text value from FS

return songList;
}

This function logic works...I can print() out the songList var (string var) to the console and I see the value from Firestore. When I try to call the function:

@override
  Widget build(BuildContext context) {

    var setList = getSetList();

    print('In widget:  ' + setList.toString()); //shows as instance of Future<String>

    //List<String> items = setList.split('|');
    List<String> items = ['Red','White','Blue'];

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),

That setList variable is not a String. When I print it [print(setList.toString()] it shows as an instance of Future String.

I tried using: var setList = await getSetList(); but that shows an error on the await.

Any ideas appreciated.

Answer 1

When do you need to call the future?

You can always create a tmp variable and try to load it. You cannot randomly put futures into the build process. You need to grab the data then call setState to notify the widget if the view has changed.

String _setList = null;
//initState called when the widget is mounted.
void initState() {
    super.initState();
    if(_setList == null){
       getSetList().then(
          (String s) => setState(() {_setList = s;})
       );
    }
}

@override
  Widget build(BuildContext context) {

    String setList = _setList;

    print('In widget:  ' + setList.toString()); //shows as instance of Future<String>
    if(setList != null){
    //List<String> items = setList.split('|');
    List<String> items = ['Red','White','Blue'];

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
    } else { return const CircularProgressIndicator();  }
    //Create a progress circle.

I hope my set state does not have any sytax errors.

https://docs.flutter.io/flutter/widgets/State/setState.html

https://docs.flutter.io/flutter/widgets/State/initState.html