前言
一年前就关注到flutter，到现在才开始学flutter，在济南这边，感觉flutter还是差点火候，boss上直接搜flutter相关工作基本是空，跨端App大多还是react nactvie和uni-app之类，本人做了一年多小程序和前端，前端是vue方向，初学flutter被各种新概念整的头大，所以把自己的学习过程做记录，供大家参考。

小道消息
网上有种说法是今年3月苹果要限制或下架H5混合App，原文链接App Updates for HTML5 Apps，当然，每个人的解读不同，学一下Flutter也算提前准备吧

简介
这篇主要记录flutter新建页面，页面基本结构，以及页面之间跳转方法的。

参考链接
1、Flutter实战
2、Flutter 之页面切换（基本路由）

正文
1、修改lib下main.dart
复制下面代码，粘贴覆盖main.dart中的代码

import 'package:flutter/material.dart';

import './pages/two.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Column(
        children: <Widget>[
          new Text('文本内容1'),
          new Text(
            '文本内容2',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 18.0,
              height: 1.2,
              fontFamily: "Courier",
            ),
          ),
          new OutlineButton(
            child: new Text('点击按钮打开two.dart'),
            onPressed: () {
              Navigator.push(
                context,
                new MaterialPageRoute(builder: (context) => new TwoRoute()),
              );
            },
          )
        ],
      ),
    );
  }
}

2、新建two.dart
在lib文件夹下新建pages文件夹，pages文件夹下新建two.dart文件，复制下面代码到two.dart

import 'package:flutter/material.dart';

class TwoRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 顶部导航
      appBar: AppBar(
        title: Text('页面two'),
      ),
      // 主体body
      body: Container(
        child: Text('这是新页面two.dart'),
      ),
    );
  }
}

页面截图

image.png

image.png

image.png

相关说明
1、main.dart中class多重嵌套，现在理解是MaterialApp()方法内不能直接添加路由跳转功能，参考链接Flutter入门--MaterialApp，Flutter：问题收录。
2、Dart2 后可以在创建对象的时候省略new和const
例如：Center()等同于new Center()
3、代码中的“,”的使用，个人建议能多加就多加，编辑器会根据“,”来进行格式化