List View on click navigate to another page in Flutter

Question

I have a ListView and I would like to make the list items clickable. My idea is that when the user clicks on an item, it will be directed to another page. Each bottom should leads to different screen. I'm having trouble implementing it, I don't know what to use ontap. What should I do? Should I use ListTile instead of ListView?

import 'package:flutter/material.dart';
import 'package:untitled1/PerformancePulses.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: ListViewHome()
    );

  }
}
class ListViewHome extends StatelessWidget {
  final titles = ["Performance Pulses",
     "Admin Indicator",];
  final icons = [Icons.arrow_forward_ios_outlined, Icons.arrow_forward_ios_outlined];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: titles.length,
        itemBuilder: (context, index) {
          return Card(
              child: ListTile(
                  title: Text(titles[index]),
                  leading: const CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
                  trailing: Icon(icons[index])));
        });

  }
}

Answer 1

You need to add a click listener on the card and navigate to the screen you want

Sample

   import 'package:flutter/material.dart';
   import 'package:untitled1/PerformancePulses.dart';

   void main() {
     runApp(MyApp());
   }
 class MyApp extends StatelessWidget {
  // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: ListViewHome()
  );

    }
  }
class ListViewHome extends StatelessWidget {
  final titles = ["Performance Pulses",
 "Admin Indicator",];
 final icons = [Icons.arrow_forward_ios_outlined, 
 Icons.arrow_forward_ios_outlined];
 @override
 Widget build(BuildContext context) {
   return ListView.builder(
     itemCount: titles.length,
     itemBuilder: (context, index) {

      return InkWell(
        onTap: (){
          //this is where you navigate to new screen
          // SecondScreen() should be name of the second screen you created
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const SecondScreen(
              
            )),
          );
        },
        child: Card(
            child: ListTile(
                title: Text(titles[index]),
                leading: const CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
                trailing: Icon(icons[index]))),
      );
    });

   }
 }