Error in word "context" flutter

Question

I wanted the listtile to open a specific page, but it’s giving me an error in the "context". The code is as follows::

class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
        backgroundColor: const Color(0xFFFFFFFF),
        elevation: 0,
      ),
      body: _buildListView(),
    );
  }

  ListView _buildListView() {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            radius: 20,
            child: CircleAvatar(
              backgroundImage: AssetImage('assets/images/image000.jpg'),
              radius: 28,
            ),
          ),
          title: Text('INICIANTE'),
          trailing: Icon(Icons.keyboard_arrow_right),
     onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => SignUpScreen()),
      );
    },
],
    );
  }
}

Can someone help me?

Answer 1

The error in this case is self-explanatory. The variable context does not exist in the method you created. The IDE itself must be acknowledging this error.

Note that the context is received per parameter in build(BuildContext context), then you have to also pass parameter for method _buildListView(BuildContext context):

class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
        backgroundColor: const Color(0xFFFFFFFF),
        elevation: 0,
      ),
      body: _buildListView(context),
    );
  }

  ListView _buildListView(BuildContext context) {
    ...
     onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => SignUpScreen()),
      );
    ...
  }
}

Answer 2

You created this function _buildListView. This is a function that creates a widget and returns an instance of it. As we can see in this answer, this is not the best practice in this case as it has some disadvantages.

However, in your case, the problem is that when you do this you lose the reference to variable context that you need to pass on to the Builder. You can solve this in several ways, but the most direct ones are:

• Put as argument method _buildListView a context parameter:

ListView _buildListView(BuildContext context) {
[...]
}

and pass as parameter when calling it:

body: _buildListView(context)

• Another way is, as in the answer cited above, creating your own reusable Widget:

class MeuListView extends StatelessWidget {
  const MeuListView ({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            radius: 20,
            child: CircleAvatar(
              backgroundImage: AssetImage('assets/images/image000.jpg'),
              radius: 28,
            ), 
          ),
          title: Text('INICIANTE'), //
          trailing: Icon(Icons.keyboard_arrow_right), //
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => SignUpScreen()),

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

to then call you on your screen:

body: MeuListView(),

Note: You forgot a "close parentheses", that is, the character ) before the bracket that closes the Widgets list:

     },
   ),//Insira este
 ],

I don’t know if this was just time to copy the code, but I thought it was worth mentioning.