Flutter基础篇: Mac端搭建安装环境

2020-09-14 本文已影响0人铁头娃_e245

flutter作为谷歌推出的跨平台开发语言，是目前主流的跨平台语言选择。下面会从0到1的学习和使用这门语言

1.下载开发工具

首先需要下载对应的开发工具：

JDK
Flutter SDK
Android Studio
VSCode（主力代码开发工具）
Xcode

因为个人用的macbook作为开发工具，后续都是mac端的操作记录，但windows端也是大同小异，可作为参考。（搭建环境较为复杂，出问题的点也比较多，遇到问题多百度百度解决问题）

1.jdk安装地址（官网需要账户才能下载，如无账户可百度搜索下载）：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

mac版本jdk

2.flutter sdk地址：https://flutter.io/sdk-archive/

flutter最新版本sdk

3.Android Studio地址：http://www.android-studio.org

下载Mac端

4.VSCode地址：https://code.visualstudio.com
编译器中文化（默认是英文）：打开软件后->点击左面的拓展图标->在搜索框输入chinese->点击Install下载->重启VSCode

5.XCode：可在App Store搜索后下载

下载好后进行安装

1.jdk：直接安装即可，安装后进入终端输入 java -version，如果出现版本号java version "1.8.0_181"，就是安装成功
2.flutter sdk：下载成功后可得到如下文件

3.Android Studio：下载后一路next安装即可

下面为flutter配置环境变量

打开终端工具，使用vim进行配置环境变量，命令如下：

vim ~/.bash_profile

在打开的文件后发现是空白的，只需按i、I、a、A、o、O、r和R中某个键即可。进入编辑模式，增加一行代码

export PATH=/Users/XXX/Desktop/flutter/bin:$PATH

提示：这行命令你要根据你把flutter文件的位置来进行编写，写的是你的路径，很有可能不跟文章一样。可以把语句从后删除到=号位置，之后拖动文件得到具体路径即可。

输入完路径后按下图退出vim的编辑模式

(注意冒号要用英文标点的冒号，如果用中文冒号会没效果)，另外如果vim编辑器出了故障可以退出终端再次进入，如出现E325: ATTENTION可以选d

配置文件完成后，使用 source 命令重新加载一下（每次重启后使用flutter都要配置一下），具体命令如下：

source ~/.bash_profile

使用命令检查是否安装成功，具体命令如下：

flutter -h

出现flutter可用命令提示后，表示安装成功。

成功标识

检查开发环境

上面步骤完成，代表flutter环境已搭建完成，现在我们检查下开发环境是否可用，在终端输入如下命令

flutter doctor

显示结果如下

[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Xcode - develop for iOS and macOS (Xcode 11.6)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 4.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.49.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
 
[!] Connected device                          
    ! No devices available

! Doctor found issues in 5 categories.

可以看到显示有5处警告（一个❌，四个❗️），那么首先我们先解决Android前面的❌。（如果有多余的报错，可能是有的工具没有下载完成，请参照上面的链接把工具下载完整）

注意：带❌的就必须安装，带❗️的就可以暂时忽略。

解决带❌的问题

Android Studio安装flutter
打开软件后点击左下角的Configure后选择Plugins
搜索flutter后点击Install，安装好即可

安装完成后会有创建flutter的选项

如果有提示下载sdk需要一路next下载sdk

之后再次执行flutter doctor 我这里等了好长时间，报错会变成下图样式

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

之后根据提示在终端输入如下代码，运行过程一路选择y

flutter doctor --android-licenses

再次运行后就会提示

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

完成上述过程，安卓❌已解决 ~~~

接下来我们解决剩余❗️

Xcode报错

[!] Xcode - develop for iOS and macOS (Xcode 11.6)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods

上面的报错就是提示没有安装cocoapods，按照提示在终端输入：sudo gem install cocoapods，出现密码提示输入开机密码就开始安装了。之后就是漫长的等待啦，等安装完成会出现cocoapods after 35 seconds 32 gems installed，相关的Xcode报错会变成

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)

VS Code报错

[!] VS Code (version 1.49.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

打开vscode搜索并安装flutter，安装flutter时会自动安装Dart语言

安装后对应的vscode报错也会消失

虚拟机报错

[!] Connected device
    ! No devices available

这个报错是提示没有虚拟机，这里可以选择真机调试也可以安装使用虚拟机，下面是安装虚拟机教程
打开Android Studio软件，选择新建flutter项目

出现这个直接用默认的就可以，点击Next

选择flutter在工程的路径，其他默认即可（Project name是工程名，Project location是工程存储路径），点击Next

直接点击Finish即可，会等待一小段创建项目（我遇到了卡住的情况，但实际工程已经创建好了，可以直接去打开）

进入项目后在上面的Tools选项里选择AVD Manager选项

image.png
之后选择红框的按钮新建设备

可以随便选择一款手机后点击Next

这里需要选择一个系统版本，因为目前没有版本，需要下载一个，下载最新的即可，点击Download按钮下载

下载完成后点击next进到下图页面，点击Finish即可

看到这个页面，就是添加好啦，可以点击Actions里的播放⏯运行起来

下载完成
运行后就能看到模拟器啦

以上操作全部执行完，再次运行flutter doctor

[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.0)
[✓] Connected device (1 available)

• No issues found!

至此，flutter安装完成！全部对号，纵享丝滑~~~

下面就可以编写flutter项目代码啦，可以参照下一篇文章
 Flutter基础篇: helloword

感谢阅读！~~~ ☺