search

riskers / blog

:pencil2: 博客写在 Issues 里
http://riskers.github.io/
MIT License
1.13k stars 96 forks source link

flutter入门-搭建环境 #42

Open riskers opened 5 years ago

riskers commented 5 years ago

Flutter 近来几个月炒得大热，对于移动开发者来说是挑战可能也是机遇。至此，跨平台开发 领域算了一下，有:

我列出这个表的时候，有些头皮发麻，不知道对于我这个想通过跨平台开发进入移动原生开发的人来说该选择哪个。之前只了解过一点 react native，感觉开发者体验并不好，想要 inspect 元素还要再开一个 devtool。这次，索性就直接试试 flutter。

现在记录一下我作为前端开发者玩 flutter 的体会。

安装

按照文档 的顺序来做，没什么好说的，我搭建环境还算顺利，如果你遇到问题，可能需要学会科学上网。概述一下我的安装过程(Mac)，一切以官网为准:

  1. 下载 Flutter 源码（注意，是 beta 分支）:

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

    然后在 .bashrc(如果你用 zshrc 的话就是 .zshrc) 中修改环境变量，将 flutter 项目根目录下 bin 路径加入环境变量 PATH:

    export PATH=$PATH:/Users/riskers/flutter/bin

    flutter --version 验证是否安装成功

  2. 检查你的机器上欠缺的环境

    因为是跨平台开发，所以你需要安装 iOS 和 Android 开发环境:

    flutter doctor

    就会看到下图，x 号是你需要安装的环境，这里因为都已经安装好了，所以都是对号。

    doctor

  3. 给 VSCode 安装插件: Dart 和 Flutter，这样就能够用 VSCode 开发 Flutter 了。

体验 Flutter

  1. 创建新应用:

    create new app

  2. 运行新应用

    按下 F5 进行调试，选择你的设备（需要你提前准备好模拟器或者真机）

    Android

    ios

    如果你运行 Android 项目遇到问题，查看这个回答

  3. 然后是 hot reload:

    hot load

    hot reload 已经是标配了，如果 hot reload 都没有，也太差劲了。

Debug

目前 layout 的 inspect 只支持在 Android Studio或IntelliJ IDEA的 Flutter插件。

更多

更多的实践会在未来慢慢总结出来，敬请期待。

向我捐助 | 关于我 | 工作机会