Mac Flutter环境配置

Flutter的环境配置其实是比较简单的。我这里是选择 Android Studio 作为开发 Flutter 的⼯具。

一、安装Fluter

下载 Flutter 的 SDK ,官网下载地址:https://flutter.dev

选择MacOS,选择下载最新的 Stable 版本

也可以选择 SDK releases 下载旧版本

下载完成后,解压安装,我这里选择安装在家目录下(~/)。因为我们配置的环境变量的文件也是放在这个目录下的。

二、配置环境变量

Flutter 在运⾏的时候,需要去官⽅下载所需要的资源,那就需要镜像服务器去拉取。到你对应 Shell 的配置⽂件进⾏配置。如果你使⽤默认的bash那么配置 ~/.bash_profile 。如果你使⽤zsh(Mac新系统默认是zsh)那么配置 ~/.zshrc。我这里是配置了.bash_profile。

可以直接在访达里面前往 ~/.bash_profile,假如找不到就需要去创建这个文件了。或者在终端输入 open ~/.bash_profile,假如直接打开了文件则证明存在。

如何创建 .bash_profile 文件

一般我们打开终端就是默认在家目录下,创建 .bash_profile 文件有两种方式:

第一种方式,在终端依次输入下面命令

1. touch .bash_profile

2. open .bash_profile

3. source .bash_profile

第二种方式,在终端输入

vim .bash_profile

输入 i 进入编辑模式

编辑完了以后按 ESC 出编辑模式

输入 :w 保存文件,或者 :wq 保存文件并且退出vim

配置 Flutter 镜像

在 .bash_profile里面添加

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

配置 Flutter 环境变量

在 .bash_profile里面添加

export FLUTTER=~/flutter

export PATH=$FLUTTER/bin:$PATH

然后在终端输入 source ~/.bash_profile 回车才会生效

那么接下来我们可以看看 Flutter 是否配置完成了。Flutter 有⼀个 doctor 检测指令。专⻔⽤于检测你的 Flutter 环境的。

flutter doctor

打对勾的则证明配置的就没有问题了,这里看到 Android Studio 还没有配置。我的 Mac 上面已经安装了 Xcode 和 VS Code。

配置 iOS 开发环境

安装 Xcode

通过 Mac App Store 直接下载安装

通过在命令行来配置

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

安装 iOS 模拟器

通过下面命令来运行模拟器

open -a Simulator

启动指定型号的模拟器

xcrun simctl boot "iPhone X"

配置证书和描述文件

项目要想运行在 iOS 真机设备上,是需要在iOS项目里面配置相关证书和描述文件的,具体配置可以咨询iOS开发人员

配置 Android Studio

安装 Android Studio

先安装Android Studio可以去国内官⽹ https://developer.android.google.cn/studio下载。

这里根据Mac芯片类型选择,我是 M1机器,选择 Mac with Apple chip

根据安装向导,我们需要安装Android SDK、 Android SDK Command-line Tools、 Android SDK。通过快捷键CMD + ,进入偏好设置,设置 Android SDK,选择 SDK Tools 进行安装。注意:这里 Android SDK 的路径不要随便修改,这里是 SDK 安装目录

然后还需要安装 Flutter 插件,点击 Plugins 搜索 Flutter 进行安装。 因为 Flutter 是 Dart 语言开发的,安装过程中会弹出需要安装 Dart 插件

安装完成之后,再 flutter doctor 检查下环境是否已经配置好了

发现 Android 的许可证有问题,在终端输入

flutter doctor --android-licenses

这个错误需要再去 Android SDK 那里,选择安装这个

如果你没有配置 Java 环境,一般配置 Java8 就可以了,也会报出问题,本次我是早就配置好环境了,没有出现问题。

再次 flutter doctor 发现就好了,没有问题了

重启 Android Studio 就发现可以创建 Flutter 项目了

在安装过程中,遇到了什么问题不要着急,一个个的去解决就可以了,现在 Flutter 发展几年了已经相对成熟了,不知道怎么解决复制问题去搜索就可以找到答案。

配置 Android 的模拟器

其实发现市面上根本没有好用的模拟器,我是安装了一个支持 Mac ,相对好用的夜神模拟器

在⾸次运⾏ Flutter 项目的时候,你会发现卡在这不动了

Running Gradle task 'assembleDebug'...

原因是Gradle的Maven仓库在国外,解决这个问题只能配置镜像

1. 修改项⽬下的 build.gradle⽂件

⽂件路径:项⽬ --> Android -->build.gradle ⽂件 

修改内容:找到buildscript 和allprojects 将⾥⾯的:

google() 

mavenCentral()

修改为阿⾥云镜像

maven { url 'https://maven.aliyun.com/repository/google' } 

maven { url 'https://maven.aliyun.com/repository/jcenter' } 

maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

2. 修改Flutter安装⽬录中的flutter.gradle⽂件

⽂件路径:flutter/packages/flutter_tools/gradle/flutter.gradle 

修改内容(加⼊阿⾥镜像):

buildscript {

repositories {

// google()

// mavenCentral()

maven { url 'https://maven.aliyun.com/repository/google' }

maven { url 'https://maven.aliyun.com/repository/jcenter' }

maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

}

dependencies {

classpath 'com.android.tools.build:gradle:4.1.0'

}

}

这样配置完就可以运行 Android 模拟器了。

Android Studio 快捷键

因为 Flutter 选择通过 Android Studio 进行开发,那这个工具的快捷键还是需要掌握的,熟练使用快捷键可以大大提高开发效率并可以减少某些错误的发生。

快捷键

CMD + ,            进入偏好设置

CMD + /             注释

Ctrl + option + O   删除未使用的import

option + Enter      自动import未导入的文件

CMD + -/+           折起/展开代码块

CMD + Shift + -/+   折起/展开所有代码块

CMD + .             折起/展开选中代码

CMD + L            定位代码所在行

CMD + [            光标回到上一次编辑的位置

CMD + ]             光标回到下一次编辑的位置

CMD + Y             查看选中类的属性

CMD + O             快速打开(一般用于快速打开某个文件)

CMD + option + L    格式化代码

Option + Shift + Up/Down  上下移动行

Command + Shift + Up/Down   上下移动方法

输入 stl 就可以创建 StatelessWidget

输入 stf 就可以创建 StatefulWidget

创建代码块

Preferences -> Editor -> Live Templates,我们可以查看系统添加好的 Flutter 代码块,有对应的代码块的简称、描述、内容,能输入 stl创建 StatelessWidget ,就是这里添加了代码块。我们也可以添加一些常用的代码块,使用起来还是很方便的。


自动格式化代码

Preferences -> Languages & Frameworks -> Flutter -> Editor,然后选中 选中Format code on save 和 Organize imports on save 。然后点击 OK 这样书写代码就会自动格式化了

参考文章:https://blog.csdn.net/jinglinggg/article/details/105383270

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