On Tap In Gridview Container Flutter

Contents hide

Problem Description:

In Flutter I have Gridview with three static containers. I am trying to achieve tap action in the Container. The container have Image and Text. I tried with Inkwell.

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "4.0",
        home: Scaffold(
            appBar: AppBar(title: const Text(_title)),
            body: GridView.count(
              crossAxisCount: 3,
            
              children: [
                Container(
                  color: Colors.green,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.work,
                        color: Colors.white,
                        size: 60,
                      ),
                      Text("Work ", style: TextStyle(color: Colors.white, fontSize: 18))
                    ],
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        Icons.account_circle,
                        color: Colors.white,
                      ),
                      Text("Account", style: TextStyle(color: Colors.white))
                    ],
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        Icons.message,
                        color: Colors.white,
                      ),
                      Text("Messages", style: TextStyle(color: Colors.white))
                    ],
                  ),
                ),
              ],
              shrinkWrap: true,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
            )));
  }

I am not sure about where to set InkWell in the container. I am bit new to Flutter, Any suggestions would be helpful.

Solution – 1

You can use Inkwell Widget for this purpose

InkWell(
      onTap: () { 
              // your action 
          },
      child: YOUR CHILD WIDGET,
),

Solution – 2

First for cleaner code make widget from your container like this:

Widget CustomItem(String label, IconData icon, Function()? onTap) {
    return InkWell(
      onTap: onTap,
      child: Container(
        color: Colors.green,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: Colors.white,
              size: 60,
            ),
            Text(label, style: TextStyle(color: Colors.white, fontSize: 18))
          ],
        ),
      ),
    );
  }

then use it like this:

GridView.count(
        crossAxisCount: 3,
        children: [
          CustomItem("Work", Icons.work, () {
            print("work clicked");
          }),
          CustomItem("Account", Icons.account_circle, () {
            print("Account clicked");
          }),
          CustomItem("Messages", Icons.message, () {
            print("Messages clicked");
          })
        ],
        shrinkWrap: true,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),

Rate this post