Flutter RangeError (index): Invalid value: Valid value range is empty: 0 - flutter

Question

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
RangeError (index): Invalid value: Valid value range is empty: 0
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool showApp = false;
var _questions = new List<Questions>();
_getQuestions() {
API.getUsers().then((response) {
setState(() {
Iterable list = json.decode(response.body);
print(list);
print(list);
_questions = list.map((model) => 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 < 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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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),
),
),
)),
),
],
));
}
}
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 ?
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.
class _MyHomePageState extends State<MyHomePage> {
bool showApp = false;
var _questions = new List<Questions>();
Future<List> _getQuestions() async {
final response = await API.getUsers();
setState(() {
Iterable list = json.decode(response.body);
print(list);
print(list);
_questions = list.map((model) => 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 < 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<List> 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();
}
});
}
}

Answer 1

It seems like the problem is what you are suspecting. The data is not available before the build method starts executing and thus we are encountering an out of range error. The solution to this problem would be to use a FutureBuilder in your build method.
Instead of getting the data in initState, wrap the code inside your build method in FutureBuilder and set the getUser() as the future parameter in the FutureBuilder. Take a look the code snippet below
#override
Widget build(BuildContext context) {
return FutureBuilder(
initialData:null //initial default data if you have some
future: API.getUsers(),
builder:(BuildContext context,AsyncSnapshot snapshot){
if(snapshot.ConnectionState==ConnectionState.none||snapshot.ConnectionState==ConnectionState.waiting){
print("data has not been fetched yet");
return CircularProgressIndicator();
}
else{
if(snapshot.hasData){
print("Data found, You can continue");
//decode your json here and initialize the variables you need
return Scaffold(
// your widgets
);
}else{
print("No data found");
return Text("No data found");
}
}
}
);
}
In your case, you'd do something like this
import 'package:flutter/material.dart';
class _MyHomePageState extends State<MyHomePage> {
bool showApp = false;
var _questions = new List<Questions>();
// Future<List> _getQuestions() async {
// final response = await API.getUsers();
// setState(() {
// Iterable list = json.decode(response.body);
// print(list);
// print(list);
// _questions = list.map((model) => 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 < 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: API.getUsers(),
builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasData) {
var response = snapshot.data;
print("Data found, You can continue");
Iterable list = json.decode(response.body);
print(list);
print(list);
_questions =
list.map((model) => Questions.fromJson(model)).toList();
print(_questions);
showApp = true;
return Center(child: Text('Datafound'));
} else if (snapshot.hasError) {
return Center(child: Text('HaSError'));
}
} else {
print("loading");
return CircularProgressIndicator();
}
});
}
}