如何进行跨平台的开发，Flutter是首选。之前小编介绍了flutter入门简介，今天介绍一下，如何在电脑（mac电脑）上运行一个flutter程序，成功跑到android模拟器、ios模拟器和web浏览器上。因为需要运行到ios模拟器，所以苹果电脑是必须的，如果您没有苹果电脑，就只能运行到android模拟器和web浏览器上预览。

第一步：安装好开发环境。

1、安装好Java环境，需要安装java17的版本。

我本机的java17地址是：/Users/wanglixin/Library/Java/JavaVirtualMachines/ms-17.0.16/Contents/Home

2、安装好flutter。

下载地址：https://docs.flutter.dev/install/manual#install-flutter

选择你电脑对应的平台版本。

3、安装好Android Studio。

下载android studio地址为：https://developer.android.google.cn/studio?hl=zh-cn

下载android sdk地址：https://www.androiddevtools.cn/

创建好一个android模拟器，后面运行程序的时候会用到。

4、安装好Xcode。

下载地址：https://apps.apple.com/app/xcode/id497799835

5、安装一个谷歌浏览器。

6、下载安装好Trae编辑工具。

下载地址：https://www.trae.cn/

 

第二步：配置环境变量。

1、在终端中打开.zshrc文件，命令：open -e ~/.zshrc

输入如下配置：

export JAVA_HOME=/Users/wanglixin/Library/Java/JavaVirtualMachines/ms-17.0.16/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH
export ANDROID_HOME=/Users/wanglixin/Library/Android/sdk
export PATH=$PATH:/Users/wanglixin/Documents/middle/flutter/bin
export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter

相关路径修改为你自己的就可以了。

2、检测flutter安装环境是否OK。

输入命令：flutter doctor -v

如果各项都打钩了，就说明环境都配置好了。接下来就可以创建工程和运行代码了。

第三步：运行代码。

1、创建flutter项目工程。

用命令行创建：flutter create my_first_app

用Trae编辑器打开工程。

点击选择一个android模拟器，打开main.dart文件，点击run，如果一切顺利就打开了。

接下来依次点击选择一个ios模拟器，或者选择一个chrome浏览器，分别打开。如下：

如上所示，就说明运行成功了。