How to Open Another Page from a Card Click in Flutter

Question

Hey guy's I'm working on a app that has 3 cards on the home page I want each card to go to a different page based on a id that each card has so for example the math card I want to have it go to the MathHomePage and the science card I want it to go to the ScienceHomePage here's my code:

import 'package:appname/model/Topic.dart';

class TopicDao {

  static final List<Topic> topics = [
    const Topic(
      id: "1",
      name: "Math",
      image: "assets/img/math.png",
    ),
    const Topic(
      id: "2",
      name: "Science",
      image: "assets/img/science.png",
    ),
    const Topic(
      id: "3",
      name: "English",
      image: "assets/img/english.png",
    ),

  ];





   //I think I can use this code somehow to make it go to the pages.
  static Topic getTopicById(id) {
    return topics
        .where((p) => p.id == id)
        .first;




  }






}

Here's The Topic Class:

class Topic {
  final String id;
  final String name;
  final String image;


  const Topic({this.id, this.name, this.image});


}

I'm still very new to flutter so any help would be amazing!!!!

Thanks in advance :)

Answer 1

You can use navigator class to go to a different page onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen(id), )); }

If you are using a list to render the three cards then you can use its onTap() method and call another class inside nevigator and pass it the ID based on which you can display the different pages.
More here: https://flutter.dev/docs/cookbook/navigation/navigation-basics