Cambiar de vista/ventana en Flutter es muy sencillo, en Flutter se navega entre pantallas, usando un Navigator
y Route
, todo dentro de la misma Activity
.
Un Route
es una abstracción para un “screen” o “page” de una aplicación, y un Navigator
es un widget que gestiona rutas. Un navigator puede hacer push y pop de routes para moverse de pantalla en pantalla. Los navegadores funcionan como una pila en la que puedes hacer push()
a nuevas rutas hacia las que quieres navegar, y desde la que puedes hacer pop()
a las rutas en las que quieres “volver atrás”.
Para cambiar de vista basta con crear un Route nuevo y agregarlo a la pila del Navigator:
Route route = MaterialPageRoute(builder: (context) => NuevoWidget()); Navigator.of(context).push(route);
Como ejemplo: crearemos un WidgetOrigen y WidgetDestino y un botón en cada uno, uno para abrir y otro para cerrar/volver al Widget Origen y nos quedará de la siguiente manera:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: WidgetOrigen(), ); } } class WidgetOrigen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Widget Origen'), ), body: Container( padding: EdgeInsets.all(32.0), child: Center( child: RaisedButton( child: Text("Ir al otro widget"), onPressed: (){ Route route =MaterialPageRoute(builder: (bc) => WidgetDestino()); Navigator.of(context).push(route); }, ), ), ), ); } } class WidgetDestino extends StatelessWidget { final Widget child; WidgetDestino({Key key, this.child}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Widget Destino'), ), body: Container( padding: EdgeInsets.all(32.0), child: Center( child: RaisedButton( child: Text("Regresar"), onPressed: (){ Navigator.of(context).pop(); }, ), ), ), ); } }