flutter learning-routing (routes)

Learning materials: Flutter mobile app

The screen or page that displays the content is called routes. The Navigator widget provides methods to manage these routes, such as Navigator.push and Navigator.pop. The routing objects will be placed in a Stack. We can create a Navigator ourselves to handle the routing heap, or we can use WigetsApp or MaterialApp widgets to create a Navigator for us, use the Navigator.of method, and hand over the context to it, so that push and pop can be realized .

In the MaterialApp of App() of main.dart, there is a home attribute value. The page it displays is the bottom route in the route heap, that is, the page that will be displayed at the beginning. When a new route is pushed to the top of this route heap, the page of the new push will be displayed on the screen.

one example:

Home value modified in main.dart

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
     	home: NavigatorDemo(),
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

Create a new navigator_demo.dart, use Navigator.of(context).push()

class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: null,
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
               	Navigator.of(context).push(
                	MaterialPageRoute(
                		builder: (BuildContext context) => MyPage(title: 'About'),
               		),
              	);
                Navigator.pushNamed(context, '/about');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget{
  final String title;

  MyPage({
    this.title
});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);//返回上一个路由
        },
      ),
    );
  }
}

operation result:

In MaterialApp, we define some named routes in advance, and then only need to give the name when we want to push.
Add the routes attribute to MaterialApp, which contains map, each has a corresponding name and value (things to be displayed after opening the route),

example:

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context++) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
	    home: NavigatorDemo(),
        routes: {//map
          '/about':(context) => MyPage(title:'About'),
        },
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: null,
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
                Navigator.pushNamed(context, '/about');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget{
  final String title;

  MyPage({
    this.title
});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);
        },
      ),
    );
  }
}

You can also use the initialRoute instead of the Home attribute to set the initial route.

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context++) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
//        home: NavigatorDemo(),
        initialRoute: '/',
        routes: {//map
          '/':(context) => NavigatorDemo(),//初始路由
          '/about':(context) => MyPage(title:'About'),
        },
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}