0

Estoy intentando utilizar Navigator en Flutter para hacer un cambio de pantalla como lo dice la documentación Navigate to second screen pero obtengo este error:

Another exception was thrown: Navigator operation requested with a context that does not include a Navigator.

Intento crear un ListView y en cada ListView agregar un elemento que al hacer click va desplegar a una segunda pantalla, también si fueran tan amables de brindarme una forma de pasar variables de la primera pantalla a la segunda pantalla.

El código que estoy utilizando es el siguiente:

class Numeria extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Numeria, el rincón de los ingenieros',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Numeria'),
        ),
        body: ListView(
          children: <Widget>[
            Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Matemáticas'),
                    subtitle: Text(
                        'Álgebra, Geometría, Trigonometría, Derivadas, Integrales y más'),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => SecondRoute()),
                      );
                    },
                  ),
                ],
              ),
            ),
            Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Física'),
                    subtitle: Text('Cinematica, Dinamica, Estatica y más'),
                  )
                ],
              ),
            ),
            Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Química'),
                    subtitle:
                        Text('Solubilidad, Temperatura, Estiquiometría y más'),
                  )
                ],
              ),
            ),
            Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Informática'),
                    subtitle:
                        Text('Estructuras, Algoritmos básicos, comandos y más'),
                  )
                ],
              ),
            ),
            Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Constantes'),
                    subtitle: Text('Constantes fisicas universales'),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Espero que me puedan ayudar, estoy iniciando en Flutter, creo que el problema tiene que ver con que no puede acceder a la instancia de Navigator, pero no estoy seguro de cómo resolverlo o como pasarle la instancia.

1 respuesta 1

1

Es un error clásico, el tema es que tienes el MaterialApp dentro del widget donde estás usando el Navigator, necesitas que el padre del contexto que usas tenga asociado el Navigator. Lo puedes solucionar de 2 formas.

1- Crea un nuevo widget Stateless o Stateful y pon todo lo que está dentro de home: ahí.

Ahí podrás invocar al Navigator sin problemas, ya que el contexto de ese widget, tendrá un Navigator como parent.

2- Dentro de home usa el widget Builder , te quedaría algo así .


home : Builder (builder: (nuevoContext) {

        return Scaffold (...);
       }
)

Y al momento de usar el Navigator.push, usa el contexto nuevo:

Navigator.push(
              nuevoContext,
          MaterialPageRoute(builder: (context) => SecondRoute()),
);

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.