Cambiar de view con botón


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();
                },
              ),
            ),
          ),
        );   
  }
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *