Flutter环境配置

for mac：www.jianshu.com/p/b50a92afb…
for windows：www.jianshu.com/p/16917a1ab…

选择Flutter

网上文章有的说flutter好有的说RN好，因为我只用过flutter所以这里就只讲一下flutter；flutter有自己专属的一套widget，并通过自己的渲染引擎来渲染UI，在ios和安卓上不存在误差；Flutter使用的是dart语言，dart一开始是作为替代javascript产生的，所以Flutter能做的不仅仅是app，还能通过相应的手段开发桌面应用和web应用。这里推荐几篇关于flutter和RN的比较的文章；

start

// create new projectflutter create <project_name>// list all emulatorsflutter emulators// start emulatorsflutter emulators --launch <emulators's id>// start projectflutter run -d <emulators's id>

使用插件

直接在pubspec.yaml中的dependencies下添加，如：

然后执行flutter packages get安装插件

Flutter有状态widget和无状态widget

1、stateless widget

不用保存以及操作自己的数据，仅仅是用来接受父widget的数据
只有一个生命周期函数，build

2、stateful widget

有状态widget有比较复杂的生命周期，跟react的组件比较相似，同样都是数据驱动视图的更新，react通过this.setState来改变数据从而更新视图，flutter通过setState来改变数据驱动视图；

flutter生命周期

createState：创建新StatefulWidget的时候执行
initState：

stateful widget创建完后调用的第一个方法，只执行一次
在该方法中执行一行初始化操作
相当于react的componentDidMount

didChangeDependencies

initState执行后立即调用，之后stateful widget刷新就不会执行了
当子widget依赖父widget的数据变化时，则会执行该方法
数据共享

build

在didChangeDependencies执行后立即执行
当UI需要重新渲染的时候执行
渲染UI的方法，相当于react的render

addPostFrameCallback：渲染结束后的回调
didUpdateWidget

父widget的状态变更时执行
相当于react的componentDidUpdate钩子

deactivate

widget将要销毁时执行
相当于react的componentWillUnmount

dispose

widget移除后执行
在该方法中执行一些销毁操作，比如销毁一些controller以防止内存泄漏

数据请求

flutter的数据请求通过flutter的插件，这里以dio为例

// get请求final response = await dio.get(url, queryParams);if (response.statusCode == 200) {    return response.data;} else { print('请求错误'); }// post请求final response = await dio.post(url, params) {    if (response.statusCode == 200) {    return response.data;} else { print('请求错误'); }

flutter请求一般划分为model层和dao层，因为请求返回的数据一般都是json结构，json在map结构中如果字段不小心拼错了在编译阶段是不会报错的，所以在model层定义好数据类型，通过fromJson把数据转换成dart model类，这样调用的结构代码更具有安全性，编译器也会有自动补全的提示，在编译阶段字段拼错也会报异常

定义一个dart model类

class CommonModel {    final int code;    final String msg;        CommonModel({this.code, this.msg});        factory CommonModel.fromJson(Map<String, dynamic> json) {        return CommonModel(            code: json['code'],            msg: json['msg']        );    }}// 使用model static Future<CommonModel> logout() async {    final res = await dio.get(url, queryparams);        return CommonModel.fromJson(res.data);}

初探Flutter