乐趣区

Mac搭建Flutter开发环境

jiezi

Flutter 简介

Flutter 是 Google 开发的一个移动跨平台（Android 和 iOS）的开发框架，使用的是 Dart 语言。和 React Native 不同的是，Flutter 框架并不是一个严格意义上的原生应用开发框架。Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。

Flutter 包含了一个函数响应式框架（functional-reactive framework）、一个 2D 渲染引擎、直接可用的 Widget 库、和各种开发工具。这些组件在一起配合使用，可以帮助开发者完成设计、开发、测试和调试应用的工作。

Widget

Widget 是每个 Flutter 应用的基础组成部分，每个 Widget 是用户界面最基本的元素。和其他框架把 View、controller、Layout 和其他资源分开定义不一样，Flutter 具有一致的、唯一的对象模型：Widget。

一个 Widget 具有如下的一些作用：

  • 一个结构性的元素（比如 按钮或者菜单）
  • 一个元素的风格（比如 字体或者颜色）
  • 指定布局属性（比如 padding）
  • 也可以包含一些业务逻辑
  • 以及其他等等

Widget 通过组合来组成特有的页面层级结构，每个 Widget 都内嵌在父 Widget 中，并继承父 Widget 的属性。并且，Widget 没有单独的“application”对象，根 Widget 就相当于 application。

布局 / 样式

首先从宏观上来说，Flutter 中的布局、样式中绝大多数的概念其实还是沿用了 CSS 中的概念。例如在布局方面与 CSS 中 flex 布局对应的有 Row、Column 两个 Widget，分别提供了水平和垂直两个方向的布局方式。再比如 Stack Widget 提供了一种 Widget 之间相互堆叠的机制，这又和 CSS 中的 position:absolute; 很像。

查看 Flutter 中所有和布局相关的 Widget：https://flutter.io/widgets/la…。

概念上的相似是不是就可以让我们轻松上手了呢？其实并不是，因为在具体的代码层面，为 Flutter 中的 Widget 添加样式 和为一个 HTML 元素添加样式还是有着很大的差别。这些差别主要表现在以下两个方面：

1, 不是所有 Widget 都可以添加任意的样式属性。

举例来说，如果你想给一段文字添加一个 border。你必须创建一个 Container，把这段问题设置为这个 Container 的 child。然后给这个 Container 设置一个 BoxDecoration 属性，并在该属性中设置具体的边框样式。例如：

Container(
  decoration:BoxDecoration(border:Border.all(color:Colors.red)
),
  child:newText("My Awesome Border"),
)

2，Flutter 样式属性都不在支持以字符串的形式书写。

由于 Dart 面向对象的特点，基本上所有的样式属性都不在支持以字符串的形式书写，而是必须创建特定类的实例或是使用 Flutter 中预先定义好的常量。例如：

ListView.builder(

  scrollDirection:Axis.horizontal,

  padding:EdgeInsets.all(10.0),

  itemCount:subCategories.length,

  itemBuilder:(BuildContext context,int index){})

这里为了指定 ListView 的滚动方向，我们使用了 Flutter 中预先定义好的 Axis.horizontal 常量，为了表示 4 个方向上的 padding 值，我们创建了一个 EdgeInsets 类的实例。

组合大于继承

Widget 通常通过组合的方式来构建复杂的 UI。例如，常用的 Container Widget 就是由几个分别负责 布局、绘制、布局和计算大小的 Widget 组成。

具体来说，Container 由 LimitedBox，ConstrainedBox，Align，Padding，DecoratedBox 和 Transform 组成。如果要自定义 Container 来实现自定义效果，相比使用继承而言，可以使用组合一些简单的 Widget 实现自定义效果。

分层架构

Flutter 框架有几层结构，每层都依赖其下面的一层结构。其架构图如下图：

开发应用的时候，经常使用最上面的层级提供的功能。这种层级结构的设计是为了让你用更少的代码实现更多的功能。比如，Material 层 是使用了 Widget 层的控件来构建的，而 Widget 层 依赖下面的 Rendering 层来构建的。

这些层级为构建应用提供了很多种选择。使用自定义的方式构建应用可以使用框架的所有功能，或者使用 Widget 层的控件可以实现 UI 效果。可以直接使用 Flutter 提供的 Widget 也可以自定义各种 Widget，如果上层实现不满足你的要求，还可以直接使用更底层的功能来自定义。

Flutter 框架与其他移动开发框架的区别

原生应用的区别

Flutter 应用运行在一个用 C++ 写的引擎中，Flutter 应用可以看做是一个游戏 App，代码都是在 引擎中运行。
对于 Android 应用来说，Flutter 框架在引擎中实现了一个 继承于 SurfaceView 的 FlutterView 中，用户所看到的 UI 都是在这个 SurfaceView 中显示。如果要和原生平台功能交互，则可以在 Activity 中使用 FlutterView，并通过 Flutter 提供的消息 API 和原生平台收发消息。

与 React Native 应用的区别

和 React Native 相比，主要有以下的一些区别：

  • 使用的编程语言不同，Flutter 使用的是 谷歌自己新的 Dart 语言，新的语言可以吸收很多其他成功编程语言的特性，更具有表达性，编码效率更高，而 React Native 使用的 JavaScript 语言。
  • React Native 是把应用编译为原生控件运行，这样在转换的时候会有性能损耗，并且有些平台特性可能无法做成跨平台使用。

目前，Flutter 的首个发布预览版（Release Preview 1）正式发布，这标志着谷歌进入了 Flutter 正式版（1.0）发布前的最后阶段，相信在不久的将来，Flutter 将会被使用的越来越广泛。

Flutter 开发环境搭建

“工欲善其事，必先利其器”，学习任何一门语言、技术，都需要从环境搭建开始，学习 Flutter 就从环境搭建开始。搭建环境最好参考官网的文档进行操作：https://flutterchina.club/get…，下面以 mac 环境为例来给大家讲解。

系统要求

要安装并运行 Flutter，您的开发环境必须满足以下最低要求：

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括 Xcode 或 Android Studio 的磁盘空间）
  • 工具: Flutter 依赖下面这些命令行工具，如 bash, mkdir, rm, git, curl, unzip, which 等

获取 Flutter SDK

要获得 Flutter，请先使用 git 克隆 Flutter，然后将该 flutter 工具添加到您的用户路径。运行 flutter doctor 显示您可能需要安装的剩余依赖项。

Clone Flutter

如果是第一次在此机器上安装 Flutter，请克隆 flutter 的分支源码，然后将该 flutter 工具添加到系统的环境变量中。例如：

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn // 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // 国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH

这里的pwd/flutter/bin:$PATH 可以使用刚才的克隆的 flutter 的源码的路径，如

/Users/xiangzhihong/Flutter/flutter/bin:$PATH

说明：关于如何在 mac 上配置环境变量，请自行查询相关资料。

运行 flutter doctor

运行以下命令来查看是否需要安装其它依赖项，如果缺乏相关的依赖，系统会给出提示。

flutter doctor

运行该命令后，系统会检测设备相关的依赖情况，如下图：

该命令检查您的环境并在终端窗口中显示报告。Dart SDK 已经在捆绑在 Flutter 里了，没有必要单独安装 Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）。例如：

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.

如果提示 xcode 或 Android Studio 版本太低、或者没有 ANDROID_HOME 环境变量等，请按照提示解决。下面贴一个笔者本机 (mac) 的环境变量配置：

export PATH=/Users/ 用户名 /Documents/flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/ 用户名 /Documents/android_sdk" //android sdk 目录，替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

第一次运行一个 flutter 命令（如 flutter doctor）时，它会下载它自己的依赖项并自行编译。一旦你安装了任何缺失的依赖，请再次运行“flutter doctor”命令来验证你是否已经正确地设置，并最终让所有缺陷都得到解决，如下图：

更新环境变量

您在命令行只能更新当前会话的 PATH 变量，如 Clone Flutter repo 所示。但是，您可能需要的是永久更新此变量，以便您可以运行 flutter 命令在任何终端会话中。

对于所有终端会话永久修改此变量的步骤是和特定计算机系统相关的。通常，您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如：

  1. 确定您 Flutter SDK 的目录，您将在步骤 3 中用到。
  2. 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同。
  3. 添加以下行并更改 [PATH_TO_FLUTTER_GIT_DIRECTORY] 为克隆 Flutter 的 git repo 的路径。
export PUB_HOSTED_URL=https://pub.flutter-io.cn // 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // 国内用户需要设置
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你 flutter 的路径，比如“~/document/code”

  1. 运行 source $HOME/.bash_profile 刷新当前终端窗口。

注意: 如果你使用的是 zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ～/.zshrc，在其中添加：source ～/.bash_profile

  1. 通过运行 flutter/bin 命令验证目录是否在已经在 PATH 中。命令为：
flutter/bin

macOS 支持为 iOS 和 Android 开发 Flutter 应用程序。现在完成两个平台设置步骤中的至少一个，以便能够构建并运行您的第一个 Flutter 应用程序。

iOS 设置

安装 Xcode

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

  • 安装 Xcode 7.2 或更新版本，可以通过 APP Stroe 来安装。
  • 配置 Xcode 命令行工具以使用新安装的 Xcode 版本 sudo xcode-select –switch/Applications/Xcode.app/Contents/Developer 对于大多数情况，当您想要使用最新版本的 Xcode 时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。
  • 确保 Xcode 许可协议是通过打开一次 Xcode 或通过命令 sudo xcodebuild -license 同意。

设置 iOS 模拟器

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

1，在 Mac 上，通过 Spotlight 或使用以下命令找到模拟器，命令如下：

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

如果这些命令中的任何一个失败并出现错误，请运行 brew doctor 并按照说明解决问题。

遵循 Xcode 签名流程来配置您的项目。

a，在你 Flutter 项目目录中通过 open ios/Runner.xcworkspace 打开默认的 Xcode workspace。
b，在 Xcode 中，选择导航面板左侧中的 Runner 项目。
c，在 Runner target 设置页面中，确保在 常规 > 签名 > 团队 下选择了您的开发团队。当您选择一个团队时，Xcode 会创建并下载开发证书，向您的设备注册您的帐户，并创建和下载配置文件（如果需要）。例如：

Android 设置

安装 Android Studio

要为 Android 开发 Flutter 应用，您可以使用 Mac，Windows 或 Linux（64 位）机器.

Flutter 需要安装和配置 Android Studio，步骤如下：

  1. 下载并安装 Android Studio。
  2. 启动 Android Studio，然后执行“Android Studio 安装向导”。这将安装最新的 Android SDK，Android SDK 平台工具和 Android SDK 构建工具，这是 Flutter 为 Android 开发时所必需的。

设置您的 Android 设备

要准备在 Android 设备上运行并测试您的 Flutter 应用，您需要安装 Android 4.1（API level 16）或更高版本的 Android 设备.

  • 在您的设备上启用 开发人员选项 和 USB 调试。详细说明可在 Android 文档中找到。
  • 使用 USB 将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备。
  • 在终端中，运行 flutter devices 命令以验证 Flutter 识别您连接的 Android 设备。
  • 运行启动您的应用程序 flutter run。

默认情况下，Flutter 使用的 Android SDK 版本是基于你的 adb 工具版本。如果您想让 Flutter 使用不同版本的 Android SDK，则必须将该 ANDROID_HOME 环境变量设置为 SDK 安装目录。

设置 Android 模拟器

要准备在 Android 模拟器上运行并测试您的 Flutter 应用，请按照以下步骤操作：

  • 在您的机器上启用 VM acceleration；
  • 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device；
  • 选择一个设备并选择 Next 选项；
  • 为要模拟的 Android 版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image；
  • 在 Emulated Performance 下, 选择 Hardware – GLES 2.0 以启用 硬件加速，验证 AVD 配置是否正确，然后选择 Finish；
  • 在 Android Virtual Device Manager 中, 点击工具栏的 Run 按钮。模拟器启动并显示所选操作系统版本或设备的启动画面；
  • 运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>, 其中 platform 是芯片系列, 如 x86。

开发工具及插件

开发 Flutter 应用需要 Android Studio 和 VSCode 配合使用。一方面，VSCode 提供了非常好的代码提示功能。，而在 Android Studio 中，或许是 Android Studio 上的 dart 插件目前功能还不够完善的原因，代码提示和开发功能并不是很强大。

Android Studio

安装插件

使用 Android Studio 开发 Flutter 移动应用，需要先安装 Flutter 和 Dart 插件。Android Studio 安装插件的步骤如下：
进入 Plugins -> Browse Repositories-> 搜索 Flutter-> 点击 install。

新建项目

打开 AndroidStudio-> 选择 Start a new Flutter project -> 选择 Flutter Application；如下图：

创建的项目的源码位于 lib/main.dart 下，我们可以修改 main.dart 的源码内容。

运行项目

Flutter 项目的运行也非常的简单，定位到 Android Studio 工具栏，然后点击运行按钮即可，如下图。

如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序，如下图：

VSCode

安装插件

按组合键【command+shift+x】，打开应用商店，然后搜索“dart code”点击安装，如下图：

创建新项目

打开 VSCode-> 选择查看 -> 命令面板 -> 输入指令 flutter create Project 名称，点击确定，即可创建 Flutter 应用。

Flutter 项目结构

使用 Android Studio 打开创建的 Flutter 项目，如下图：

在 Flutter 开发中，我们需要关注 4 个文件，即 android、ios、lib 和 pubspec.yaml。

  • android 目录：存放的是 Flutter 与 android 原生交互的一些代码，这个路径的文件和创建单独的 Android 项目基本是一样的。
  • ios 目录：存放的是 Flutter 与 ios 原生交互的一些代码。
  • lib：存放的是 Dart 语言编写的代码，也是项目的核心代码。
  • pubspec.yaml：项目依赖配置文件，作用类似于 Android 的 build.gradle 或者 iOS 的 cocospod。例如刚才创建的项目的 pubspec.yaml 里面的：cupertino_icons: ^0.1.2，表示项目要依赖 cupertino_icons 这个库，版本号为 0.1.2。

扩展阅读：
[1]https://gmtc.geekbang.org/

[2]https://marketplace.visualstu…

[3]https://flutter.io/sdk-archiv…

[4]https://www.dartlang.org/

[5]https://en.wikipedia.org/wiki…

[6]https://en.wikipedia.org/wiki…

[7]https://www.dartlang.org/guid…

[8]https://api.dartlang.org/dev

[9]https://hackernoon.com/why-fl…

退出移动版