navigator operation requested with a context that does not include a navigator statefulwidget

Question

I am working on the Flutter code that follows. I have issues with the second button called "Regitrese". Every place I have looked work with statelesswidgets so I'm not sure how to fix it. I tried changing the void to put on it home: MyHomePage() and put MyHomePage to statefull instead of taking the statefull from MyApp bus it shows a mistake Missing concrete implementation of StatefulWidget.createState. I am not sure how is it supposed to go. Can you make a button work in a StatefulWidget? Is there a trick I am not seeing?

void main()=> runApp(new MyApp());

class MyApp extends StatefulWidget{
 @override
   State<StatefulWidget> createState(){
     return new MyHomePage();
   }
}

class MyHomePage extends State<MyApp>{
 final TextEditingController rutController = TextEditingController();
 final TextEditingController passwordController = TextEditingController();
 var _rut, _password;

 @override
 Widget build(BuildContext context) {
   return new MaterialApp(
   home: new Scaffold(
    body: new Container(
      padding: const EdgeInsets.all(50.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextFormField(
            controller: this.rutController,
            decoration: InputDecoration(
              labelText: 'Rut',
              hintText: 'eg. 154683265',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    rutController.clear();
                  }
                )
            ),
          ),
          TextFormField(
            controller: this.passwordController,
            decoration: InputDecoration(
              labelText: 'Contraseña',
              hintText: 'Contraseña',
                suffixIcon: IconButton(
                    icon: Icon(Icons.clear),
                    onPressed: () {
                      passwordController.clear();
                    },
                )
            ),
            obscureText: true,
          ),
          RaisedButton(
            onPressed: (){
              loginButton(rut: this.rutController.text, password: this.passwordController.text);
            },
            child: Text('Login'),
          ),
          RaisedButton(
            onPressed: (){
              Navigator.push(
                 context,
                 MaterialPageRoute(builder(context)=>SelectUserPage())
              )
            },
            child: Text('Registrese'),
          ),
        ],
      ),
    ),
  ),
 );
}
}

class SelectUserType extends StatelessWidget{
 @override
 Widget build(BuildContext context){
  return new Container(
   child: new Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      RaisedButton(
        onPressed: (){
          //Do something
        },
        child: Text(''),
      ),
      RaisedButton(
        onPressed: (){
          //Do something
        },
        child: Text(''),
      ),
    ],
  ),
);
}
}

Answer 1

The thing is that you need to access a context below the MaterialApp widget that adds the Navigator to the tree. If you look at your code the context is above it.

One way to solve it is to move a part of the tree to another widget.

Or you can use a Builder around your button or around the Column as in the following code:

      Builder(
        builder: (context) => RaisedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(
                        builder: (context) => SelectUserType()));
              },
              child: Text('Registrese'),
            ),
      ),