CODEWITHSUNDEEP
flutterlistviewnavigation
Babar Ali
Babar Ali

Reputation: 165

List View on click navigate to another page in Flutter

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

  }
}

Upvotes: 2

Views: 2835

Answers (3)

Yakubu
Yakubu

Reputation: 1089

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

   }
 }

Upvotes: 0

eamirho3ein
eamirho3ein

Reputation: 17900

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

Upvotes: 1

Sabahat Hussain Qureshi
Sabahat Hussain Qureshi

Reputation: 1364

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

Upvotes: 2

Related Questions