What is the best way to add multiple onTap events in listview flutter?

Question

Widget _myListView(BuildContext context) {

  final titles = ['bike', 'boat', 'bus', 'car',
    'railway', 'run', 'subway', 'transit', 'walk'];

  final icons = [Icons.directions_bike, Icons.directions_boat,
    Icons.directions_bus, Icons.directions_car, Icons.directions_railway,
    Icons.directions_run, Icons.directions_subway, Icons.directions_transit,
    Icons.directions_walk];

  final ontaps = [ ,] ```how can i add multiple onTap events ```

  return ListView.builder(
    itemCount: titles.length,
    itemBuilder: (context, index) {
      return Card( //                           <-- Card widget
        child: ListTile(
          leading: Icon(icons[index]),
          title: Text(titles[index]),
          onTap: ,
        ),
      );
    },
  );
}

PLease help me How can I add onTap events easily for a long list

1.How can I add onTap events the way I added Icons, Heading,sub heading using Strings 2.I Am new to flutter please pardon my errors.. Thank you

Answer 1

Uptdated answer, now it navigates to other page if you tab bike:

main.dart

import 'package:flutter/material.dart';
import 'package:prova/page.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',
      routes: {
        'other_page': (BuildContext context) => Example(),
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: _myListView(context),
    );
  }
}

Widget _myListView(BuildContext context) {
  final titles = [
    'bike',
    'boat',
    'bus',
    'car',
    'railway',
    'run',
    'subway',
    'transit',
    'walk'
  ];

  final icons = [
    Icons.directions_bike,
    Icons.directions_boat,
    Icons.directions_bus,
    Icons.directions_car,
    Icons.directions_railway,
    Icons.directions_run,
    Icons.directions_subway,
    Icons.directions_transit,
    Icons.directions_walk
  ];

  functionBike() {
    Navigator.pushNamed(context, 'other_page');

    print('directions_bike');
  }

  functionBoat() {
    print('directions_boat');
  }

  functionBus() {
    print('directions_bus');
  }

  functionCar() {
    print('directions_car');
  }

  functionRailway() {
    print('directions_railway');
  }

  functionRun() {
    print('directions_run');
  }

  functionSubway() {
    print('directions_subway');
  }

  functionTransit() {
    print('directions_transit');
  }

  functionWalk() {
    print('directions_walk');
  }

  final List<Function> ontaps = [
    functionBike,
    functionBoat,
    functionBus,
    functionCar,
    functionRailway,
    functionRun,
    functionSubway,
    functionTransit,
    functionWalk
  ];

  return ListView.builder(
    itemCount: titles.length,
    itemBuilder: (context, index) {
      return Card(
        //                           <-- Card widget
        child: ListTile(
          leading: Icon(icons[index]),
          title: Text(titles[index]),
          onTap: () {
            ontaps[index]();
          },
        ),
      );
    },
  );
}

Hope it help.

Answer 2

To add onTap event for all your widgets in your listtile you can use the code below,

             return ListView.builder(
                    itemCount: titles.length,
                    itemBuilder: (context, index) {
                      return Card( //                           <-- Card widget
                        child: ListTile(
                          leading: IconButton(icon: Icon(icons[index]),onPressed: (){
                            // add your code on tap for your iconButton
                          },),
                          title: Text(titles[index]),
                          onTap: (){
                            // add your code on tap for your listview row tile
                          },
                        ),
                      );
                    },
                  );

This will work for you.