I can't take out data from list inside future function. Flutter/Dart

Question

I'm beginner in this language and I don't know how to deal with it. What I want from this code is that function getDocs() will take out data from firestore. After it happens, statefull widget will build out text from a list, which will contains data from firestore. Error is obvious and shows that my list is empty: Error from device

My code looks:

class TestBasic extends StatefulWidget {
  int time;
  int amount;
  TestBasic({this.time, this.amount});

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

class _TestBasicState extends State<TestBasic> {

  List<Map> listOfQuestionsMap = [];
  List<Question> listOfQuestions = [];

  Future getDocs() async {
    QuerySnapshot querySnapshot =
        await Firestore.instance.collection("questions").getDocuments();
    for (int i = 0; i < widget.amount; i++) {
      var a = querySnapshot.documents[i];
      listOfQuestionsMap.add(a.data);
    }
     List<Question> listOfQuestionsQ = listOfQuestionsMap.map((doc) {
      return Question(
        answer: doc['answer'] ?? '',
        questionText: doc['questionText'] ?? '',
        type: doc['type'] ?? '',
        substantiation: doc['substantiation'] ?? '',
        article: doc['article'] ?? ''
        );
    }).toList();
    print(listOfQuestionsQ[1].answer);
    setState(() {
      listOfQuestions.addAll(listOfQuestionsQ);
    });
  }

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

  @override

  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40.0),
        child: Container(
                alignment: Alignment.center,
                height: Responsive.height(40, context),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 1.0)),
                child: Text(listOfQuestions[0].answer,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      decoration: TextDecoration.none,
                      color: Colors.black,
                      fontSize: 20.0,
                    )),
              ),
            );

There is Question model:

class Question {
  final String type;
  final String questionText;
  final String answer;
  final String substantiation;
  final String article;

  Question({this.answer, this.questionText, this.type, this.substantiation, this.article});
}

Can someone explain me how to get result that i want?

Answer 1

You got that error because the build was called before getDocs updated the list and your listOfQuestions was empty and you tried getting a value at an index (0).

Try using:

Text(
 listOfQuestions.isEmpty ? "Loading" : listOfQuestions[0].answer
)

This way, when the listOfQuestions is empty, the Text shows loading and when the listOfQuestions has data, it shows the value of listOfQuestions[0].answer