MacOS安装flutter开发环境

本文详细介绍了在Mac上配置Flutter开发环境的步骤,包括安装Homebrew,下载FlutterSDK,设置.bash_profile,检查Flutter安装,创建并运行Flutterapp,以及安卓和iOS环境的配置。通过这些步骤,开发者可以搭建起完整的Flutter开发环境。
摘要由CSDN通过智能技术生成

MacOS安装flutter开发环境封面

前言

Build apps for any screen!Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
在任何屏幕构建apps。Flutter是一个谷歌开源框架,用一套代码就可以构建优美的,本地编译的,多平台应用。

我们先来安装好开发环境,开启学习之旅。

一、安装Homebrew

Homebrew是mac 上用来安装软件的一个工具。

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

将以上命令粘贴至终端运行。

二、下载flutter SDK

https://flutter.dev/docs/get-started/install/macos
打开flutter官网,点击下载链接下载到本地:flutter_macos_v1.5.4-hotfix.2-stable.zip
解压,打开终端

$ cd ~/
$ mkdir development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
# 添加 flutter到path变量
$ export PATH=/Users/wywar/development/flutter/bin

三、添加.bash_profile

相当于windows的环境变量path的配置

$ cd ~/
$ touch .bash_profile
$ open .bash_profile

在打开的文本编辑器中输入以下配置

# 这是提前安装好的java jdk
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home

# 这是安装好的 android sdk
export ANDROID_HOME=/Users/wywar/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools 
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3  

export PATH=/usr/local/bin:/usr/local/sbin:~/bin:$PATH

export PATH=/Users/wywar/development/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

保存关闭后,在终端输入以下命令让配置生效

$ source .bash_profile

四、检测flutter 是否安装成功

$ flutter doctor

根据输出的提示信息安装相应的依赖

wywar@wywardeMacBook-Pro ~ % flutter doctor
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E266, locale zh-Hans-CN)

[] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[] Xcode - develop for iOS and macOS (Xcode 11.5)
[] Android Studio (version 3.4)
[] VS Code (version 1.72.2)
[] Connected device (1 available)

• No issues found!
wywar@wywardeMacBook-Pro ~ %

检测结果,没有发现问题即可

ios环境配置
1、从App Store安装最新版本Xcode
配置Xcode命令行工具,终端运行以下命令:

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

把app部署到iOS设备:

$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

启动 iOS模拟器:
打开终端运行:

$ open -a Simulator

五、创建并运行一个简单的flutter app

$ flutter create my_app
$ cd my_app
$ flutter run

即可在模拟器打开该app

六、安卓环境配置

首先把 java jdk 和 sdk自行安装好。
下载 android studio
https://developer.android.com/studio
下载后进行安装,安装时弹出“Unable to access Android SDK add-on list”
不要选择 Setup Proxy
不然启动就会出现 SDK tools directory is missing错误提示

初次打开android studio在创建新项目的时候,会提示下载Android SDK
点击下载,等待安装完毕。

在创建好项目后,android studio会自动使用Gradle构建项目并且把项目显示得更友好,且自动运行app

首次运行app, 检测到未安装任何模拟器,则进入模拟器管理,选择一个手机型号然后选择一个系统镜像并下载,下载完成后做简单的模拟器设置就可打开模拟器打开app。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值