Flutter: Adding Individual links to on a gridview-CodePudding

I have created a grid view, but my problem now is how can I give this grid individually linked to different pages. Below is my code snippet.

Thank you very much.

final List<String> _listItem = [
'assets/images/SDG Wheel_Transparent_WEB.png',
'assets/images/unicef.png',
'assets/images/share.png',
'assets/images/teamTrees.png',
'assets/images/TeamSeas.jpeg',
'assets/images/global giving.png',
'assets/images/svc.png',
'assets/images/food2.png',

];

@override
Widget build(BuildContext context) {
return Container(
  padding: const EdgeInsets.all(20.0),
  child: Column(
    children: <Widget>[
      Container(
        width: double.infinity,
        height: SizeConfig.screenHeight / 2.5,
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/images/food2.png'),
                fit: BoxFit.cover)),
      ),
      const Align(
        alignment: Alignment.centerLeft,
        child: Text(
          "Donation Cards",
          style: TextStyle(
            fontFamily: 'Quicksand',
            fontSize: 31,
            color: Colors.black,
            fontWeight: FontWeight.w300,
          ),
        ),
      ),
      Divider(color: Colors.black38),
      const SizedBox(
        height: 20,
      ),
      Expanded(
          child: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        children: _listItem
            .map((item) => Card(
                  color: Colors.transparent,
                  elevation: 0,
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        image: DecorationImage(
                            image: AssetImage(item), fit: BoxFit.cover)),
                  ),
                ))
            .toList(),
      ))
    ],
  ),
);
 }
}

..........................................................................................................................................................................................................................................................................

CodePudding user response：

You can create another list of links and access those links inside gridview by index like you are doing with image paths. You can also use List where each map can consist imagePath and link and assign that accordingly inside your gridview builder.

CodePudding user response：

I am sending you the code, try it and let me know if you understand or not. here inside link set your paths where you want to navigate. And also you need to add name routes to every page(If you don't know ask me). onTap will navigate you to the desired page you added in above map _listItems.

    final List<Map> _listItem = [
    {'img': 'assets/image.jpeg', 'link': 'YourPageName'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
    {'img': 'assets/image.jpeg', 'link': 'myDesiredUrl'},
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: MediaQuery.of(context).size.height,
            decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/food2.png'),
                    fit: BoxFit.cover)),
          ),
          const Align(
            alignment: Alignment.centerLeft,
            child: Text(
              "Donation Cards",
              style: TextStyle(
                fontFamily: 'Quicksand',
                fontSize: 31,
                color: Colors.black,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
          const Divider(color: Colors.black38),
          const SizedBox(
            height: 20,
          ),
          Expanded(
              child: GridView.count(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            children: _listItem
                .map((item) => Card(
                      color: Colors.transparent,
                      elevation: 0,
                      child: GestureDetector(
                        onTap: () {
                          //Navigate to the desired page according to the map
                          //you can also check the index here of item list and navigate accordingly without creating map
                          Navigator.of(context).pushNamed(item['link']);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              image: DecorationImage(
                                  image: AssetImage(item['img']),
                                  fit: BoxFit.cover)),
                        ),
                      ),
                    ))
                .toList(),
          ))
        ],
      ),
    );
  } ```