文章目录
前言
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。