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

     前言:关于Flutter 我也是知之甚少,就不多做介绍,本次只分享 FlutterMac 上的环境配置以及工程创建的几种方式,小白按照我的步骤配置基本不会出错,官方提供开发 Flutter的工具是 VSCodeAndroid StudioVSCode 相对于 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 StudioVSCode 可二选一,NoxAppPlayer可不选,因为有大佬觉得安卓自带模拟器太丑,所以选择“夜神”模拟器,软件都不小,建议提前下载安装避免耽误配置时间。

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

1. 安装Flutter

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

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

1.2 配置环境变量
打开终端
如果你使用默认的bash那么请配置~/.bash_profile,终端命令:vi ~/.bash_profile
如果你使用zshMac新系统默认是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_DIRECTORYFlutter在你自己电脑上的路径,需要修改,不知道路径或者怕自己敲错路径就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

!!! 补充:如果你同时使用bashzsh,由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切换到zshchsh -s /bin/bash切换到bash

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

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

flutter doctor -v

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

2. 配置VSCode

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

然后分别输入FlutterDart进行安装,安装成功会显示齿轮按钮,没安装会显示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的路径,依次进入bincache找到lockfile文件直接删除,重启Android Studio即可。忘记flutter SDK路径的可以用命令which flutter查看。

4. 最后检查

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

flutter doctor -v

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


完美收官
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容