StaggeredGridView cannot pass an instance - The getter 'viewModel' isn't defined

Question

Working with StaggeredGridView, I cannot pass an additional instance like the viewModel below to a Material class, this is the error I get:

Error: The getter 'viewModel' isn't defined for the class '_MainPageState'.

Material Items(IconData icon, String heading, Color cColor) {
    return Material(
        child: InkWell(
          onTap: () {
            if (heading ==
                ('Text')) {
                  showMainDialog(context, viewModel); // <- The error
            } else if (heading ==      /* ^^^^^^^^^ */
                ('Text1')) {
                  showMainDialog(context, viewModel); // <- The error
            }                          /* ^^^^^^^^^ */
          },
          child: Center(
            child: Container(
              child:
                  Column(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: Icon(
                            icon,
                            color: cColor,
                          ),
                        ),
                      ),
                      Expanded(    
                        child: Padding(
                          padding: EdgeInsets.only(top:10),
                          child: Text(
                            heading,
                            softWrap: true,
                          ),
                        ),
                      )
                    ],
                  )
            ),
          ),
        ));
  }

  Widget loadMainPage(ViewModel viewModel) {
    return StaggeredGridView.count(
        shrinkWrap: true,
        crossAxisCount: 2,
        crossAxisSpacing: 12.0,
        mainAxisSpacing: 12.0,
        children: <Widget>[
          Items(
              Icons.add,
              ('Text'),
              Colors.green),
          Items(
              Icons.add,
              ('Text1'),
              Colors.red),
        ],
        staggeredTiles: [
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
        ],
      );
  }

Answer 1

Problem:

The problem is that you're attempting to use the viewModel variable in the Items method but the viewModel variable is not available to the Items method.

The viewModel variable is available in the loadMainPage method but it is not being passed into the Items method.

Solution:

You need to:

• add the ViewModel object as a parameter for the Items method and
• pass the viewModel variable to the Items method used in your loadMainPage method.

Update the Items method to this:

Material Items(IconData icon, String heading, Color cColor, ViewModel viewModel) { // <- Update here
    return Material(
        child: InkWell(
          onTap: () {
            if (heading ==
                ('Text')) {
                  showMainDialog(context, viewModel); 
            } else if (heading ==         
                ('Text1')) {
                  showMainDialog(context, viewModel); 
            }                             
          },
          child: Center(
            child: Container(
              child:
                  Column(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: Icon(
                            icon,
                            color: cColor,
                          ),
                        ),
                      ),
                      Expanded(    
                        child: Padding(
                          padding: EdgeInsets.only(top:10),
                          child: Text(
                            heading,
                            softWrap: true,
                          ),
                        ),
                      )
                    ],
                  )
            ),
          ),
        ));
  }

And update the loadMainPage method to this:

  Widget loadMainPage(ViewModel viewModel) {
    return StaggeredGridView.count(
        shrinkWrap: true,
        crossAxisCount: 2,
        crossAxisSpacing: 12.0,
        mainAxisSpacing: 12.0,
        children: <Widget>[
          Items(
              Icons.add,
              ('Text'),
              Colors.green, 
              viewModel, // <- Update here
          ),
          Items(
              Icons.add,
              ('Text1'),
              Colors.red, 
              viewModel, // <- Update here
          ),
        ],
        staggeredTiles: [
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
        ],
      );
  }