Flutter入门 (3)路由跳转

      一拖再拖再再拖，不想写。好几天了，我使用过的flutter路由跳转有两种。接着上一篇listView代码写跳转页面

   一种是静态路由跳转，首先在MaterialApp定义好静态路由，使用的方法就是图二。

   一种是动态路由跳转，动态的不用定义，直接在点击事件跳转就可以了。

总体代码为:

import 'package:flutter/material.dart';
import 'package:flutter_app/MyPage.dart';
import 'package:path/path.dart';

void main() => runApp(MyListView(
      items: new List<String>.generate(100, (i) => "Item $i"),
    ));

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'list',
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text("ListTile"),
          ),
          body: new Center(
            child: new ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                _getContainer('Maps', Icons.map),
                _getContainer('phone', Icons.phone),
                _getContainer('Maps', Icons.map),
              ],
            ),
          )
          // new MyHomePage(),
          ),
    );
  }
}

class MyListView extends StatelessWidget {
  final List<String> items;

  const MyListView({Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var _throwShotAway = false;
    // TODO: implement build
    return new MaterialApp(
      title: "多个条目",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("appBar"),
        ),
        body: new ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () => _goTo(context),
                child: new Card(
                  child: new ListTile(
                    title: new Text("titlte"),
                    subtitle: new Text("subtitle"),
                    leading: new Icon(
                      Icons.email,
                      color: Colors.blueAccent,
                    ),
                    trailing: new Checkbox(
                        value: _throwShotAway, onChanged: (bool newValue) {}),
                  ),
                ),
              );
            }),
      ),
      routes: {
        "myPage": (BuildContext context) => new MyPage(),
      },
    );
  }

  ///跳转
  void _goTo(BuildContext context) {
  //  Navigator.pushNamed(context, "myPage");
    Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
      return new MyPage();
    }));
  }
}

/**
 * 抽取item项
 */
Widget _getContainer(String test, IconData icon) {
  return new Container(
    width: 160.0,
//      ListTile
    child: new ListTile(
//       显示在title之前
      leading: new Icon(icon),
//        显示在title之后
      trailing: new Icon(icon),
      title: new Text(test),
      subtitle: new Text("我是subtitle"),
    ),
  );
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _throwShotAway = false;

  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new ListTile(
        title: new Text("title"),
        subtitle: new Text("subtitle"),
        leading: new Icon(
          Icons.email,
          color: Colors.blueAccent,
        ),
        trailing: new Checkbox(
            value: _throwShotAway,
            onChanged: (bool newValue) {
              setState(() {
                _throwShotAway = newValue;
              });
            }),
      ),
    );
  }
}

第二个页面MyPage：

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: new PageWidget(),
    );
  }
}

class PageWidget extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new PageState();
  }
}

class PageState extends State<PageWidget> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child:Text("页面二")
      ),
    );
  }

}