码迷,mamicode.com
首页 > 其他好文 > 详细

[Flutter] Router Navigation

时间:2019-10-13 21:05:55      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:class   col   cannot   ret   red   first   code   build   title   

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

// Screen1.dart

import package:flutter/material.dart;
import screen2.dart;

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

 

Screen2.dart:

import package:flutter/material.dart;

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text(Screen 2),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue,
          child: Text(Go Back To Screen 1),
          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: /,
      routes: {
        ‘/‘: (context) => Screen0(),
        ‘/first‘: (context) => Screen1(),
        ‘/second‘: (context) => Screen2()
      },
    );
  }
}

To be noticed: ‘home‘ & ‘initialRoute‘ cannot be used at the same time.

 

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

 

[Flutter] Router Navigation

标签:class   col   cannot   ret   red   first   code   build   title   

原文地址:https://www.cnblogs.com/Answer1215/p/11668107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!