List View on click navigate to another page in Flutter

user_19680809 0
Viewed 81

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])));
        });

  }
}
flutter navigation listview
3 Answers

Wrap Card widget into GestureDetector and you have onTap

return GestureDetector(
  onTap: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => YourRoute()));
  },
  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])
    )
  ),
)
user_179011320

first create model class for your list item like this:

class ItemModel {
 final String title;
 final Widget route;

 ItemModel({@required this.title,@required this.route });

}

then define you list like this:

final _list = [ ItemModel(
title: "Performance Pulses", route: SomeWidget()),
    ItemModel(
title: "Admin Indicator", route: SomeWidget2()),];

and your List would like to be this:

    ListView.builder(
            itemCount: _list.length,
            itemBuilder: (context, index) {
              return InkWell(
                  onTap: (){
                   Navigator.of(context).push(MaterialPageRoute(builder: (context) => _list[index].route));
                  },
                  child: Card(
                    child: ListTile(
                      title: Text(_list[index].title),
                      leading: const CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
                      trailing: Icon(icons[index]))),
  );
})
user_103069970

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]))),
      );
    });

   }
 }
user_80864010
Related