前言
一年前就关注到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、代码中的“,”的使用，个人建议能多加就多加，编辑器会根据“,”来进行格式化
