Flutter 开发初探
导言
2018年移动开发迎来一个新的成员，那就是flutter,作为谷歌的新产品第一时间就在业界掀起一场热潮，flutter的出现让ReactNative一枝独秀的局面打破，至此Facebook宣布让ReactNative回炉重造。新技术兴起往往都会有一段市场适应期，从而来决定它是否能够存活下去，flutter就展示了他足够优秀的特点，如果还有人要问flutter是否值得去学？那就不得不说你对新技术的敏锐度还有所欠缺。
认识Flutter
学习一门新的技术，我们不能盲从，不能别人说好你就去学，关键还看你是否需要或则说有兴趣，那么需求和兴趣从什么来判断，就从市场来判断，所以在此之前不妨带着问题去一步一步地区探索flutter.
Flutter是什么？
Flutter是谷歌旗下推出的基于dart语言的移动UI框架，他可以一套代码实现IOS，Android以及Web前端页面，并且可以每秒120帧的速度持续渲染。
flutter中文网
Flutter的优点有哪些？
说到Flutter拥有哪些优点不得不把它与它前辈ReactNative对比了。
Flutter在性能上相比RN而言更加接近原生的体验,Dart是AOT编译的，编译成快速、可预测的本地代码。并且它同同样也可以多平台同时开发运行，包含Android，ios，web网页。
RN采用JavaScript语言开发，基于React.js，对前端工程师更友好。Dart语言受众小,但是dart语言曾经是宣布要取代js成为新一代的语言，不过事与愿违，但是它的写法也继承js的几乎所有优点，有前端经验的朋友可以放心食用。
Flutter自己实现了一套UI框架，丢弃了原生的UI框架。而RN还是可以自己利用原生框架，两个各有好处。Flutter的兼容性高，RN可以利用原生已有的优秀UI
在布局页面上不得不吐槽的就是Flutter的地狱式嵌套，这大概是目前Flutter的一大缺点之一吧。RN代码是JSX语法，从语言角度上看它保留了基础的js与html，css这前端三剑客的使用特点，这也是RN这么受欢迎之一，而Flutter的布局更像native布局，但是去掉xml通过代码直接写需要适应下
Flutter经过这么久的发展第三方库也层出不穷，虽然还比不上RN的生态圈，但是flutter的发展不容小视。
Flutter应该怎么去学习？
说到怎么去学一个东西，那么我们就先来看一张图：
image.png
在之前我听过一位朋友说到怎么去学习一个新的东西，接下来我把这个方法分享给各位。
第一步.花费半个小时了解所要学习的技术是什么，他有什么特点，这就是知己知彼方能百战不殆。
第二步.花费一个小时搭建好新技术的环境平台，跑一个hello world试试看。
第三步.花费一个小时到一个半小时熟悉该技术的语法规则。
第四步.花费两到三小时编写一个实际场景中demo，如简单电商操作，包含列表展示交互等。
总的花费大约在5个小时左右，我姑且把它叫做5小时学习法吧，希望对大家有用。
Flutter实战
UI视图
import 'package:flutter/material.dart';
import 'RandomWordState.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new MaterialApp(
title: "滚动列表",
theme: new ThemeData(primaryColor: Colors.amberAccent),
home: new RandomWords(),
));
}
}
解析：
1.flutter中程序开始都是从main函数作为程序主要入口
2.flutter导入第三方包或则内部包通用import，如果第三方包需要添加前缀package:。
3.flutter同样拥有java的一些特性包含声明关键字等，也拥有继承构造多态等特性。
4.flutter内部代码实现都是采用json数据格式来调用对象传参。
5.material.dart属于flutter内部容器组件包
网络请求
import 'dart:convert';
import 'dart:io';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _ipAddress = 'Unknown';
_getIPAddress() async {
var url = 'https://httpbin.org/ip';
var httpClient = new HttpClient();
String result;
try {
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == HttpStatus.OK) {
var json = await response.transform(utf8.decoder).join();
var data = jsonDecode(json);
result = data['origin'];
} else {
result =
'Error getting IP address:\nHttp status ${response.statusCode}';
}
} catch (exception) {
result = 'Failed getting IP address';
}
// If the widget was removed from the tree while the message was in flight,
// we want to discard the reply rather than calling setState to update our
// non-existent appearance.
if (!mounted) return;
setState(() {
_ipAddress = result;
});
}
解析：
1.flutter内部是采用HttpClient作为请求组件
2.flutter请求数据解析需要转化为json数据格式
3.flutter除去他原生自带网络请求库，同时也有第三方请求库，如dio，http等，相对于原生网络请求更加简洁。
路由跳转
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
final _biggerFont = const TextStyle(fontSize: 18.0);
final _saved=new Set<WordPair>();
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
},
),
);
解析：
1.flutter跳转页面使用Navigator.push() 方法，返回上个页面使用 Navigator.pop()
2.flutter由于是万物皆 Widget，所有跳转也是打开一个新的Widget视图。
小结
flutter的基础入门今天先讲到这里，期待往后flutter能够带来更多的惊喜。
