初识Flutter（基础入门）

作者: EchoZuo | 来源:发表于2018-09-26 17:47 被阅读725次

Content：

Flutter框架概况
快速入门
其他

Flutter框架概况

发展概述

Flutter是Google开发的一套全新的跨平台、开源UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式及其默认开发套件。

Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述，以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

发展历史

自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年5月发布了第一个“Ready for Production Apps”的Beta 3版本，6月20日发布了第一个“Release Preview”版本。

Flutter的第一个版本被称为“Sky”，运行在Android操作系统是。它是在2015年Dart开发者峰会 [3] 上亮相的，其目的是能够以每秒120帧的速度持续渲染。
Beta1版本于2018年2月27日在2018 世界移动大会公布。
Beta2版本2018年3月6日发布。

框架特性

Fast development(快速开发)
Expressive and Flexible UI(富有表现力和灵活的UI)
Native Performance(原生性能)
Modern, reactive framework(现代的，响应式框架)
Access native features and SDKs（访问本地功能和SDK）
Unified app development（统一标准的应用开发体验）

Fast development(快速开发)

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。

hot-reload.gif

xpressive and Flexible UI(富有表现力和灵活的UI)

使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

screenshot-1.png

screenshot-2.png

Modern, reactive framework(现代的，响应式框架)

使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // 告诉Flutter state已经改变, Flutter会调用build()，更新显示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 当 setState 被调用时，这个方法都会重新执行.
    // Flutter 对此方法做了优化，使重新执行变的很快
    // 所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

Access native features and SDKs（访问本地功能和SDK

通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

Unified app development（统一标准的应用开发体验）

Flutter拥有丰富的工具和库，可以帮助您轻松地同时在iOS和Android系统中实现您的想法和创意。如果您没有任何移动端开发体验，Flutter是一种轻松快捷的方式来构建漂亮的移动应用程序。如果您是一位经验丰富的iOS或Android开发人员，则可以使用Flutter作为视图(View)层，并可以使用已经用Java / ObjC / Swift完成的部分（Flutter支持混合开发）。

构建

漂亮的用户界面
- 丰富的2D GPU加速API
- 响应式框架
- 动画/运动API
- Material组件和Cupertino widgets
流畅的编码体验
-亚秒级，有状态的热重载
- IntelliJ: 代码重构、补全等
- Dart语言和核心库
- 包管理器
全功能的应用程序
- 与移动操作系统API和SDK交互
- Maven/Java
- Cocoapods/ObjC/Swift
优化

测试
- 单元测试
- 集成测试
- 设备上测试
调试
- IDE 调试器
- 基于Web的调试器
- async/await aware
- Expression evaluator
性能分析
- 时间线（Timeline）
- CPU和内存
- 应用内性能图标
部署

编译
- Native ARM 代码
- Dead code elimination
发布
- App Store
- Play Store

了解详细的Flutter技术总览：

框架结构

Flutter的主要结构包括：

Flutter engine
Foundation library
Design-specific widgets

快速入门

安装Flutter在Mac OS上

使用镜像

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

获取Flutter SDK

去flutter官网下载其最新可用的安装包，下载地址：Flutter SDK。当然在国内，大家懂得，如果想要正常获取到安装包列表或者下载安装包，可能需要VPN的帮助，也可以去Flutter github项目去下载最新的安装包，下载地址为：Flutter Github
下载好压缩包后解压到你想安装到的目录下（切记是你想安装到的目录下，如果你要直接安装到desktop，那当然也ok），如：

EchoZuo-work-MBP:/ EchoZuo$ cd users/echozuo/
EchoZuo-work-MBP:echozuo EchoZuo$  unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

添加flutter相关工具到path中，如：

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

此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中请参考下面 更新环境变量 部分。

运行 flutter doctor

运行以下命令来检查是否还需要安装其他依赖项或者是否有安装错误产生：

flutter doctor

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

如：

[-] 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 OS 的环境变量配置，可以对比修正下：

  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

切记设置好对应SDK的环境变量，否则无法安装flutter成功。

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在flutter doctor输出中，如果你选择使用IDE，我们提供了，IntelliJ IDEA，Android Studio和VS Code的插件。

一旦你安装了任何缺失的依赖，再次运行flutter doctor命令来验证你是否已经正确地设置了。

该flutter工具使用Google Analytics匿名报告功能使用情况统计信息和基本崩溃报告。这些数据用于帮助改进Flutter工具。Analytics不是一运行或在运行涉及flutter config的任何命令时就发送，因此您可以在发送任何数据之前退出分析。要禁用报告，请执行flutter config --no-analytics并显示当前设置，然后执行flutter config。

编译器设置

使用 flutter 命令行工具，您可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。建议使用的插件来获得丰富的IDE体验，支持编辑，运行和调试Flutter应用程序。个人比较喜欢微软的VS Code编译器，界面也比较新颖美观，相对于Android Studio，在Max OS上VS Code启动更快速也不卡顿。

Visual Studio Code (VS Code) 安装和相关配置

VS Code: 轻量级编辑器，支持Flutter运行和调试.

安装 VS Code

VS Code, 安装1.20.1或更高版本.

安装Flutter插件

启动 VS Code
调用 View>Command Palette…
输入 ‘install’, 然后选择 Extensions: Install Extension action
在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
选择 ‘OK’ 重新启动 VS Code

VS Code很多的相关设置都是听过插件或者命令行去处理，如果不习惯的话可以使用Android Studio或者IntelliJ。Android Studio的配置请参考配置编辑器。

通过Flutter Doctor验证您的设置

调用 View>Command Palette…
输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
查看“OUTPUT”窗口中的输出是否有问题。（这里请仔细查看控制台输出，如果没有看到控制台，可以通过快捷键shift+command+U调出控制台）

开发平台设置

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

iOS 设置（如果你是一个iOS开发工作者，下述iOS的相关设置可以粗略带过）

安装Xcode

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

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

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

设置iOS模拟器

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

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

open -a Simulator

通过检查模拟器硬件>设备菜单中的设置，确保您的模拟器正在使用64位设备（iPhone 5s或更高版本）.
根据您的开发机器的屏幕大小，模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例
运行 flutter run启动您的应用.

安装到iOS设备

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

安装 homebrew （如果已经安装了brew,跳过此步骤）.
打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

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

Android设置

安装Android Studio

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

Flutter需要安装和配置Android Studio:

下载并安装 Android Studio.
启动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模拟器上运行并测试您的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 App（使用VS Code）

创建新的应用

启动VS Code
调用 View>Command Palette…（默认快捷键为shift+cmd+P），如果你的VS Code为中文版本，则为试图>命令面板
输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
输入 Project 名称, 然后按回车键
指定放置项目的位置，然后按蓝色的确定按钮
等待项目创建继续，并显示main.dart文件

上述命令创建一个Flutter项目，项目名为myfirstflutterappnew（自己建立的项目名称），其中包含一个使用Material 组件的简单的演示应用程序。

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

顺便看一下建立完之后的项目文件结构：

项目1.png

如果没有问题，现在可以开始运行应用程序

确保在VS Code的右下角选择了目标设备
按 F5 键或调用Debug>Start Debugging
等待应用程序启动
如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

Simulator Screen Shot - iPhone XS Max - 2018-09-26 at 14.54.11.png

体验热重载

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

用你喜欢的编辑器打开文件lib/main.dart
随意更改代码中的字符串，例如将'Flutter Demo Home Page'更改为'神奇的Flutter'
不要按“停止”按钮; 让您的应用继续运行.
要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击热重载按钮 (绿色圆形箭头按钮).

你会立即在运行的应用程序中看到更新的字符串

编写第一个Flutter App

我们将制作一个无限滚动的list，这个 GIF 图展示了最终实现的效果：

Flutter 可以在 Android 和 iOS 系统里自动适应不同的 UI 体系
Flutter 工程/项目的基本结构
查找和使用 packages 来扩展功能
使用热重载加快开发周期
如何实现有状态的 widget
如何创建一个无限的、延迟加载的列表

e3624172607d5551.png

1.配置Flutter开发环境，如果没有配置，请翻到“快速入门”模块对照进行配置

2.创建初始化工程

创建一个简单的、基于模板的 Flutter 工程，按照这个指南中所描述的步骤，然后将项目命名为 startup_namer（而不是 myapp）

在这个示例中，你将主要编辑 Dart 代码所在的 lib/main.dart 文件中

lib/main.dart

删除 `lib/main.dart` 中的所有代码，然后替换为下面的代码，它将在屏幕的中心显示`"Hello World"`。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

222.png

观察和分析
- 本示例创建了一个具有 Material Design 风格的应用，Material 是一种移动端和网页端通用的视觉设计语言，Flutter 提供了丰富的 Material 风格的 widgets。
- 主函数（main）使用了 (=>) 符号，这是 Dart 中单行函数或方法的简写。
- 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个 widget。在 Flutter 中，大多数东西都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。
- Scaffold 是 Material library 中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。widget 树可以很复杂。
- 一个 widget 的主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widgets 来显示自己。
- 本示例中的 body 的 widget 树中包含了一个 Center widget，Center widget 又包含一个 Text 子 widget，Center widget 可以将其子 widget 树对其到屏幕中心。

3.使用package

在这一步中，你将开始使用一个名为english_words 的开源软件包，其中包含数千个最常用的英文单词以及一些实用功能。

你可以在 pub.dartlang.org 上找到 english_words 软件包以及其他许多开源软件包。

pubspec 文件管理 Flutter 应用程序的 assets（资源，如图片、package等）。在pubspec.yaml 中，将 english_words（3.1.0或更高版本）添加到依赖项列表，如下面高亮显示的行：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0   # 新增了这一行

在Android Studio 的编辑器视图中查看 pubspec 时，单击右上角的 Packages get，这会将依赖包安装到您的项目。您可以在控制台中看到以下内容：

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

在 lib/main.dart 中引入，如下所示：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';  // 新增了这一行

在您输入时，Android Studio会为您提供有关库导入的建议。然后它将呈现灰色的导入字符串，让您知道导入的库截至目前尚未被使用。

接下来，我们使用 English words 包生成文本来替换字符串"Hello World"：

我们需要进行如下更改：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random(); // 新增了这一行
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(    // 这里把之前的 "const" 换成了 "new".
          //child: const Text('Hello World'),   // 我们不用这样的方式生成文字了
          child: new Text(wordPair.asPascalCase),  // 这是新的文字生成方式
        ),
      ),
    );
  }
}

如果你没有把 Center 前面的修饰词从 const 改成 new 的话，系统就会报错，因为这个时候它的子对象已经不是常量，那就不能再用 const 了，所以这里 Center 和 Text 都需要使用 new 创建新的实例。

如果应用程序正在运行，请使用热重载按钮更新正在运行的应用程序。每次单击热重载或保存项目时，都会在正在运行的应用程序中随机选择不同的单词对。这是因为单词对是在 build 方法内部生成的。每次 MaterialApp 需要渲染时或者在 Flutter Inspector 中切换平台时 build 都会运行.

1111.png

4.添加一个 Stateful widget

Stateless widgets 是不可变的，这意味着它们的属性不能改变——所有的值都是 final。

Stateful widgets 持有的状态可能在 widget 生命周期中发生变化，实现一个 stateful widget 至少需要两个类：1）一个 StatefulWidget 类；2）一个 State 类，StatefulWidget 类本身是不变的，但是 State 类在 widget 生命周期中始终存在。

在这一步，你将添加一个 stateful widget（有状态的控件）—— RandomWords，它会创建自己的状态类 —— RandomWordsState，然后你需要将 RandomWords 内嵌到已有的无状态的 MyApp widget。

创建一个最简的 state 类，这个类可以在任意地方创建而不一定非要在 MyApp 里，我们的示例代码是放在 MyApp 类的最下面了：

class RandomWordsState extends State<RandomWords> {
  // TODO Add build method
}

注意一下 `State<RandomWords>` 的声明。这表明我们在使用专门用于 RandomWords 的 State 泛型类。应用的大部分逻辑和状态都在这里 —— 它会维护 RandomWords 控件的状态。这个类会保存代码生成的单词对，这个单词对列表会随着用户滑动而无限增长，另外还会保存用户喜爱的单词对（第二部分），也即当用户点击爱心图标的时候会从喜爱的列表中添加或者移除当前单词对。

RandomWordsState 继承自 RandomWords，我们接下来会创建这个类。

添加有状态的 RandomWords widget 到 main.dart，RandomWords widget 除了创建 State 类之外几乎没有其他任何东西：

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

在添加状态类后，IDE 会提示该类缺少 `build` 方法。接下来，您将添加一个基本的 build 方法，该方法通过将生成单词对的代码从 MyApp 移动到 RandomWordsState 来生成单词对。

将 build 方法添加到 RandomWordState 中，如下所示：

class RandomWordsState extends State<RandomWords> {
  @override                                  // 新增代码片段 - 开始 ... 
  Widget build(BuildContext context) {
    final WordPair wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }                                          // ... 新增的代码片段 - 结束
}

如下所示，删除 MyApp 里生成文字的代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final WordPair wordPair = new WordPair.random();  // 删掉本行
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text(wordPair.asPascalCase), // 修改本行内容 
          child: new RandomWords(),                 // 修改成本行代码
        ),
      ),
    );
  }
}

热重载（Hot reload）当前的工程，应用应该像之前一样运行，每次热重载或保存应用程序时都会显示一个单词对。

5.创建一个无限滚动的 ListView

在这一步中，您将扩展（继承）RandomWordsState 类，以生成并显示单词对列表。当用户滚动时，ListView 中显示的列表将无限增长。 ListView 的 builder 工厂构造函数允许您按需建立一个懒加载的列表视图。

向 RandomWordsState 类中添加一个 _suggestions 列表以保存建议的单词对，同时，添加一个 biggerFont 变量来增大字体大小 Also, add a _biggerFont variable for making the font size larger.

提示：在 Dart 语言中使用下划线前缀标识符，会强制其变成私有。

class RandomWordsState extends State<RandomWords> {
  // 添加如下两行
  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0); 
  ...
}

接下来，我们将向 `RandomWordsState` 类添加一个 `_buildSuggestions()`) 函数，此方法构建显示建议单词对的 ListView。

ListView 类提供了一个 builder 属性，`itemBuilder` 值是一个匿名回调函数，接受两个参数- `BuildContext` 和行迭代器 i。迭代器从 0 开始，每调用一次该函数，i 就会自增 1，对于每个建议的单词对都会执行一次。该模型允许建议的单词对列表在用户滚动时无限增长。

向 RandomWordsState 类添加 _buildSuggestions() 函数，内容如下：

Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),

      // 对于每个建议的单词对都会调用一次 itemBuilder，
      // 然后将单词对添加到 ListTile 行中
      // 在偶数行，该函数会为单词对添加一个 ListTile row.
      // 在奇数行，该行书湖添加一个分割线 widget，来分隔相邻的词对。
      // 注意，在小屏幕上，分割线看起来可能比较吃力。

      itemBuilder: (BuildContext _context, int i) {
        // 在每一列之前，添加一个1像素高的分隔线widget
        if (i.isOdd) {
          return new Divider();
        }

        // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整）
        // 比如 i 为：1, 2, 3, 4, 5 时，结果为 0, 1, 1, 2, 2，
        // 这可以计算出 ListView 中减去分隔线后的实际单词对数量
        final int index = i ~/ 2;
        // 如果是建议列表中最后一个单词对
        if (index >= _suggestions.length) {
        // ...接着再生成10个单词对，然后添加到建议列表
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

对于每一个单词对，`_buildSuggestions` 函数都会调用一次 `_buildRow`。这个函数在 ListTile 中显示每个新词对，这使您在下一步中可以生成更漂亮的显示行，详见本 codelab 的第二部分。

在 RandomWordsState 中添加 _buildRow 函数 :

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

更新 RandomWordsState 的 build 方法以使用 _buildSuggestions()，而不是直接调用单词生成库，代码更改后如下：（使用 Scaffold 类实现基础的 Material Design 布局）

  @override
  Widget build(BuildContext context) {
    //final wordPair = new WordPair.random(); // 删掉 ... 
    //return new Text(wordPair.asPascalCase); // ... 这两行

    return new Scaffold (                   // 代码从这里... 
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );                                      // ... 添加到这里
  }

更新 MyApp 的 build 方法, changing the title, and changing the home to be a RandomWords widget.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }

重新启动你的项目工程应用，你应该看到一个单词对列表。尽可能地向下滚动，你将继续看到新的单词对。

d71590c8c3c2e6f8.png

至此，我们的第一个无限滚得的Flutter页面开发完成。后续会再进行拓展更多的功能。

其他

文章说明

本文仅供用于学习参考，请勿用于商业用途。如需转载，请标明出处，谢谢合作。
本文系参考网络公开Flutter学习资料以及个人学习体会总结所得，部分内容为网络公开学习资料，如有侵权请联系作者删除。

参考文章

Flutter官网：https://flutter.io/
Flutter中文网：https://flutterchina.club/
百度百科：https://baike.baidu.com/item/Flutter/22498985
知乎问题“如何评价 Google 的 Fuchsia、Android、iOS 跨平台应用框架 Flutter？”:https://www.zhihu.com/question/50156415

作者资料

就职于甜橙金融（翼支付）信息技术部，负责翼支付iOS客户端开发。喜欢研究新的技术，喜欢Apple、喜欢数码。大家可以一起探讨一起学习。

Github：https://github.com/EchoZuo
Email: zuoqianheng@foxmail.com || QQ: 615125175
简书：@EchoZuo
CSDN:https://blog.csdn.net/zuoqianheng

初识Flutter（基础入门）

Content：

Flutter框架概况

发展概述

发展历史

框架特性

Fast development(快速开发)

xpressive and Flexible UI(富有表现力和灵活的UI)

Modern, reactive framework(现代的，响应式框架)

Access native features and SDKs（访问本地功能和SDK

Unified app development（统一标准的应用开发体验）

构建

漂亮的用户界面

流畅的编码体验

全功能的应用程序

优化

测试

调试

性能分析

部署

编译

发布

了解详细的Flutter技术总览：

框架结构

Flutter的主要结构包括：

快速入门

安装Flutter在Mac OS上

使用镜像

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

获取Flutter SDK

下载好压缩包后解压到你想安装到的目录下（切记是你想安装到的目录下，如果你要直接安装到desktop，那当然也ok），如：

添加flutter相关工具到path中，如：

运行 flutter doctor

运行以下命令来检查是否还需要安装其他依赖项或者是否有安装错误产生：

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

如：

一般的错误会是xcode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等，请按照提示解决。Mac OS 的环境变量配置，可以对比修正下：

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在flutter doctor输出中， 如果你选择使用IDE，我们提供了，IntelliJ IDEA，Android Studio和VS Code的插件。

一旦你安装了任何缺失的依赖，再次运行flutter doctor命令来验证你是否已经正确地设置了。

编译器设置

Visual Studio Code (VS Code) 安装和相关配置

VS Code: 轻量级编辑器，支持Flutter运行和调试.

安装 VS Code

安装Flutter插件

通过Flutter Doctor验证您的设置

开发平台设置

iOS 设置（如果你是一个iOS开发工作者，下述iOS的相关设置可以粗略带过）

安装Xcode

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

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

设置iOS模拟器

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

安装到iOS设备

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

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

Android设置

安装Android Studio

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

Flutter需要安装和配置Android Studio:

设置您的Android设备

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

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

设置安卓模拟器

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

初步体验

先体验一下Flutter App（使用VS Code）

创建新的应用

上述命令创建一个Flutter项目，项目名为myfirstflutterappnew（自己建立的项目名称），其中包含一个使用Material 组件的简单的演示应用程序。

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

顺便看一下建立完之后的项目文件结构：

如果没有问题，现在可以开始运行应用程序

体验热重载

你会立即在运行的应用程序中看到更新的字符串

编写第一个Flutter App

我们将制作一个无限滚动的list，这个 GIF 图展示了最终实现的效果：

1.配置Flutter开发环境，如果没有配置，请翻到“快速入门”模块对照进行配置

2.创建初始化工程

创建一个简单的、基于模板的 Flutter 工程，按照这个指南中所描述的步骤，然后将项目命名为 startup_namer（而不是 myapp）

lib/main.dart

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

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在flutter doctor输出中，如果你选择使用IDE，我们提供了，IntelliJ IDEA，Android Studio和VS Code的插件。

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

`lib/main.dart`

删除 `lib/main.dart` 中的所有代码，然后替换为下面的代码，它将在屏幕的中心显示`"Hello World"`。

你可以在 pub.dartlang.org 上找到 english_words 软件包以及其他许多开源软件包。

pubspec 文件管理 Flutter 应用程序的 assets（资源，如图片、package等）。在`pubspec.yaml` 中，将 english_words（3.1.0或更高版本）添加到依赖项列表，如下面高亮显示的行：

在添加状态类后，IDE 会提示该类缺少 `build` 方法。接下来，您将添加一个基本的 build 方法，该方法通过将生成单词对的代码从 MyApp 移动到 RandomWordsState 来生成单词对。

将 `build` 方法添加到 RandomWordState 中，如下所示：

在这一步中，您将扩展（继承）RandomWordsState 类，以生成并显示单词对列表。当用户滚动时，ListView 中显示的列表将无限增长。 ListView 的 builder 工厂构造函数允许您按需建立一个懒加载的列表视图。

接下来，我们将向 `RandomWordsState` 类添加一个 `_buildSuggestions()`) 函数，此方法构建显示建议单词对的 ListView。

向 `RandomWordsState` 类添加 `_buildSuggestions()` 函数，内容如下：

对于每一个单词对，`_buildSuggestions` 函数都会调用一次 `_buildRow`。这个函数在 ListTile 中显示每个新词对，这使您在下一步中可以生成更漂亮的显示行，详见本 codelab 的第二部分。

在 `RandomWordsState` 中添加 `_buildRow` 函数 :

更新 `RandomWordsState` 的 build 方法以使用 `_buildSuggestions()`，而不是直接调用单词生成库，代码更改后如下：（使用 Scaffold 类实现基础的 Material Design 布局）

Widget是Flutter应用程序用户界面的基本构建块。每个Widget都是用户界面一部分的不可变声明。与其他将视图、控制器、布局和其他属性分离的框架不同，Flutter具有一致的统一对象模型：widget。