Flutter macOS环境配置

简介: Flutter macOS环境配置

其实通读一下文档后的感觉就是还蛮复杂的,起码比windows下配置要复杂一下,可能也是我平时windows用的比较多吧,今天这篇文章就以最简单直接的方式引导在macOS上配置Flutter开发环境

文章目录

准备

下载SDK

先配置一下镜像

下载sdk

设置sdk路径

解压sdk

添加`flutter相关工具`到`path`中

开始配置

运行 flutter doctor 检测本机当前环境

装插件

新建项目

运行项目

更新环境变量

ios配置:

打开xcode

Windows下配置Flutter开发环境




准备

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间)
  • 工具: Flutter 依赖下面这些命令行工具
  • bash, mkdir, rm, git, curl, unzip, which


下载SDK

  • 先配置一下镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
  • 下载sdk

下载地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

image.png


选择最新的正式版本就行。


设置sdk路径

我在user目录下新建了一个FlutterSDK文件夹来存放:


image.png


解压sdk

执行命令:


cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip


就是进入存放sdk的目录,然后解压。


比如我的就是:


image.png

image.png

开始配置

  • 运行 flutter doctor 检测本机当前环境
flutter doctor


image.png

执行完会看到一堆报错,别慌,都好解决的。


直接从下面的Android Studio开始看,提示flutter插件和dart插件没安装,还有就是没有设备可以连接,先一步一步来。



装插件

打开Android Studio,安装flutter插件,也会提示安装dart插件,装就完事了,然后会提示重启。

image.png


image.png

image.png

image.png


image.pngimage.png

运行项目

新建项目之后会有一个默认的小demo模板,可以直接运行。


先选择一个模拟器,点击运行不会帮你自动启一个模拟器,要自己先手动启一个。


image.png

然后运行看看效果。


第一次运行初始化会有点慢,但是后面就快了,而且还有热重,如果不是特别大的项目,基本上不到1s就能看到效果了。


image.png


可以看到一个默认的项目 。



然后我们来改一下title 和 加一个 hello flutter。


这一步主要是体验一下热重载


代码就不贴了,改好直接按command+s就行。


image.png


可以看到是相当的快,不到1s,可以说是非常提升效率了。


看效果:


image.png


可以看到标题改了,而且中间也多了一行红色的hello flutter。



更新环境变量

上面基本上都没有什么难度,但是到这里可能就会遇到坑了,比如我就遇到了。。


为什么会有这一步呢,是因为上面我们执行export PATH=pwd/flutter/bin:$PATH的时候,只是暂时把flutter相关工具加入到path中,这一步呢,就是永久的加入到path,以便可以运行flutter命令在任何终端会话中。


官方的3步骤:


  • 确定您Flutter SDK的目录,您将在步骤3中用到。
  • 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
  • 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:
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


第一步sdk路径是我们自己知道的,ok直接执行第二步:


$HOME/.bash_profile


ok,爬坑之路开始了,别慌,直接带你跳坑。


你可能会遇到:


Permission denied



没有权限,然后搜解决办法,参考https://blog.csdn.net/qq_16525279/article/details/80245350

按照操作执行,但是又提示 sudo: chmode: command not found, 一直找不到原因。



注意了,我们其实可以直接打开.bash_profile文件的(一般在Mac的当前用户目录下):


open .bash_profile


没有的话就创建:


touch .bash_profile


然后再打开。



打开是这样的:


image.png

然后编辑,把镜像和flutter加进去:


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存放的路径。


比如我的就是这样的:


image.png


保存。


然后执行刷新:


source $HOME/.bash_profile


然后来验证一下是否成功,输出path:


echo $PATH


image.png


可以看到第一个就是新增的flutter路径,到此更新环境变量就完成了。



ios配置:

上面是基于Android Studio进行配置的,现在看一下ios的配置。


我们重新执行以下 flutter doctor 看一下:


image.png

这时候可以看到只剩下xcode和ios的报错了。


配置也可以,按照提示 安装cocoapods、libimobiledevice、ideviceinstaller等等就行。



实际上开发环境只有一个就行了,主要是xcode不识别dart文件,as中有flutter和dart插件,毕竟都是google的亲儿子,所以相对来说是最佳开发环境,但是还是可以运行到ios模拟器上看效果的。



打开xcode

终端执行:


$ open -a Simulator


打开一个ios模拟器。


然后as也能识别到并运行到ios模拟器中:


image.png


然后运行到ios模拟器上看看效果:


image.png


ok,到此就全部配置结束了,可能篇幅较长,但是图文的形式更容易理解些。



写作不易,点个赞支持一下呗 ^ _ ^



Windows下配置Flutter开发环境

https://blog.csdn.net/yechaoa/article/details/89150852

目录
相关文章
|
2天前
|
前端开发 Linux iOS开发
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
【4月更文挑战第30天】Flutter扩展至桌面应用开发,允许开发者用同一代码库构建Windows、macOS和Linux应用,提高效率并保持平台一致性。创建桌面应用需指定目标平台,如`flutter create -t windows my_desktop_app`。开发中注意UI适配、性能优化、系统交互及测试部署。UI适配利用布局组件和`MediaQuery`,性能优化借助`PerformanceLogging`、`Isolate`和`compute`。
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
|
前端开发 编译器 API
Flutter 启动及环境配置
Flutter 启动及环境配置
710 0
Flutter 启动及环境配置
|
iOS开发 MacOS
使用 Flutter 开发 macOS App(下)
使用 Flutter 开发 macOS App(下)
224 0
使用 Flutter 开发 macOS App(下)
|
编译器 API Android开发
使用 Flutter 开发 macOS App(上)
使用 Flutter 开发 macOS App(上)
1038 0
使用 Flutter 开发 macOS App(上)
|
Dart Shell 开发工具
Flutter 环境配置
Flutter 环境配置
182 0
Flutter 环境配置
|
Linux Android开发 iOS开发
Flutter支持Windows\MacOS\Web等
当我们在Android Studio中创建新的Flutter项目时,发现在platforms中只能选择Android、iOS和Web(flutter版本是2.10.4),而Linux、Windows、MacOS则是灰色的无法选择。 但是Flutter已经几个版本前就支持这些平台了,只是需要我们手动来启动一下。
348 0
|
Dart IDE Shell
macOS 环境安装Flutter
macOS 环境安装Flutter macOS 的系统要求 要在 macOS 系统上安装和运行 Flutter,您首先需要满足您的开发环境的这些要求。
157 0
|
Dart 前端开发 开发工具
macOS 环境安装Flutter
大家好,我是坚果,公众号“坚果前端” macOS 环境安装Flutter macOS 的系统要求 要在 macOS 系统上安装和运行 Flutter,您首先需要满足您的开发环境的这些要求。
143 0
macOS 环境安装Flutter
|
Dart 安全 IDE
Flutter Web实战项目打造真正跨平台应用(windows,android,ios,linux,macos,web)
Flutter Web项目 Flutter 最近发布了 Flutter V2.5.1,其性能得到了很大提升,支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外,我们创建了一个具有自定义悬停动画的动画网络菜单。 最后,您将学习如何使用 Flutter 制作响应式应用程序。
485 0
Flutter Web实战项目打造真正跨平台应用(windows,android,ios,linux,macos,web)
|
Web App开发 Dart 安全
flutter制作博客展示平台,现已支持 Web、macOS 应用、Android 和 iOS
Flutter Blog Theme using Flutter | Web, macOS, Android, iOS Flutter 最近发布了 Flutter V2.5.1,其性能得到了很大提升,支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外,我们创建了一个具有自定义悬停动画的动画网络菜单。 最后,您将学习如何使用 Flutter 制作响应式应用程序。
325 0
flutter制作博客展示平台,现已支持 Web、macOS 应用、Android 和 iOS