shabake / Configure-the-Flutter-environment

配置flutter开发环境 - Mac版

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

如果图片没有展示出来,建议clone到本地用macdown编译器打开README.md

准备

FlutterSDK下载 目前我使用的版本是1.17.4,1.17.5安装后找到flutterSDK原因未知

Java环境 选择 Mac OS X x64 同意协议且注册后可下载安装包

Android Studio 下载最新版本

vs code 下载最新版本(可选)

配置Flutter环境变量

将下载好的flutter文件夹拖到任意位置中(我是拖到mac根目录下,所以我的路径是/Users/mac/flutter),然后在找到下载好的fultter文件夹拖到命令行中得到flutter文件夹路径。

Untitled.png

在终端执行

open .bash_profile

如果没有.bash_profile,那么创建一个

cd ~

touch .bash_profile

open .bash_profile

依次将这三句话复制加进去

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

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

export PATH=/Users/路径/flutter/bin:$PATH

关闭保存,打开终端输入

source ~/.bash_profile

完成后,验证是否安装成功

flutter -h

出现如下结果代表安装顺利

https://upload-images.jianshu.io/upload_images/1419035-5dd39fb9769f6624.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

如果输入flutter命令卡主不动,请多等一会试试

安装Android Studio

配置java环境

首先运行前面下载好的JDK环,一直下一步直到安装完成

安装Android Studio

安装教程Android Studio

安装插件Flutter和Dart

打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件,搜索flutter,点击右侧install,完成后重启,

加载不出来就开下vpn试试.

Untitled1.png

Untitled2.png

安装结束后在命令行输入如下命令,全部输入y

flutter doctor --android-licenses

安装CocoaPod

配置brew

下面依次输入到终端

brew install --HEAD libimobiledevice

brew install ideviceinstaller

brew install ios-deploy

brew install cocoapods

pod setup

如果安装失败执行

/usr/bin/ruby -e "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/master/install](https://raw.githubusercontent.com/Homebrew/install/master/install))"

一次不行,就多试几次

brew update

brew uninstall --ignore-dependencies libimobiledevice

brew uninstall --ignore-dependencies usbmuxd

brew install --HEAD usbmuxd

brew unlink usbmuxd

brew link usbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstaller

安装VSCode(可选)

直接点击安装包安装,按照提示一直下一步即可

配置Dart环境变量

如果需要在vscode中运行Dart 项目,还需要配置Dart的环境变量

目前在终端输入dart 终端输出

dart: command not found

在终端输入

open .bash_profile

将根据自己的flutter路径添加下面两行代码

//  export DART_HOME=/dart-sdk/bin 路径
export DART_HOME=/Users/mac/flutter/bin/cache/dart-sdk/bin
export PATH="${DART_HOME}:${PATH}"

关闭保存

source ~/.bash_profile

测试是否安装成功,在终端输入dart

Usage: dart [<vm-flags>] <dart-script-file> [<script-arguments>]

Executes the Dart script <dart-script-file> with the given list of <script-arguments>.

Common VM flags:
--enable-asserts
  Enable assert statements.
--help or -h
  Display this message (add -v or --verbose for information about
  all VM options).
--package-root=<path> or -p<path>
  Where to find packages, that is, "package:..." imports.
--packages=<path>
  Where to find a package spec file.
--observe[=<port>[/<bind-address>]]
  The observe flag is a convenience flag used to run a program with a
  set of options which are often useful for debugging under Observatory.
  These options are currently:
      --enable-vm-service[=<port>[/<bind-address>]]
      --pause-isolates-on-exit
      --pause-isolates-on-unhandled-exceptions
      --warn-on-pause-with-no-debugger
  This set is subject to change.
  Please see these options (--help --verbose) for further documentation.
--write-service-info=<file_name>
  Outputs information necessary to connect to the VM service to the
  specified file in JSON format. Useful for clients which are unable to
  listen to stdout for the Observatory listening message.
--snapshot-kind=<snapshot_kind>
--snapshot=<file_name>
  These snapshot options are used to generate a snapshot of the loaded
  Dart script:
    <snapshot-kind> controls the kind of snapshot, it could be
                    kernel(default) or app-jit
    <file_name> specifies the file into which the snapshot is written
--version
  Print the VM version.

终端删除如上代表配置成功

来到vscode,在终端输入dart,发现还是

dart: command not found

打开vscode将终端的类型设置为bash,重启vscode

同样在命令行输入dart

1.jpg

验证安装是否成功

执行命令

flutter doctor

如果所有选项都是对号代表环境配置成功,否则按照提示修复对应问题。

新建一个项目

flutter create project_name

在命令行模式输入flutter run会自动启动模拟器

https://upload-images.jianshu.io/upload_images/1419035-5482d4188f2ab43c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

可能遇到的问题

zsh: command not found: flutter

第一种可能的情况是设置的flutterSDK路径错误,检查下再试

第二种macOS Catalina 版开始,您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell,解决方法

其他

VSCode可能需要安装的插件

Awesome Flutter Snippets快捷生成代码插件

path快速引入文件路径

Code Runner

Chinese (Simplified) Language Pack for Visual Studio Code 菜单汉化

常用的快捷键

运行项目 flutter run

创建项目 flutter create xxx

vscode格式化代码 option + f + shift

vscode中的命令行模式下

r 键:点击后热加载,也就算是重新加载吧。

p 键:显示网格,这个可以看到App布局情况。

o 键:切换androidios的预览模式。

q 键:退出调试预览模式。

tips

当鼠标悬停到Widget的时候,可以看到这个Widget都有哪些属性,

代码规范

fluttet严格区分大小写,项目名称必须是小写

在notion中查看

About

配置flutter开发环境 - Mac版

License:MIT License