List View on click navigate to another page in Flutter-CodePudding

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

  }
}

CodePudding user response：

Please try this. This is Model Class

class Item{
  String title;
  String longText;
  String imageUrl;
  Item({this.title,this.longText,this.imageUrl});
}

this is First Screen

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

class _MyHomePageState extends State<FirstScreen> {
  List<Item> _itemList = [
    Item(title: "title1", longText: "longtext1", imageUrl: "https://picsum.photos/200/300"),
    Item(title: "tite2", longText: "longtext2", imageUrl: "https://picsum.photos/200/300")
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sharing data between screens'),
        ),
        body: Center(
            child: ListView.builder(
          itemCount: _itemList.length,
          itemBuilder: (context, index) {
            return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => DetailScreen(item: _itemList[index])),
                  );
                },
                child: Container(margin: EdgeInsets.all(20), child: Text(_itemList[index].title)));
          },
        )));
  }
}

this is details screen

import 'package:flutter/material.dart';

import 'model/item.dart';

class DetailScreen extends StatelessWidget {
  final Item item;
  const DetailScreen({Key key,this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Detail Screen"),
      ),
      body: Center(
        child: Column(
          children:[
            Text(item.longText),
            Image.network(item.imageUrl,fit: BoxFit.fill,),
          ]
        ),
      ),
    );
  }
}

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

   }
 }