Reputation: 41
I am making a quiz app in flutter which has multiple subjects in grid view. Each grid redirect to a screen which fetch data from a list one by one. What I want to do : Whenever I click to a grid view, it redirect me to a single screen and fetch data from the respective list.
I want to go to a single screen whenever I click on the grid view but it should show data from the list with respect to grid view user click.
This is grid view example and each number represent a different subject.
final first = const [
{
'question': 'How long is New Zealand’s Ninety Mile Beach?',
'answers': [
{'answerText': '88km, so 55 miles long.', 'score': true},
{'answerText': '55km, so 34 miles long.', 'score': false},
{'answerText': '90km, so 56 miles long.', 'score': false},
],
},
{
'question':
'In which month does the German festival of Oktoberfest mostly take place?',
'answers': [
{'answerText': 'January', 'score': false},
{'answerText': 'October', 'score': false},
{'answerText': 'September', 'score': true},
],
},
{
'question': 'Who composed the music for Sonic the Hedgehog 3?',
'answers': [
{'answerText': 'Britney Spears', 'score': false},
{'answerText': 'Timbaland', 'score': false},
{'answerText': 'Michael Jackson', 'score': true},
],
},
];
final second = const [
{
'question': 'In Georgia (the state), it’s illegal to eat what with a fork?',
'answers': [
{'answerText': 'Hamburgers', 'score': false},
{'answerText': 'Fried chicken', 'score': true},
{'answerText': 'Pizza', 'score': false},
],
},
{
'question':
'Which part of his body did musician Gene Simmons from Kiss insure for one million dollars?',
'answers': [
{'answerText': 'His tongue', 'score': true},
{'answerText': 'His leg', 'score': false},
{'answerText': 'His butt', 'score': false},
],
},
{
'question': 'In which country are Panama hats made?',
'answers': [
{'answerText': 'Ecuador', 'score': true},
{'answerText': 'Panama (duh)', 'score': false},
{'answerText': 'Portugal', 'score': false},
],
},
{
'question': 'From which country do French fries originate?',
'answers': [
{'answerText': 'Belgium', 'score': true},
{'answerText': 'France', 'score': false},
{'answerText': 'Switzerland', 'score': false},
],
},
];
Upvotes: 1
Views: 554
Reputation: 607
Wrap your code with a gesture detector.
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
// Generate 100 widgets that display their index in the List.
children: List.generate(5, (index) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => NewQuestionPage(
questionId: index.toString(),
)));
},
child: Container(
color: Colors.green,
height: 100,
child: Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline5,
),
),
),
);
}),
);
;
}
}
class NewQuestionPage extends StatelessWidget {
final String? questionId;
const NewQuestionPage({Key? key, this.questionId}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Questions"),
),
body: Center(child: Text(questionId!)),
);
}
}
Upvotes: 1