让Flutter跑起来

452 阅读2分钟

前言

浏览技术网站的时候,看到很多Flutter的字眼,号称让移动app更加流畅.兴趣值满分,于是开始学习了一下. Flutter 官网 Flutter中文文档

介绍

  • Flutter 是由 Google 的工程师团队打造的,用于创建高性能、跨平台的移动应用的框架
  • Flutter 专注于 Android and iOS 低延迟的输入和高帧率
  • Flutter的设计跟react-native很像,比RN更直接一点
  • Flutter的开发语言是Dart

历史演变

从我接触移动app开发开始, 从Hybrid开发依赖于WebView, 众所周知webView最大的问题就是性能问题,交互体验想当的不好.RN抛开了WebView,利用JavaScriptCore来做桥接,将js调用转为native调用。解决了性能问题,可以说是迈进了一大步.但是仔细想想还是需要中间量去做这件事情.这就相当与 厂家供货 -> 卖家出货 的联系变成 厂家供货 -> 供销员 -> 卖家 多个中间环节,多少也是会影响性能.flutter更加彻底,不用桥接,不用webview.直接通过生成一个UI库,给原生使用,这也是用Dart语言的原因吧.

与RN比较

  • 都是跨平台开发
  • 通过状态机控制局部变化
  • 支持热更新

安装环境

首先

git clone -b beta https://github.com/flutter/flutter.git

然后设置环境变量

vi ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

PATH_TO_FLUTTER_GIT_DIRECTORY为自己克隆flutter的文件目录 之后运行source $HOME/.bash_profile 刷新一下

运行ide

我用的是vscode 打开之后vscode,安装一下插件 1 之后快捷键是command+shift+P(或者view->Command Palette) 2.jpeg 运行如下图表示安装成功: 3.jpeg

如遇到安装不成功可以去看看官方文档, 然而也会有错误提示,处理一下即可 最后vscode的调试即可 4.jpeg

创建一个应用

5.jpeg

最后

6.jpeg

可以看到图片是pink颜色的, 默认是blue颜色的. 试了一下热加载功能保存一下就可以了.