Flutter gridview menu on tap function is not working

Question

I am trying to create an application in flutter latest version. I would like to create fragments instead of pages. Now in homepage fragment, I tried to make a gridview menu which has 6 menu item. I am stuck at onTap function because I wanted to move another fragment when the menu is tapped. its not working. I am sharing my code. Thanks in advance.

import 'package:flutter/material.dart';
import 'package:folder/fragments/fragment_form.dart';

class HomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
        height: MediaQuery.of(context).size.height / 1,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            //stops: [0.1, 0.5, 0.7, 0.9],
            colors: [
              Colors.teal[50],
              Colors.cyan[50],
              Colors.blue[50],
            ],
          ),
        ),
        child: new Center(
          child: new HomepageFragment(),
        )
    );
  }

}

class HomepageFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: new GridView.count(
        crossAxisCount: 2,
        children: [
          MyMenu(titleText: "Add Complain", iconImage: Icons.add_box, iconColor: Colors.cyan, position: 0),
          MyMenu(titleText: "Log In", iconImage: Icons.account_box, iconColor: Colors.cyan, position: 1),
          MyMenu(titleText: "About App", iconImage: Icons.airplay, iconColor: Colors.cyan, position: 2),
          MyMenu(titleText: "How we Work", iconImage: Icons.alarm_on, iconColor: Colors.cyan, position: 3),
          MyMenu(titleText: "All Complains ", iconImage: Icons.apps, iconColor: Colors.cyan, position: 4),
          MyMenu(titleText: "Privacy", iconImage: Icons.assistant, iconColor: Colors.cyan, position: 5),
        ],
      ),
    );
  }
}

class MyMenu extends StatelessWidget {

  MyMenu({this.titleText, this.iconImage, this.iconColor, this.position});
  final String titleText;
  final IconData iconImage;
  final MaterialColor iconColor;
  final int position;


  _getMenuTem(position){
    switch (position) {
      case 0:
        return new FormFragment();
      case 1:
        return new FormFragment();
      case 2:
        return new FormFragment();
      case 3:
        return new FormFragment();

      default:
        return new Text("Something went wrong");
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: Colors.white,
      margin: EdgeInsets.all(10.0),
      child: InkWell(
        onTap: () => _getMenuTem(position),
        onLongPress: () => _getMenuTem(position),
        splashColor: Colors.green,
        child: new Center(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                iconImage,
                size: 100.0,
                color: iconColor,
              ),
              Text(titleText, style: new TextStyle(fontSize: 17, color: Colors.teal[800])),

            ],
          ),
        ),
      ),
    );
  }
}

user_13452640 · Answer

Your _getMenuTem method is returning a Widget so you can't get the beaviour you expected.

TO navigate to a new screen, you need to use the Navigator class:

Example : Navigator.push(context,MaterialPageRoute(builder: (context) => NewScreen()));

I added a demo using your code as an example:

_getMenuTem(position, context) {
    switch (position) {
      case 0:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      case 1:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      case 2:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      case 3:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      default:
        return new Text("Something went wrong");
    }
  }

Flutter gridview menu on tap function is not working

1 Answers