移动端混合开发Flutter入坑（一）环境搭建

一、目录

• 1.1. Mac环境配置
• 1.2. 配置移动端开发环境
• 1.3. 测试环境

1.1. Mac环境配置

环境要求:

• 操作系统: macOS (64-bit)
• 硬盘空间: 700 MB (不包括IDE的大小).
• 工具: Flutter依赖一下command-line工具
  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which

Flutter SDK配置

1.下载 flutter_macos_1.0.0-stable.zip

2.解压文件

unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip

3.加入路径到环境变量（其中pwd为实际存放sdk的目录）

export PATH=$PATH:`pwd`/flutter/bin

现在你可以运行fultter命令了！

4.运行flutter doctor检测环境是否配置成功

flutter doctor

如果环境未配置成功，会出现一下内容：

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

根据这些提示信息，你可以执行相应命令完成配置，一旦配置成功，再执行flutter doctor便会通过环境监测。

1.2. 配置移动端开发环境

iOS开发环境

• 安装Xcode
  注：要开发适用于iOS的Flutter应用程序，你需要使用Xcode 9.0或更高版本

1.通过Apple Store下载安装Xcode
2.执行Xcode command-line

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

• 配置模拟器部署环境

brew update

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

Android开发环境

• 安装Android Studio
  启动Android Studio，然后浏览“Android Studio安装向导”。 这将安装最新的Android SDK，Android SDK Platform-Tools和Android SDK Build-Tools，这些都是Flutter在开发Android时所需要的。

• 安装Flutter插件

  
  
  

  image.png
  
  
  

  点击安装插件

此时在命令行可以查看到前四个是可用状态即可开始项目。

image.png

• 重启模拟器并新建Flutter项目
  1.选择Start a new Flutter project>Flutter Application
  输入项目对应信息后，点Finish

image.png

image.png

• 配置部署Android模拟器
  注：Android设备运行Android 4.1（API级别16）或更高版本。

1. 启动模拟器
2. 启动Android Studio>Tool> AVD Manager，然后选择创建虚拟设备。 （Androidsubmenu仅在Android项目中出现。）
3. 选择设备定义，然后选择下一步。
4. 在Android Virtual Device Manager中，单击工具栏中的运行。 模拟器将启动并显示所选操作系统版本和设备的默认画布。
   
   

   image.png
   
   
   

   image.png

• 启动模拟器并运行项目

  
  
  image.png

欢迎关注我的公众号IT科技互联，了解更多技术博文。

IT科技互联