Flutter show values from JSON array and on tap change the index - flutter

Question

I am a newbie in a flutter. I have a simple app I need to show the JSON value in my container and on tap, the second value will show.
class _MyHomePageState extends State<MyHomePage> {
final List _questions = [
{'would': 'Coffe', 'rather': 'Tea'},
{'would': 'Coffe', 'rather': 'Tea'},
{'would': 'Coffe', 'rather': 'Tea'},
];
#override
Widget build(BuildContext context) {
final PrimaryColor = const Color(0xff404040);
final PreferredSizeWidget appBar = AppBar(
centerTitle: true,
title: Text(
'Would you Rather',
style: TextStyle(fontFamily: 'FredokaOne'),
),
backgroundColor: PrimaryColor,
);
return Scaffold(
backgroundColor: Color(0xff404040),
appBar: appBar,
body: Column(
children: <Widget>[
InkWell(
onTap: () => print("And after click here it will change both question"),
child: Container(
child: Text(_questions[0].would,),
),
),
InkWell(
onTap: () => print("And after click here it will change both question"),
child: Container(
child: Text(_questions[0].rather,),
),
),
],
));
}
}
Here I have a list of questions. In 1 array there are 2 values. I need to show these 2 values in each container and when I tap on the container the next array will appear.

Answer 1

Create a variable index that will increment in nextQuestion function is triggered when one of the containers is tapped. The increment will stop once it reaches the last element of _questions List. Finally, use the index when assigning the values of the Text inside the Containers to change when changing the index.
class _MyHomePageState extends State<MyHomePage> {
final List _questions = [
{'would': 'Coffe', 'rather': 'Tea'},
{'would': 'Blue', 'rather': 'Red'},
{'would': 'Green', 'rather': 'Yellow'},
];
int index = 0;
#override
Widget build(BuildContext context) {
final PrimaryColor = const Color(0xff404040);
int size = _questions.length;
void nextQuestion(){
if(index < size - 1)
setState(() {
index++;
});
print(index);
}
final PreferredSizeWidget appBar = AppBar(
centerTitle: true,
title: Text(
'Would you Rather',
style: TextStyle(fontFamily: 'FredokaOne'),
),
backgroundColor: PrimaryColor,
);
return Scaffold(
backgroundColor: Color(0xff404040),
appBar: appBar,
body: Column(
children: <Widget>[
InkWell(
onTap: nextQuestion,
child: Container(
height: 100,
child: Text(_questions[index]['would']),
),
),
InkWell(
onTap: nextQuestion,
child: Container(
height: 100,
child: Text(_questions[index]['rather']),
),
),
],
));
}
}