dart - Flutter中如何实现动态widget路由？

Question

我正在将路由添加到我的 Flutter 应用程序中，并且我想在我的所有路由中重复使用一些常见的小部件。

例如，AppBarandDrawer实例应该在顶层视图上定义，并且路由视图应该在一个包含的 Widget 中（图像中的黄色部分）

是否支持？目前我发现的所有“Flutter Routing”参考都演示了整个视图的替换 => 每条路由的公共小部件的不同实例。

void redirect(BuildContext context, name) {
  Navigator.of(context).pushNamed(name);
}

getCommonDrawer(context) {
  return Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('header'),
          decoration: BoxDecoration(
            color: Colors.greenAccent,
          ),
        ),
        ListTile(
          title: Text('foo'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('bar'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  );
}

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Screen 1"),
      ),
      drawer: getCommonDrawer(context),
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              onPressed: () {
                redirect(context, "/screen2");
              },
              child: new Text("screen2"),
            )
          ],
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Screen 2"),
      ),
      drawer: getCommonDrawer(context),
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            new RaisedButton(
              onPressed: () {
                redirect(context, "/screen1");
              },
              child: new Text("screen1"),
            )
          ],
        ),
      ),
    );
  }
}


void main() { // 1
  runApp( // 2
    new MaterialApp( //3
      home: new Screen1(), //4
      routes: <String, WidgetBuilder> { //5
        '/screen1': (BuildContext context) => new Screen1(), //6
        '/screen2' : (BuildContext context) => new Screen2() //7
      },
    )
  );
}

标签： dartflutter