How can i separate the menu from the link, so each one go to a specific interface cause they go all to one?

enter image description here

Please how can I separate this code? Cause when I tap on anything on the menu they go all to the same interface. How can you do a like for each of them alone? Here’s the code :

Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 20, right: 20),
                child: ListView(
                  children: [
                    menu(
                      Icons.account_circle,
                      "Prendre un rendez-vous",
                    ),
                    menu(
                      Icons.account_circle,
                      "Tester l'éligibilité",
                    ),
                    menu(
                      Icons.account_circle,
                      "Géo-localisation des centres",
                    ),
                    menu(
                      Icons.account_circle,
                      "Capturer le moment",
                    ),
                    menu(
                      Icons.account_circle,
                      "Rejoindre des donneurs",
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }


  Widget menu( IDIconData , String name,) {
    var size = MediaQuery.of(context).size;
    return GestureDetector(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => prendrerdv()));
      },
      child: Container(
        height: 90,
        // width: size.width,
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: EdgeInsets.only(left: 20, top: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 30),
                    child: Text(
                      name,
                      style: const TextStyle(
                        color: Color(0xff363636),
                        fontSize: 17,
                        fontFamily: 'Roboto',
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

>Solution :

Pass a VoidCallback or Function to the same function, then you can access its tap individually.

  menu(
     Icons.account_circle,
     "Rejoindre des donneurs",
     onTap: {
        Navigator.push(context, MaterialPageRoute(builder: 
        (context) => SpecificScreen()));
     }
    ),

And menu function will change to

Widget menu( IDIconData , String name, {VoidCallback onTap}) {
var size = MediaQuery.of(context).size;
return GestureDetector(
  onTap: () {
    onTap?.call();
  },
  child: Container(
    height: 90,
    // width: size.width,
    margin: EdgeInsets.only(top: 10),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(5),
    ),
.......

Leave a Reply