flutter初探,从零开始搭建一个app

一.flutter是什么？

Flutter是什么?
FlutterGoogle开发维护的一个跨平台（Android 和 iOS）的移动开发框架，使用的是 Dart 语言。Flutter在Dart中实现了其它大部分系统（组合、手势、动画、框架、widget等。

二.Flutter与react native 性能对比？

1。RN的渲染性能机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.react native渲染过程如下：

2.Flutter 和react native框架不同，Flutter既不使用WebView，也不使用操作系统的原生控件。 通过底层C/C++构建。不需要通过JSbridge层，导致其性能优于react native。下图为flutter的渲染过程：

三.flutter的安装和使用

作者这里选择Mac平台，IOS应用作为开发环境
1.获取文件

git clone -b beta https://github.com/flutter/fl...
export PATH=pwd/flutter/bin:$PATH
flutter doctor


2.创建项目和运行

//创建项目
flutter create [Project name]
cd [Project name]
//运行项目
flutter run
//如果没有启动终端模拟器时候会报错，这时候需要
flutter emulators
flutter emulators --launch apple_ios_simulator
//注意：IOS创建项目时候要保证有Xcode的环境.


四.编写第一个程序

1.引入对应的package文件
1）打开 pubspec.yaml, 并将需要包文件加入到配置中
2）在终端运行 flutter packages get
flutter packages get命令必须翻墙来执行，如果不行可以设置国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2.写出第一句hello world

3.在终端模拟器显示效果如下：

五.创建一个简单APP

1.布局listviwe

终端运行效果如下：

2.创建网络
引入dart.io处理网络事件
引入dart.convert处字符串json问题

3.加入图片请求后

六.打包运行

IOS需要通过Xcode内build到手机上
androud可以通过：flutter build apk边缘打包到手机上

七.结论:

Flutter目前还是存在一些不足的：
1.写布局的方式不如web舒服，写起来很生气。
2.会明显增加应用包体积。
flutter好处：
1.跨平台。
2.调试方便，代码更改之后，立刻可以看到效果。
3.社区发展较快。

参考文章：
https://www.zhihu.com/questio...
https://flutter.io/get-starte...