前言
一年前就關(guān)注到flutter，到現(xiàn)在才開始學(xué)flutter腋妙，在濟(jì)南這邊，感覺flutter還是差點火候讯榕，boss上直接搜flutter相關(guān)工作基本是空骤素，跨端App大多還是react nactvie和uni-app之類，本人做了一年多小程序和前端愚屁，前端是vue方向谆甜，初學(xué)flutter被各種新概念整的頭大，所以把自己的學(xué)習(xí)過程做記錄集绰，供大家參考。
小道消息
網(wǎng)上有種說法是今年3月蘋果要限制或下架H5混合App谆棺，原文鏈接App Updates for HTML5 Apps栽燕，當(dāng)然，每個人的解讀不同改淑，學(xué)一下Flutter也算提前準(zhǔn)備吧
簡介
這篇主要記錄flutter新建頁面碍岔，頁面基本結(jié)構(gòu)，以及頁面之間跳轉(zhuǎn)方法的朵夏。
參考鏈接
1蔼啦、Flutter實戰(zhàn)
2、Flutter 之頁面切換（基本路由）
正文
1仰猖、修改lib下main.dart
復(fù)制下面代碼捏肢，粘貼覆蓋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('文本內(nèi)容1'),
new Text(
'文本內(nèi)容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文件鸵赫，復(fù)制下面代碼到two.dart
import 'package:flutter/material.dart';
class TwoRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// 頂部導(dǎo)航
appBar: AppBar(
title: Text('頁面two'),
),
// 主體body
body: Container(
child: Text('這是新頁面two.dart'),
),
);
}
}
頁面截圖
相關(guān)說明
1、main.dart中class多重嵌套躏升，現(xiàn)在理解是MaterialApp()方法內(nèi)不能直接添加路由跳轉(zhuǎn)功能辩棒，參考鏈接Flutter入門--MaterialApp，Flutter：問題收錄膨疏。
2一睁、Dart2 后可以在創(chuàng)建對象的時候省略new和const
例如：Center()等同于new Center()
3、代碼中的“,”的使用佃却，個人建議能多加就多加者吁，編輯器會根據(jù)“,”來進(jìn)行格式化
