Gaurav Kumar
Gaurav Kumar

Reputation: 41

How can i fetch multiple list data to single screen in flutter?

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.

Grid view example

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

Answers (1)

Rohit Chaurasiya
Rohit Chaurasiya

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

Related Questions