Flutter 系列 - 环境搭建

Flutter 系列 - 环境搭建

​​Flutter​​​ 作为火热的跨端工具包，在 ​​github​​ 上超过 120k 的关注量，可见一斑。

基于目前本人正在学习 ​​Flutter​​ 的路上，会将整个学习的过程记录下来。

本博文主要讲解​​环境的搭建​​​，先把项目搭建好，跑通 ​​demo​​ 才有玩下去的必要和成就感，你说是吧？

本人开发环境

macOS Big Sur 版本 11.2 芯片 Apple M1磁盘空间：> 2.8 GB （要求的最小的空间）$SHELL

echo $SHELL

⚠️ 之后出现并解决的问题都是基于本人的环境

安装 Flutter

通过​​官网​​下载安装包。

将安装包放到自己想存放的地方。这里，我放在 ​​文稿 -> sdk​​ 方便管理，然后解压下载包。

配置 ​​flutter​​​ 的 ​​PATH​​ 环境变量，格式如下：

export PATH=$PATH:${pwd}/flutter/bin或export PATH=${pwd}/flutter/bin:$PATH

这里我需要编辑 ​​~/.bash_profile​​ 文件，添加下面这行内容：

export PATH=/Users/jimmy/Documents/sdk/flutter/bin:$PATH

安装 IDE

作为一个前端开发者，比较偏向 ​​VS code​​，直接安装其稳定版即可。

因为需要调试安卓平台，还需要安装编辑器 ​​Android Studio​​​。 ​​Android Studio​​​ 为 ​​Flutter​​ 提供了一个完整的集成开发环境。

不管 ​​VS code​​​ 还是 ​​Android Studio​​​ 都需要安装 ​​Flutter​​ 插件。

Android Studio 我还是安装在 文稿 -> sdk

注意安装android studio的路径，也许会报sdk的错误。类似错误 ❌

# [Flutter-Unable to find bundled Java version(flutter doctor), after updated android studio Arctic Fox(2020.3.1) on M1 Apple Silicon](​​flutter doctor​​​ 或者 ​​flutter doctor -v​​ 来检查是否安装了必要的安装包。

下面是自己搭建环境的情况​​flutter doctor -v​​：

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.2 20D64 darwin-arm, locale zh-Hans-CN) • Flutter version 2.2.3 at /Users/jimmy/Documents/sdk/flutter • Framework revision f4abaa0735 (9 weeks ago), 2021-07-01 12:46:11 -0700 • Engine revision 241c87ad80 • Dart version 2.13.4[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/jimmy/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • Java binary at: /Users/jimmy/Documents/sdk/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted.[✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.2[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome[✓] Android Studio (version 2020.3) • Android Studio at /Users/jimmy/Documents/sdk/Android Studio.app/Contents # 留意 Android Studio 路径

出现 ​​No issues found!​​ 的提示，说明你捣鼓成功了～

运行 Demo

我们在 ​​VS code​​ 上新建一个项目：

查看 -> 命令面板 -> Flutter: New Application Project

初始化项目之后，​​运行 -> 启动调试​​，然后按照下图运行应用：

如果选中 ​​Chrome web​​ 会直接调起你安装好的谷歌浏览器。

如果选中 ​​Start iOS Simulator​​​ 会调起 ​​xCode​​ 的模拟器。

如果选中 ​​Start Pixel 2 API 31​​​ 会调起 ​​Android Studio​​ 的模拟器。

当然你得在 ​​Android Studio​​​ 上预设手机型号是哪个，不然初次在 ​​VS code​​ 上调不起来。⚠️ 如果上面的操作调不起模拟器，你还可以通过 运行 - 以非调试模式运行（启动调试） 调起来

【完】～ 下次可以更加愉快玩耍了

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。