title: Flutter RangeError (index): Invalid value: Valid value range is empty: 0
body: <p>I am fetching data from my api previously i am suing hardcoded json data so its working perfectly in app but now when i am using the API data its showing this error</p>
  
  <p>RangeError (index): Invalid value: Valid value range is empty: 0</p>
  
  <pre><code>class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    bool showApp = false;
     var _questions = new List&lt;Questions&gt;();
    _getQuestions() {
      API.getUsers().then((response) {
        setState(() {
  
          Iterable list = json.decode(response.body);
          print(list);
          print(list);
          _questions = list.map((model) =&gt; Questions.fromJson(model)).toList();
          print(_questions);
          showApp = true;
        });
      });
    }
    initState() {
      super.initState();
      _getQuestions();
    }
  
    int index = 0;
    bool shouldShow = false;
  
    @override
    Widget build(BuildContext context) {
  
      int size = _questions.length;
  
      void nextQuestion() {
        if (index &lt; size - 1)
          setState(() {
            index++;
          });
        print(index);
      }
  
      double percentage1Calculate() {
        int wouldClick = 12;
        int ratherClick = 13;
        double percentage1 = wouldClick / (wouldClick + ratherClick) * 100;
        return percentage1;
      }
  
      double percentage2Calculate() {
        int wouldClick = 2;
        int ratherClick = 3;
        double percentage2 = ratherClick / (wouldClick + ratherClick) * 100;
        return percentage2;
      }
  
      void percengtageTrigger(){
        setState(() {
          shouldShow = true;
        });
        Timer timer = Timer(Duration(milliseconds: 1350), () {
          setState(() {
            shouldShow = false;
          });
        });
      }
  
      final PrimaryColor = const Color(0xff404040);
  
      final PreferredSizeWidget appBar = AppBar(
        centerTitle: true,
        title: Text(
          'Would you Rather',
          style: TextStyle(fontFamily: 'FredokaOne'),
        ),
        backgroundColor: PrimaryColor,
      );
      double stackHeight = (MediaQuery.of(context).size.height -
          appBar.preferredSize.height -
          MediaQuery.of(context).padding.top);
      double stackWidth = MediaQuery.of(context).size.width;
      return Scaffold(
          backgroundColor: Color(0xff404040),
          appBar: appBar,
  
  
          body: Stack(
            children: [
              GestureDetector(
                onTap: () {
                  percengtageTrigger();
                },
                child: Container(
                  height: stackHeight * 0.5,
                  width: stackWidth,
                  color: Colors.blue,
                  child: Column(
                    children: &lt;Widget&gt;[
                      shouldShow
                          ? Container(
                          padding: const EdgeInsets.only(top: 10, right: 10),
                          height: stackHeight * 0.1,
                          color: Colors.blue,
                          width: double.infinity,
                          child: Column(
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: &lt;Widget&gt;[
                              Text(
                                '${percentage1Calculate().toStringAsFixed(0)}%',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 23,
                                  fontFamily: 'NewsCycle',
                                ),
                              ),
                            ],
                          ))
                          : Container(
                        height: stackHeight * 0.1,
                        color: Colors.blue,
                        width: double.infinity,
                      ),
                      Container(
                          color: Colors.blue,
                          height: stackHeight * 0.4,
                          width: double.infinity,
                          child: Column(
                            children: &lt;Widget&gt;[
                              Padding(
                                padding: const EdgeInsets.only(top: 20),
                                child: Text(
                                  _questions[index].would, //here its showing error 
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 23,
                                    fontFamily: 'NewsCycle',
                                  ),
                                ),
                              ),
                            ],
                          )),
                    ],
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  percengtageTrigger();
                },
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: stackHeight * 0.5,
                    width: stackWidth,
                    color: Colors.red,
                    child: Column(
                      children: &lt;Widget&gt;[
                        shouldShow
                            ? Container(
                            padding:
                            const EdgeInsets.only(top: 10, right: 10),
                            height: stackHeight * 0.1,
                            color: Colors.red,
                            width: double.infinity,
                            child: Column(
                              mainAxisSize: MainAxisSize.max,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: &lt;Widget&gt;[
                                Text(
                                  '${percentage2Calculate().toStringAsFixed(0)}%',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 23,
                                    fontFamily: 'NewsCycle',
                                  ),
                                ),
                              ],
                            ))
                            : Container(
                          height: stackHeight * 0.1,
                          color: Colors.red,
                          width: double.infinity,
                        ),
                        Container(
                            color: Colors.red,
                            height: stackHeight * 0.4,
                            width: double.infinity,
                            child: Column(
                              children: &lt;Widget&gt;[
                                Padding(
                                  padding: const EdgeInsets.only(top: 40),
                                  child: Text(
                                    _questions[index].rather,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 23,
                                      fontFamily: 'NewsCycle',
                                    ),
                                  ),
                                ),
                              ],
                            )),
                      ],
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment.center,
                child: Container(
                  width: stackWidth,
                  height: stackHeight * 0.015,
                  color: Color(0xff404040),
                ),
              ),
              Align(
                alignment: Alignment.center,
                child: Container(
                    width: stackWidth,
                    height: stackHeight * 0.15,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color(0xff404040),
                    ),
                    child: Align(
                      alignment: Alignment.center,
                      child: GestureDetector(
                        onTap: () {
                          nextQuestion();
                        },
                        child: Text(
                          "SKIP",
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'FredokaOne',
                              fontSize: 27),
                        ),
                      ),
                    )),
              ),
            ],
          ));
    }
  }
  </code></pre>
  
  <p>Also comment in code where its showing error. I dont know how to solve it but i think the issue is causing because API data is not loaded before its calling the index data maybe ? </p>
  
  <p>Try to use Futurebuild function but its just keep loading the function and showing the indicator not showing the Container when its loaded in termail its keep printing the value as infinite loop.</p>
  
  <pre><code> class _MyHomePageState extends State&lt;MyHomePage&gt; {
    bool showApp = false;
    var _questions = new List&lt;Questions&gt;();
  
    Future&lt;List&gt; _getQuestions() async {
      final response = await API.getUsers();
      setState(() {
        Iterable list = json.decode(response.body);
        print(list);
        print(list);
        _questions = list.map((model) =&gt; Questions.fromJson(model)).toList();
        print(_questions);
        showApp = true;
      });
      return Future.value(_questions);
    }
  
    int index = 0;
    bool shouldShow = false;
  
    @override
    Widget build(BuildContext context) {
      int size = _questions?.length;
  
      void nextQuestion() {
        if (index &lt; size - 1)
          setState(() {
            index++;
          });
        print(index);
      }
  
      double percentage1Calculate() {
        int wouldClick = 12;
        int ratherClick = 13;
        double percentage1 = wouldClick / (wouldClick + ratherClick) * 100;
        return percentage1;
      }
  
      double percentage2Calculate() {
        int wouldClick = 2;
        int ratherClick = 3;
        double percentage2 = ratherClick / (wouldClick + ratherClick) * 100;
        return percentage2;
      }
  
      void percengtageTrigger() {
        setState(() {
          shouldShow = true;
        });
        Timer timer = Timer(Duration(milliseconds: 1350), () {
          setState(() {
            shouldShow = false;
          });
        });
      }
  
      final PrimaryColor = const Color(0xff404040);
  
      final PreferredSizeWidget appBar = AppBar(
        centerTitle: true,
        title: Text(
          'Would you Rather',
          style: TextStyle(fontFamily: 'FredokaOne'),
        ),
        backgroundColor: PrimaryColor,
      );
      double stackHeight = (MediaQuery.of(context).size.height -
          appBar.preferredSize.height -
          MediaQuery.of(context).padding.top);
      double stackWidth = MediaQuery.of(context).size.width;
      return FutureBuilder(
          initialData: null, //initial default data if you have some
          future: _getQuestions(),
          builder: (BuildContext context,
              AsyncSnapshot&lt;List&gt; snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasData) {
                print("Data found, You can continue");
                return Center(child: Text('Datafound'));
              } else if (snapshot.hasError) {
                return Center(child: Text('HaSError'));
              }
            } else {
              print("loading");
              return CircularProgressIndicator();
            }
          });
    }
  }
  </code></pre>