详解Flutter在Mac上的环境配置及工程创建

2020-04-22  本文已影响0人  zorobeyond

     前言：关于Flutter 我也是知之甚少，就不多做介绍，本次只分享 Flutter 在 Mac 上的环境配置以及工程创建的几种方式，小白按照我的步骤配置基本不会出错，官方提供开发 Flutter的工具是 VSCode 和 Android Studio，VSCode 相对于 Android Studio 来说更加的轻量，插件更加的方便，也有大佬喜欢用Android Studio，毕竟是亲生的。

配置前资料准备：
macOS （本次配置时使用版本：10.15.4）
FlutterSDK （本次配置时使用版本：1.12.13+hotfix.8）
Xcode （本次配置时使用版本：11.4）
Android Studio （本次配置时使用版本：3.4.2）
VSCode（本次配置时使用版本：1.42.1）
NoxAppPlayer（本次配置时使用版本：3.0.1）
说明：Android Studio 与VSCode 可二选一，NoxAppPlayer可不选，因为有大佬觉得安卓自带模拟器太丑，所以选择“夜神”模拟器，软件都不小，建议提前下载安装避免耽误配置时间。

     所需软件可自行去对应官网下载，也可以下载我目前使用的版本，2020年2月份下载的，可能不是最新版本，但不影响使用，有需要的 点击下载 提取码：48ea

1. 安装Flutter

其实挺简单的，开始之前先深呼吸三次，告诉自己不急不躁，一步一步来就完事儿了。可以按照我的步骤，也可移步官方安装指导。
1.1 解压FlutterSDK到指定目录，看你自己喜好，我是放在Downloads根目录下。

!!! 注意：存放FlutterSDK的目录不要包含中文字符，否则会出错。

1.2 配置环境变量
打开终端
如果你使用默认的bash那么请配置~/.bash_profile，终端命令：vi ~/.bash_profile
如果你使用zsh（Mac新系统默认是zsh）那么配置~/.zshrc，终端命令：vi ~/.zshrc
比如：我用的是zsh就在终端输入

vi ~/.zshrc

得到

zsh: no such file or directory: /Users/zorobeyond/.zshrc

我这是新电脑，所以得新建一个.zshrc

touch .zshrc

然后再次输入

vi ~/.zshrc

确保输入法是英文状态，按下键盘上的i
粘贴下面三行代码进去

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在你自己电脑上的路径，需要修改，不知道路径或者怕自己敲错路径就command + N，新建终端窗口，找到Flutter解压后的包拖进去复制路径替换PATH_TO_FLUTTER_GIT_DIRECTORY，比如我的路径是：export PATH=/Users/zorobeyond/Downloads/flutter/bin:$PATH，直接复制粘贴路径会多出来一个/flutter，删掉即可。

这是我修改完的配置


替换自己路径后的配置

然后按Esc键，输入:wq，回车。

接着输入source ~/.zshrc让本次配置生效

source ~/.zshrc

可以输入echo $PATH查看配置是否成功

echo $PATH

如果出现flutter相关目录就说明成功了，我这边配置文件就一个，显示

zorobeyond@localhost ~ % echo $PATH
/Users/zorobeyond/Downloads/flutter/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin

!!! 补充：如果你同时使用bash 与zsh，由bash切换到zsh时，已经配置好的~/.bash_profile 将不会被加载，解决办法就是修改 vi ~/.zshrc ，在最下面添加：source ~/.bash_profile保存并退出，然后再输入一遍source ~/.zshrc 让它重新生效或者直接重启终端；反之，如果你配置好了~/.zshrc，由zsh切换到bash时也不会被加载，同样的修改vi ~/.bash_profile，再最下面添加source ~/.zshrc保存并退出，同样的再输入一遍source ~/.bash_profile 让它重新生效。我的理解是相当于iOS的 #import。
chsh -s /bin/zsh切换到zsh，chsh -s /bin/bash切换到bash

此时此刻可以运行flutter doctor 查看是否需要安装其它依赖项来完成安装。

!!! 注意：首次运行这个指令会下载一些东西比较慢，请耐心等待，有条件的可以挂个VPN能快一点。

flutter doctor -v

原来我的VSCode 与 Android Studio 还没有进行相关配置所以才有这么多的红×，红×和黄!一定要解决，避免以后开发出现别的问题。

2. 配置VSCode

打开VSCode，按下command + shift + p组合键，输入install选择安装插件

然后分别输入Flutter与Dart进行安装，安装成功会显示齿轮按钮，没安装会显示install按钮。至此，VSCode的相关配置就已经完成了。

2.1创建Flutter工程

创建Flutter共有三种方式，一种是用命令行，一种用VSCode工具，另一种是用Android Studio工具，本文只做介绍，大家根据自己喜好即可。

第一种： 用命令行创建Flutter工程
cd到指定目录下，输入

flutter create hello_flutter

!!!注意：flutter的工程命名规范是XXX_XXX，不是我们习惯的驼峰，静候几秒钟就创建成功了，然后打开刚才创建的工程就可以开始编程了。

!!! 补充：使用flutter create xxx_xxx命令创建的工程，iOS默认是swift语言，安卓默认是kotlin语言，那是因为苹果在大力推行新语言，谷歌也一样。通过命令flutter create --help就能在代码的第64行第65行查看到使用的默认语言。

zorobeyond@localhost desktop % flutter create --help
Create a new Flutter project.

If run on a project that already exists, this will repair the project,
recreating any files that are missing.

Usage: flutter create <output directory>
-h, --help                     Print this usage information.
    --[no-]pub                 Whether to run "flutter pub get" after the
                               project has been created.
                               (defaults to on)

    --[no-]offline             When "flutter pub get" is run by the create
                               command, this indicates whether to run it in
                               offline mode or not. In offline mode, it will
                               need to have all dependencies already available
                               in the pub cache to succeed.

    --[no-]with-driver-test    Also add a flutter_driver dependency and generate
                               a sample 'flutter drive' test.

-t, --template=<type>          Specify the type of project to create.

          [app]                (default) Generate a Flutter application.
          [module]             Generate a project to add a Flutter module to an
                               existing Android or iOS application.
          [package]            Generate a shareable Flutter project containing
                               modular Dart code.
          [plugin]             Generate a shareable Flutter project containing
                               an API in Dart code with a platform-specific
                               implementation for Android, for iOS code, or for
                               both.

-s, --sample=<id>              Specifies the Flutter code sample to use as the
                               main.dart for an application. Implies
                               --template=app. The value should be the sample ID
                               of the desired sample from the API documentation
                               website (http://docs.flutter.dev). An example can
                               be found at
                               https://master-api.flutter.dev/flutter/widgets/Si
                               ngleChildScrollView-class.html

    --list-samples=<path>      Specifies a JSON output file for a listing of
                               Flutter code samples that can created with
                               --sample.

    --[no-]overwrite           When performing operations, overwrite existing
                               files.

    --description              The description to use for your new Flutter
                               project. This string ends up in the pubspec.yaml
                               file.
                               (defaults to "A new Flutter project.")

    --org                      The organization responsible for your new Flutter
                               project, in reverse domain name notation. This
                               string is used in Java package names and as
                               prefix in the iOS bundle identifier.
                               (defaults to "com.example")

    --project-name             The project name for this new Flutter project.
                               This must be a valid dart package name.

-i, --ios-language             [objc, swift (default)]
-a, --android-language         [java, kotlin (default)]
    --[no-]androidx            Generate a project using the AndroidX support
                               libraries
                               (defaults to on)

Run "flutter help" to see global options.

如果你想创建的flutter工程iOS的语言是OC安卓语言是java的话，你需要在创建的时候进行语言指定。在终端使用以下命令：

flutter create -i objc -a java hello_flutter

也可以依自己的需求单独对iOS或者安卓的语言进行指定。

第二种： 使用VSCode工具创建Flutter工程
打开VSCode，按下command + shift + p组合键，输入flutter选择New Project，再输入工程名字（注意命名规范）按回车选择存放路径即可。
!!! 注意：这种方式创建出来的工程iOS默认语言也是swift安卓默认语言也是kotlin。

3. 配置 Android Studio

当我们装好SDK后，打开Android Studio按下 command + ， 组合键，进入偏好设置，如下图安装

安装Flutter插件，当跳出安装Dart插件的界面时，也点击Yes进行安装，到此Android Studio所有的配置也完成了,安装完成后重启 Android Studio。

第三种：使用Android Studio工具创建Flutter工程
选择Start a new Flutter project

每一个下面都有介绍，第一个是新建App，第二个是新建插件，第三个是新建包，第四个是混合开发，我们选择第一个就行。

接下来就是填写工程名称和选择保存路径，注意下工程命名规范。


最后点击finish静候几秒就好了，记得更新最新版Android Studio SDK以及IDEA环境，打开Android Studio会有弹窗提示的，细心的朋友就会发现跟新完logo颜色深浅变了一点，2020-5-27我刚更新到3.6.3，也是又踩了一个雷，下面还有一个雷。否则，使用3.4.2版本，不管你打不打勾，创建出来的工程iOS默认语言是swift安卓默认语言是kotlin。

!!! 补充一个踩过的雷，如果遇到Android Studio卡死，点击Start a new Flutter project没有反应的时候，找到解压flutter SDK的路径，依次进入bin→cache找到lockfile文件直接删除，重启Android Studio即可。忘记flutter SDK路径的可以用命令which flutter查看。

4. 最后检查

还剩最后一步，再次运行flutter doctor 查看是否全部完成安装。

flutter doctor -v

就剩一个模拟器没启动了，完美收官！祝大家开发愉快~


完美收官
上一篇下一篇

猜你喜欢

热点阅读