The method 'findAncestorStateOfType' was called on null in flutter dart

Question

I am creating an App and I am new in flutter, dart. I have problem in "context". I want to replace the page/screen onTab(). But I'm having the following error:

> ══════ Exception caught by gesture ════════════════════════ The
> following NoSuchMethodError was thrown while handling a gesture: The
> method 'findAncestorStateOfType' was called on null. Receiver: null
> Tried calling: findAncestorStateOfType<NavigatorState>()

Here is my code:

class Theorytest extends StatelessWidget {

    Widget  customcard(String testName ){
      return Padding(
        padding: EdgeInsets.all(10.0),
        child: InkWell(
          onTap: (){

                      Navigator.of(context).pushReplacement(MaterialPageRoute(

              builder: (context) => GetTestData(),
           ),
           );
          },
          child: Material(     
            borderRadius: BorderRadius.circular(50.0),
            elevation: 20.0,
            child : Container(
              child: Column(
                children : <Widget>[
                  Padding(
                    padding: EdgeInsets.fromLTRB(5.0, 20.0, 10.0, 20.0),
                    child: Text( testName,
                    style: TextStyle(
                      fontSize: 24.0,
                    ),
                    ),
                    ),
                ],
              ),
            ),
          ),
        ),
      );
    }
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.white,
        body: ListView(
          children : <Widget>[
            customcard('Theory Test 1'),
            customcard('Theory Test 2'),
            customcard('Theory Test 3'),
            customcard('Theory Test 4'),
            customcard('Theory Test 5'),
            customcard('Theory Test 6'),
            customcard('Theory Test 7'),
            customcard('Theory Test 8'),
            customcard('Theory Test 9'),
            customcard('Theory Test 10'),
            customcard('Theory Test 11'),
            customcard('Theory Test 12'),
            customcard('Theory Test 13'),
            customcard('Theory Test 14'),
            customcard('Theory Test 15')          
          ]
        ),
      );
    }

This is the code error. I don't know why context is not working for me.

Answer 1

The problem (why context is not working for you) is because there is no object of BuildContext in your customCard method

There are several ways to achieve this..

One way is to add a BuildContext parameter in your method Like this

  Widget customcard(BuildContext context, String testName) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: InkWell(
        onTap: () {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (context) => GetTestData(),
            ),
          );
        },
        child: Material(
          borderRadius: BorderRadius.circular(50.0),
          elevation: 20.0,
          child: Container(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(5.0, 20.0, 10.0, 20.0),
                  child: Text(
                    testName,
                    style: TextStyle(
                      fontSize: 24.0,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Then your ListView children will be like

customCard(context, "Theory Test 1")

Another way to do it is to create a stateless widget and return the customcard in the build method

class CustomCard extends StatelessWidget {
  String testName;
  CustomCard(this.testName);
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: InkWell(
        onTap: () {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (context) => GetTestData(),
            ),
          );
        },
        child: Material(
          borderRadius: BorderRadius.circular(50.0),
          elevation: 20.0,
          child: Container(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(5.0, 20.0, 10.0, 20.0),
                  child: Text(
                    testName,
                    style: TextStyle(
                      fontSize: 24.0,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Then your ListView children will be like...

CustomCard("Theory Test 1")

I hope this helps you.