title: How to use Navigator.of(context) inside parent widget's callback function?
body: <p>I am rather new to Flutter but I am coming from Angular background. In Angular, you oftentimes use the Parent/Child component pattern when rendering components. In such a scenario you would have the parent component respond to events emitted by the child component and then perform some logic. For example, you could have a parent component called <code>Dashboard</code> and inside the dashboard, you can have a button component. This button component would then emit an event when it was clicked. The parent would listen for this event and react when a new event is emitted, for example, change routes.</p>
  
  <p>My understanding is that Flutter has a similar concept in such that you can handle your logic inside the parent 'widget'. What I was attempting to achieve was to have a parent widget let's call it <code>LandingPage</code> this widget would then render two button widgets and I wanted to pass down callback functions to the button widgets and change routes in the parent when they were pressed. I extracted the button widgets into my app-specific widgets to remove code duplication as such:</p>
  
  <p><code>primary-button.dart</code>:</p>
  
  <pre><code>class PrimaryButton extends StatelessWidget {
    PrimaryButton({@required this.buttonText, this.onPressedCallback ,this.width: 300.0});  
    final String buttonText;
    final double width;
    final VoidCallback onPressedCallback;
  
    @override
    Widget build(BuildContext context) {
      return Container(
        height: 50.0,
        child: RaisedButton(
          elevation: 8.0,
          onPressed: () =&gt; this.onPressedCallback,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
          padding: EdgeInsets.all(0.0),
          child: ... (removed for brevity)
        ),
      );
    }
  }
  </code></pre>
  
  <p>For the <code>primary-button.dart</code> widget I wish to pass in any callback function that returns void (analogous angular's event emitter). As shown in the code above.</p>
  
  <p>In the parent component I then have the following:
  <code>landing-page.dart</code></p>
  
  <pre><code>class LandingPage extends StatelessWidget {
  
  void onLoadHomePage(BuildContext context){
      Navigator.of(context).push(...)
    }
  
   @override
    Widget build(BuildContext context) {
    return Scaffold(...
     PrimaryButton(buttonText: "Hello world", onPressedCallback: this.onLoadHomePage(context))
    );
   }
  
  }
  </code></pre>
  
  <p>The above of course doesn't work because the primary-button isn't ready to accept a callback with a context in its callback signature, plus <code>Navigator.of(context)</code> is expecting context to be used. Passing the <code>BuildContext</code> feels like this is the wrong way of doing, and even if I have to pass <code>BuildContext</code> between parent and child widget I have not been able to get this working. This seems reasonable right? Or is this wrong way of thinking about these stateless widgets.</p>
  
  <p>If I just copy the contents of <code>primary-button.dart</code> into the <code>landing-page.dart</code> widget and inside <code>onPressed</code> callback use <code>Navigator.of(context)</code> everything works as expected. But feel like I shouldn't have to do that. </p>