OnTap ListTile fetched from JSON, navigate to another screen

Question

I have a search/dropdownbar with filter that contains some ListTiles which are generated from json file. I want the users to be able to click a ListTile and go to the screen of that Tile.

Example: ListTile for Knossos on tap > navigate to Knossos(), and when they tap on Malia they should navigate to Malia().

Is this possible?

Json List:

[
    {
        "image": "images/crete/history/Knossos.jpg",
        "title": "Knossos",
        "description": "The most famous archaeological site in Crete..."
    },

    {
        "image": "images/crete/history/Malia.jpg",
        "title": "Malia",
        "description": "The Minoan palatial complex of Malia is..."
    }
]

ListTile:

return ListTile(
                      leading: Container(
                        height: 50,
                        width: 50,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(item.image),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      title: Text(item.title),
                      subtitle: Text(item.description),
                      onTap: (){
                        // how do I make every tile navigate to another screen?
                      },
                    );

Solution

What @Amon Chowdhury meant is you should not create seperate class for each card detail. Like say if your ListView has 5 cards named Card1,Card2,Card3,Card4,Card5 and you want to to each card's details on a new page when you tap them. Then instead of creating different classes like Card1(), Card2(), Card3() etc. you should create a single class named CardDetailsPage() and pass the json you are getting as a parameter.

Below is a sample on how you can achieve what we said above :

First comes your page where your list view is present :

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    

    return Material(
      child: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: ListView(
          scrollDirection: Axis.vertical,
          children: [
            ListTile(
                title: Text("Card 1"),
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 1", "Card 1 details")));
                },
            ),
            ListTile(
              title: Text("Card 2"),
              onTap: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 2", "Card 2 details")));
              },
            ),
            ListTile(
              title: Text("Card 1"),
              onTap: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 3", "Card 3 details")));
              },
            ),
            ListTile(
              title: Text("Card 4"),
              onTap: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 4", "Card 4 details")));
              },
            ),
          ],
        ),
      ),
    );
  }
}

Then comes the page which will appear of you tap and of the listTile in your list.

class CardDetailsPage extends StatelessWidget {

  final String name;
  final String details;

  CardDetailsPage(this.name,this.details);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: Center(child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("Name of card : "  + name),
            Text("Details : " + details),
          ],
        )),
      ),
    );
  }
}

As you can see in the above example, I've passed two string the to details page. Instead you can pass the decoded json as a Map or the imageURL,title and descriptions you are getting from json seprately as differnet strings to the your details page.

Comments

[Amon C]

Your approach is wrong. Alternatively, you can pass TITLE and other data variables to a page rather than creating classes for each item.

[be.fluidly]

I am not sure what you mean.. Still learning flutter.