Flutter教程1【黑马web前端】

什么是Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Flutter使用Dart语言编写，如果您有面向对象语言的经验，就能轻松上手。

Flutter的优势

1. 原生应用程序的性能与平台的集成

Flutter中UI组件和渲染器都从平台中集成到用户的应用程序中，所以原来虚拟的控件树是真实的控件树，所以渲染和绘制的速度会很快，动画发生在用户空间中，开发人员也可以对其进行很多的控制。在页面渲染方面，Flutter比RN各具优势，图片量越大，Flutter的流畅度优势越大;

2. 提供多平台、可移植的UI工具包支持高效应用开发

美观，可定制的UI组件，开发人员完全控制UI组件和布局

3. 高性能、优体验

·响应式视图，不需要JavaScript的桥接器;

· 代码将AOT编译为本机(ARM)代码

·强大的开发者工具，惊人的热重新加载

开发环境配置

前提条件

1. Windows 7以上版本(64位)、Mac或Linux操作系统(64位)

2. 磁盘空间：400 MB(不包括Android Studio的磁盘空间)。

3. 已经安装及配置Git。

Mac开发环境

1. Flutter SDK

Dart SDK与Flutter捆绑在一起，没有必要单独安装Dart。在当前终端窗口运行以下命令使用Git安装Flutter.

git clone -b beta https://github.com/flutter/flutter.git

临时设置PATH变量:

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

注意：此代码只能暂时针对当前命令行窗口设置PATH环境变量，所以请不要关闭当前窗口。

运行 flutter doctor 命令查看是否有依赖关系需要安装以完成设置，此命令检查环境并向终端窗口显示报告。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(如下图所示)

首次运行 flutter 命令时，它会自动下载自己的依赖项并进行编译。

然后终端打开或创建 ～/.bash_profile ，然后添加以下行。

export PATH=$HOME/flutter/bin:$PATH

运行 source $HOME/.bash_profile 刷新当前窗口，然后运行 echo $PATH 命令验证 flutter/bin 目录在PATH中。

2. 安装Xcode

通过网页下载或Mac App Store安装Xcode 7.2或更新版本，通过命令行运行 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer，来配置Xcode命令行工具，以使用新安装的Xcode版本。

3. IOS模拟器

在Mac上设置IOS模拟器，需要通过Spotlight或使用 open -a Simulator 命令找到Simulator。

通过检查模拟器的 Hardware > Device 菜单中的设置，确保模拟器正在使用64位设备(iPhone 5s或更高版本)。

根据开发机器的屏幕尺寸，模拟的高屏幕密度IOS设备可能会溢出屏幕。在模拟器的 Window > Scale 菜单下设置设备刻度。

4. IOS真机

要将Flutter应用程序部署到物理IOS设备，需要一些其他工具和Apple帐户，还需要在Xcode中设置物理设备部署。

首先需要安装homebrew，然后打开终端并运行以下命令来安装用于将Flutter应用程序部署到IOS设备的工具。

brew install --HEAD libimobiledevice

brew install ideviceinstaller ios-deploy cocoapods

pod setup

5. 执行Flutter

在设置好IOS模拟器或者IOS真机之后，执行以下命令，在项目目录下新建并执行一个Flutter项目。

flutter create firstapp

cd firstapp

flutter run

如果成功执行项目，说明我们已经成功在Mac下配置完成。

Windows和Linux配置请自行百度。。。我靠，我配环境配了半晚上，这个万恶的网速。。。

打开模拟器

首先用 flutter emulators 查找当前模拟器，我的模拟器是

apple_ios_simulator • iOS Simulator • Apple

然后连接模拟器

flutter emulators --launch apple_ios_simulator • iOS Simulator • Apple

创建并执行Flutter项目

将终端目录移动至项目文件夹下，我的项目文件夹为桌面的 www 文件夹，cd Desktop/www ，然后输入命令 flutter create firstapp，创建一个叫做firstapp的Flutter项目。

接着按照命令行提示运行项目

cd firstapp && flutter run