程序员

Flutter 1.0 MAC环境入门实战

2018-12-10  本文已影响75人  迎风起飞的猪

1. 使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像
大家可以将如下环境变量加入到用户环境变量中:
打开终端:运行下面两行代码:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
**注意:** 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 [Using Flutter in China](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) 以获得有关镜像服务器的最新动态。

系统要求
要安装并运行Flutter,您的开发环境必须满足以下最低要求:
操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
工具: Flutter 依赖下面这些命令行工具.
bash, mkdir, rm, git, curl, unzip, which

2. 获取Flutter SDK
去Flutter官网下载最新版本

下载成功后,把FlutterSDK 放到指定的目录中
运行 flutter doctor

## iOS 设置

### 安装 Xcode

要为iOS开发Flutter应用程序,您需要Xcode 7.2或更高版本:

1.  安装Xcode 7.2或更新版本(通过[链接下载](https://developer.apple.com/xcode/)或[苹果应用商店](https://itunes.apple.com/us/app/xcode/id497799835)).

2.  配置Xcode命令行工具以使用新安装的Xcode版本 `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` 对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。

3.  确保Xcode许可协议是通过打开一次Xcode或通过命令`sudo xcodebuild -license`同意过了.

使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。

### 设置iOS模拟器

要准备在iOS模拟器上运行并测试您的Flutter应用,请按以下步骤操作:

1.  在Mac上,通过Spotlight或使用以下命令找到模拟器:
使用terminal(终端)
$:open -a Simulator
2. 通过检查模拟器 硬件>设备 菜单中的设置,确保您的模拟器正在使用64位设备(iPhone 5s或更高版本).
3. 根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例
4. 运行 flutter run启动您的应用.

安装到iOS设备

要将您的Flutter应用安装到iOS真机设备,您需要一些额外的工具和一个Apple帐户,您还需要在Xcode中进行设置。

  1. 安装 homebrew (如果已经安装了brew,跳过此步骤).
  2. 打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

Android Studio

## Android Studio 安装

*Android Studio:* 为Flutter提供完整的IDE体验

### 安装Android Studio

*   [Android Studio](https://developer.android.com/studio/index.html), 3.0或更高版本.

或者,您也可以使用IntelliJ:

*   [IntelliJ IDEA Community](https://www.jetbrains.com/idea/download/), version 2017.1或更高版本.
*   [IntelliJ IDEA Ultimate](https://www.jetbrains.com/idea/download/), version 2017.1 或更高版本.

### 安装Flutter和Dart插件

需要安装两个插件:

*   `Flutter`插件: 支持Flutter开发工作流 (运行、调试、热重载等).
*   `Dart`插件: 提供代码分析 (输入代码时进行验证、代码补全等).

要安装这些:

1.  启动Android Studio.
2.  打开插件首选项 (**Preferences>Plugins** on macOS, **File>Settings>Plugins** on Windows & Linux).
3.  选择 **Browse repositories…**, 选择 Flutter 插件并点击 `install`.
4.  重启Android Studio后插件生效.

*Android Studio:* 为Flutter提供完整的IDE体验.

## 创建新应用

1.  选择 **File>New Flutter Project**
2.  选择 **Flutter application** 作为 project 类型, 然后点击 Next
3.  输入项目名称 (如 `myapp`), 然后点击 Next
4.  点击 **Finish**
5.  等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用[Material 组件](https://material.io/guidelines/)的简单演示应用程序。

在项目目录中,您应用程序的代码位于 `lib/main.dart`.

## 运行应用程序

1.  定位到Android Studio 工具栏:
    ![Main IntelliJ toolbar](https://img.haomeiwen.com/i1712705/d637f9fd42febee3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.  在 **target selector** 中, 选择一个运行该应用的Android设备. 如果没有列出可用,请选择 **Tools>Android>AVD Manager** 并在那里创建一个
3.  在工具栏中点击 **Run图标**, 或者调用菜单项 **Run > Run**.
4.  如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:
    ![Starter App on Android](https://img.haomeiwen.com/i1712705/a937d5c4fdea9695.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 体验热重载

Flutter 可以通过 *热重载(hot reload)* 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。

1.  将字符串
    `'You have pushed the button this many times:'` 更改为
    `'You have clicked the button this many times:'`
2.  不要按“Stop”按钮; 让您的应用继续运行。
3.  要查看您的更改, 只需调用 **Save All** (`cmd-s` / `ctrl-s`), 或点击 **热重载按钮** (带有闪电⚡️图标的按钮).

你就会立即看到更新后的字符串。

上一篇下一篇

猜你喜欢

热点阅读