阅读 1481

Flutter 系列 - 环境搭建

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

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

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

本人开发环境

  • macOS Big Sur 版本 11.2 芯片 Apple M1

  • 磁盘空间:> 2.8 GB (要求的最小的空间)

  • $SHELL

echo $SHELL
/bin/bash
复制代码

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

安装 Flutter

通过官网下载安装包。

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

配置 flutterPATH 环境变量,格式如下:

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 StudioAndroid StudioFlutter 提供了一个完整的集成开发环境。

不管 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](https://stackoverflow.com/questions/68569430/flutter-unable-to-find-bundled-java-versionflutter-doctor-after-updated-andro)
复制代码

对应的解决方法:flutter-unable-to-find-bundled-java-versionflutter-doctor-after-updated-andro

验证

之后,运行 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 路径

    • Flutter plugin can be installed from:

      🔨 https://plugins.jetbrains.com/plugin/9212-flutter

    • Dart plugin can be installed from:

      🔨 https://plugins.jetbrains.com/plugin/6351-dart

    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.59.1)

    • VS Code at /Applications/Visual Studio Code.app/Contents

    • Flutter extension version 3.25.0

[✓] Connected device (1 available)

    • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.159

• No issues found!
复制代码

出现 No issues found! 的提示,说明你捣鼓成功了~

运行 Demo

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

查看 -> 命令面板 -> Flutter: New Application Project
复制代码

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

vscode_demo.png

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

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

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

当然你得在 Android Studio 上预设手机型号是哪个,不然初次在 VS code 上调不起来。

effect_result.png

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

文章分类
前端