[Flutter] Router Navigation

Posted 2021-03-26

鏍囩锛?a href='http://www.mamicode.com/so/1/class' title='class'>class   col   cannot   ret   red   first   code   build   title   

Basic navigation by using 鈥楴avigator.push鈥?& 鈥楴avigator.pop()鈥? for example, we have two screen, screen1 and screen2, we want to navigate between two screens:

// Screen1.dart

import 鈥?/span>package:flutter/material.dart鈥?/span>;
import 鈥?/span>screen2.dart鈥?/span>;

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text(鈥?/span>Screen 1鈥?/span>),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.red,
          child: Text(鈥?/span>Go Forwards To Screen 2鈥?/span>),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) {
                return Screen2();
              }),
            );
          },
        ),
      ),
    );
  }
}

 

Screen2.dart:

import 鈥?/span>package:flutter/material.dart鈥?/span>;

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text(鈥?/span>Screen 2鈥?/span>),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue,
          child: Text(鈥?/span>Go Back To Screen 1鈥?/span>),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

 

Using the named route:

In main.dart, we can list all the routes:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: Screen0(),
      initialRoute: 鈥?/span>/鈥?/span>,
      routes: {
        鈥?鈥? (context) => Screen0(),
        鈥?first鈥? (context) => Screen1(),
        鈥?second鈥? (context) => Screen2()
      },
    );
  }
}

To be noticed: 鈥榟ome鈥?& 鈥榠nitialRoute鈥?cannot be used at the same time.

 

       child: Column(
          children: <Widget>[
            RaisedButton(
              color: Colors.red,
              child: Text(鈥?/span>Go To Screen 1鈥?/span>),
              onPressed: () {
                Navigator.pushNamed(context, 鈥?first鈥?/span>);
              },
            ),
            RaisedButton(
              color: Colors.blue,
              child: Text(鈥?/span>Go To Screen 2鈥?/span>),
              onPressed: () {
                Navigator.pushNamed(context, 鈥?second鈥?/span>);
              },
            ),
          ],
        ),