本文由简悦 SimpRead 转码，原文地址 www.raywenderlich.com

欢迎来到Flutter! 本章解释了什么是Flutter，为什么你应该使用它，以及如何获得你的......。

恭喜你。通过打开《Flutter学徒》，您已经向成为Flutter大师迈出了第一步。本书将是您学习Flutter UI工具包的指南，它是谷歌的平台，用于从单一代码库中构建移动、桌面和网络的应用程序。

本书的五个部分将逐步教您如何使用Flutter创建一个应用程序。你将学习所有关于部件的知识，这些部件是你为构建你的应用程序而组成的。你还将学习导航和转换，处理状态和网络管理。最后，你将学习如何将应用程序部署给测试人员和用户。

本书假设你熟悉原生移动平台的开发，例如使用Swift的iOS或使用Kotlin的Android......但你绝不需要成为专家。这些章节将向您展示如何从头开始构建一个Flutter应用程序，因此，如果您是完全陌生的，您会赶上的。

什么是Flutter？

用最简单的话来说，Flutter是谷歌推出的用于构建跨平台应用程序的软件开发工具包。Flutter应用程序由一系列包、插件和小工具组成--但这还不是全部。Flutter也是一个过程、一种哲学和一个社区。

它也是在任何一个平台上启动和运行应用程序的最简单方法，更不用说多个平台了。由于Flutter的声明式、基于部件的UI结构、对反应式编程的一流支持、跨平台的抽象以及允许热重载代码变化的虚拟机，你可以比你想象的更有效率。

有一点Flutter不是一种语言。Flutter使用Dart作为其编程语言。如果你知道Kotlin、Swift、Java或Typescript，你会发现Dart很熟悉，因为它是一种面向对象的C型语言。

你可以将Dart编译成本地代码，这使得它的速度很快。它还使用一个具有特殊功能的虚拟机（VM）：热重载。这让你可以更新你的代码，并在不重新部署的情况下看到这些变化。

多年来，程序员们一直被承诺能够做到 "一次编写，随处运行"；Flutter很可能是迄今为止实现这一目标的最佳尝试。

真的吗？

是的，Flutter就是这么棒。你可以很快地建立一个高质量的应用程序，其性能和外观都很棒。本书将告诉你如何做。

在前几章中，你将通过基本的用户界面来了解你的脚步。在本书结束时，你将能够构建外观漂亮、性能良好的应用程序。

而且，它确实能在桌面和网络上都很好地工作。

其他跨平台工具包试图通过在本地UI层之上添加一层来抽象出底层操作系统。这使得开发者只能使用最低的通用功能集--更不用说，性能下降了。

相比之下，Flutter的小部件由于其定制的用户界面渲染引擎Skia而与本地小部件平行存在。这意味着工具包控制了用户界面的外观和行为，这使得平台之间的行为一致。从性能的角度来看，额外的抽象层不会带来任何损失。

Flutter适合谁？

Flutter适用于希望以最小的开销启动移动应用程序的新手或有经验的开发人员。Flutter适用于那些希望立即或在未来制作一个能在多种设备上运行的应用程序的人。它适合那些喜欢在大型开源社区的支持下构建声明式UI的人。

此外，Flutter适用于在一个平台上有经验的开发者，他们想开发一个能在多个平台上运行的应用程序。如果你是一个具有深厚的Javascript或Typescript知识的Web开发者，但还没有开始在移动领域工作，那就更是如此了。你可以同时学习两个主要的移动平台!

如果你没有一个现有的应用程序，Flutter是一个快速开发的好方法，以验证一个想法或建立一个完整的、多平台的生产应用程序。

另一方面，如果您已经在一个平台上使用原生工具包拥有了一个很好的应用程序，那么您应该评估您的持续维护成本，看看通过使用Flutter或原生工具包为其他平台构建是否有意义。

关于Flutter的伟大之处

以下是使用Flutter的一些优点的例子。

Flutter是开源的。这意味着您可以观察它的发展，知道即将发生的事情--甚至可以尝试开发中的新功能。您还可以创建您自己的补丁和包，或者贡献代码。您还可以参与到社区中来，帮助他人或为其未来发展方向做出贡献。
Flutter使用Dart编程语言。Dart（dart.dev）是一种现代的、以用户界面为重点的语言，可以编译为本地ARM或X86代码，也可以交叉编译为Javascript。它支持人们喜欢和期待的所有伟大的语言功能，如用于并发管理的async/await和用于干净、…
Flutter的最佳功能之一是热重载。热重载允许你对代码和UI进行更新，重建小部件树，然后将它们实时交付给模拟器和设备--而无需重新加载状态或重新编译你的应用程序。
有时，你所做的改变会影响到小部件树或应用程序状态的太多，无法轻松地热重载。在这些情况下，你可以使用热重启。热重启比热重载要长一点，因为它要加载变化，重新启动应用程序并重置状态，但它仍然比完全重启快，因为完全重启会重新编译和重新部署。当你对代码进行某些重大修改时，你需要使用完全重启，包括任何改变状态管理的东西。
这些重启功能利用Dart的虚拟机来注入更新的代码，所以它们只在调试模式下可用，而不是在生产应用中。
其他的跨平台工具包产生的应用程序具有原始的外观和感觉--很无聊！但Flutter是有目的的。Flutter是有目的的，它使用谷歌的Material Design开箱即用。它也很容易应用Cupertino部件来获得类似iOS的外观。UI是完全可定制的，允许你制作一个看起来适合你的品牌的应用程序。
Flutter有很好的动画和过渡效果，你也可以建立自定义的小部件。因为小部件是可组合的，你可以创造性地灵活使用用户界面。例如，你可以把视频放在滚动视图后面，或者把工具栏放在画布上面。
数量众多的部件和用于构建用户界面的声明式语法使你的工作效率非常高，以最小的开销和模板快速构建一个丰富的应用程序。有状态的部件与数据绑定，并在数据模型变化时自动更新。
如果你最近使用过SwiftUI或Jetpack Compose，你已经熟悉了Flutter的许多概念。但Flutter更棒--它对工具的限制更少，而且你可以同时为多个平台构建。
Flutter在设计时考虑到了可访问性，开箱即用，支持动态字体大小和读屏器，并有大量围绕语言、对比度和交互方式的最佳实践。
平台集成对于访问用其他语言编写的库或使用尚未有Flutter支持包的平台特定功能非常重要。Flutter支持C和C++的互操作性，以及连接到Android上的Kotlin和Java以及iOS上的Swift或Objective-C的平台通道。

你相信了吗？

如果你还不相信Flutter有一席之地，请查看展示区：flutter.dev/showcase。

在那里，你可以看到使用Flutter的顶级公司，以及你可以用它制作的应用程序有多么多样化。这些并不局限于 "JSON-in-a-table "应用程序，还包括富媒体的动态和互动应用程序。

这些应用程序可以帮助你提高工作效率，更好地了解情况，更容易沟通，并获得更多乐趣。Flutter的原生性能和系统集成使其成为大多数移动应用中比网络或混合应用更好的选择。

世界上一些最大的公司的流行应用程序是用Flutter构建的。这些公司包括

非常好创投
腾讯公司
Realtor.com
谷歌助手
纽约时报
政策天才
Google Stadia

看一下最近的一些例子吧。

何时不使用Flutter

Flutter并不是每个应用程序的最佳工具。这里有一些领域，Flutter是一个不断发展的平台。

游戏和音频

虽然您可以使用Flutter创建简单的2D游戏，但对于复杂的2D和3D游戏，您可能更愿意将您的应用建立在跨平台的游戏引擎技术上，如Unity或Unreal。它们有更多特定领域的功能，如物理学、精灵和资产管理、游戏状态管理、多人游戏支持等。

Flutter还没有复杂的音频引擎，所以音频编辑或混合应用程序与那些专门为特定平台打造的应用程序相比，处于不利地位。

有特定原生SDK需求的应用程序

Flutter支持许多，但不是所有的本地功能。幸运的是，你通常可以创建通往平台特定代码的桥梁。然而，如果应用程序与设备的功能和平台SDK高度集成，可能值得使用特定平台的工具编写应用程序。Flutter产生的应用二进制文件也比用平台框架构建的二进制文件要大。

如果你只对单一平台的应用感兴趣，而且你对该平台的工具和语言有很深的了解，那么Flutter可能不是一个实用的选择。例如，如果你正在处理一个基于CloudKit的高度定制的iOS应用，它使用了所有的原生硬件、MLKit、StoreKit、扩展等等，那么使用SwiftUI维护和利用这些功能会更容易。当然，对于一个使用Jetpack Compose的高度偏重的安卓应用也是如此。

某些平台

Flutter并不是到处都能运行的。它还不支持苹果Bitcode，这意味着它不支持watchOS、tvOS或某些iOS应用扩展。它对网络的支持仍处于早期阶段，这意味着Flutter还有许多功能和性能的改进--但它们正在到来。

由于Flutter还不能在手表或电视上运行，你必须在本地构建这些组件，并将其附加到基于Flutter的移动应用中。根据那些其他应用程序的复杂程度，可能不值得同时编写本地和Flutter代码的麻烦。

Flutter的历史

Flutter来自于一个试图改善网络性能的传统。它建立在谷歌开发的几个开源技术之上，通过Chrome将原生性能和现代编程带入网络。

Flutter团队选择了Dart语言，这也是谷歌开发的，以提高其生产力。它的面向对象的类型系统和对反应式和异步编程的支持使它比Javascript具有明显的优势。最重要的是，谷歌在Chrome浏览器中内置了Dart虚拟机，使用Dart编写的网络应用能够以本地速度运行。

拼图的另一块是将Skia作为图形渲染层。Skia是另一个基于谷歌的开源项目，为Android、Chrome浏览器、Chrome OS和Firefox的图形提供动力。它直接在GPU上运行，在安卓上使用Vulcan，在iOS上使用Metal，使得图形层在移动设备上的速度很快。它的API允许Flutter小部件快速和一致地渲染，无论其主机平台如何。

Flutter的架构

Flutter有一个模块化、分层的架构。这使您可以一次性编写您的应用逻辑，并在不同的平台上有一致的行为，即使底层引擎代码因平台不同而不同。分层架构也暴露了不同的点，以便在必要时进行定制和重写。

Flutter的架构由三个主要层组成。

框架层是用Dart编写的，包含您直接用于构建应用程序的高级库。这包括UI主题、部件、布局和动画、手势和基础构建块。除了主要的Flutter框架外，还有插件：像JSON序列化、地理定位、相机访问、应用内支付等高级功能。这种基于插件的架构让你只包括你的应用程序需要的功能。
引擎层包含了核心的C++库，构成了支持Flutter应用程序的基元。引擎实现了Flutter API的底层基元，如I/O、图形、文本布局、可访问性、插件架构和Dart运行时。该引擎还负责将Flutter场景栅格化，以便在屏幕上快速渲染。
嵌入器对于每个目标平台都是不同的，它负责将代码打包成独立的应用程序或嵌入模块。

每个架构层都是由其他子层和模块组成的，使它们几乎是分形的。对一般应用开发特别重要的是框架层的构成。

Flutter框架由几个子层组成。

最上面的是UI主题，它使用Material（Android）或Cupertino（iOS）设计语言。这影响了控件的显示方式，让你的应用程序看起来就像一个本地的。
小部件层是你将花费大部分UI编程时间的地方。这是你组成设计和互动元素以构成应用程序的地方。
在widget层下面是渲染层，它是构建布局的抽象部分。
基础层提供了基本的构件，如动画和手势，这些构件建立了更高的层。

前面的内容

本书分为五个部分。

第1节是介绍。你在这里! 在这一节中，你将了解Flutter的概况，学习如何入门，并确保你已经为开发优秀的应用程序做好了一切准备。您将建立一个简单的应用程序，以了解Dart语言和Flutter SDKs。
第2节是关于部件，即您用来制作应用程序的构件。
第3节包括导航和深度链接。如果你认为widget是构成屏幕的，那么导航将它们联系在一起，让用户在应用中完成各种任务。
第4节介绍了状态和数据。你将学习如何保存数据，如何使用本地持久化和网络。
第5节向你展示了如何使应用程序在原生平台上运行，以及如何部署你的应用程序。

在本书结束时，你将能够把一个想法，变成一个漂亮的多平台应用程序，并提交出版。

开始使用

现在您已经决定Flutter适合您，您的下一步是获得构建Flutter应用程序的必要工具：Flutter SDK和Dart编译器。您还需要一个带有Flutter插件的IDE，以及为各种平台构建和部署的工具。后者是指iOS的Xcode和Android的Android Studio。

要开始，请访问flutter.dev/ 。这个门户网站是本书出版后到你阅读时发生的任何安装说明或API变化的真实来源。如果有任何矛盾，flutter.dev的信息将取代。

您需要什么

一台电脑。您可以在Windows、macOS、Linux或ChromeOS上开发Flutter应用程序。然而，Xcode只在macOS上运行，因此必须有一台Mac来构建和部署iOS的应用程序。

注意：由于Xcode对macOS的限制，本书在Mac上使用Flutter工具链。您可以在您选择的任何平台上进行学习--只要跳过任何iOS或Mac的特定步骤。

Flutter SDK。
一个编辑器，如Android Studio或Visual Studio代码。
至少一个设备。您可以在iOS模拟器或Android模拟器中运行，但在物理设备上运行Flutter应用程序将给您带来真正的用户体验。
开发者账户（可选）。要部署到苹果应用商店或谷歌应用商店，您需要一个有效的账户。

获取Flutter SDK

第一步是下载SDK。您可以按照flutter.dev上的步骤操作，或者直接跳到这里：flutter.dev/docs/develo…

有一点需要注意的是，Flutter将其SDK围绕频道组织起来，这些频道是不同的开发分支。新的功能或平台支持将首先在一个测试频道中提供，供开发人员试用。这是一个很好的方式，可以提前获得某些功能，如新平台或原生SDK支持。

对于这本书和一般的开发，请使用稳定频道。该分支已经过审核和测试，几乎没有发生故障的可能。

按照说明，从flutter.dev/docs/get-st… 下载SDK。安装很简单，只需解压缩并将bin文件夹放到你的路径中。

一旦你这样做，你就可以访问Flutter命令行应用程序，这是你的起点。为了检查您是否正确设置了它，在终端运行以下命令。

flutter help

作为回应，您应该看到主要的帮助说明。

Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]
...

这些flutter子命令是通往Flutter附带的所有工具的通道。您会看到项目管理工具、软件包管理工具以及运行和测试您的应用程序的工具。在这一章和未来的章节中，你将深入了解其中的许多工具。

获得其他一切

除了Flutter SDKs，您还需要Java、Android SDK、iOS SDKs和带有Flutter扩展的IDE。为了使这一过程更容易，Flutter包括Flutter Doctor，它指导您安装所有缺少的工具。

只需运行。

flutter doctor

这将检查所有必要的组件，并提供链接或说明来下载您所缺少的组件。

下面是一个例子。

Doctor summary (to see all details, run flutter doctor -v):
Unable to find any JVMs matching version "1.8".
No Java runtime present, try --request to install.
[✓] Flutter (Channel stable, 2.0.6, on Mac OS X 10.15.7, locale en-US)
[✗] Android toolchain - develop for Android devices
    ✗ Flutter requires Android SDK 30 and the Android BuildTools 30.0.2
      To update using sdkmanager, run:
        "/Users/michael/Library/Android/sdk/tools/bin/sdkmanager"
        "platforms;android-30" "build-tools;30.0.2"
      or visit https://flutter.dev/docs/get-started/install/macos
      for detailed instructions.
[!] Xcode - develop for iOS and macOS (Xcode 12.4)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[✗] Chrome - develop for the web (Cannot find Chrome executable at
    /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)

[☠] Connected device (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know
      about this issue at https://github.com/flutter/flutter/issues.
    ✗ Exception: Unable to run "adb", check your Android SDK installation and ANDROID_HOME environment variable:
      /Users/michael/Library/Android/sdk/platform-tools/adb

! Doctor found issues in 4 categories.

在这个例子的输出中，Flutter Doctor发现了一系列的问题：主要是没有Java，一个过时的Android工具链，CocoaPods、Android Studio和Google Chrome都没有。

该工具很有帮助地建议了一些命令和链接来获取缺失的依赖。该工具在完成之前也终止了，如果它没有找到主要的依赖关系，这很常见。

对于你的具体设置，按照建议来安装你所缺少的东西。然后继续运行flutter doctor，直到你得到所有的绿色复选标记。你可能需要运行几次才能清除所有的问题。

注意：如果Flutter Doctor的建议不起作用，你可能不得不按照各自网站上的说明，手动安装缺少的工具，如Java或Android Studio。就这样一步步来吧。设置开发环境是使用Flutter的最难部分。

设置一个IDE

Flutter团队正式支持三个编辑器。Android Studio、Visual Studio Code和Emacs。然而，还有许多其他编辑器支持Dart语言，与Flutter命令行一起工作，或有第三方Flutter插件。

本书的例子使用Android Studio，但代码和例子都可以在你选择的编辑器中使用。反正Flutter Doctor会让你安装这个IDE，以获得所有的Android工具，所以使用Android Studio使你不必安装额外的编辑器。此外，Flutter Doctor会告诉你安装Android Studio Flutter插件，这也会触发Android Studio的Dart插件的安装。

一旦你完成了flutter doctor的所有步骤，你就拥有了在Android studio中创建Flutter应用程序所需的一切。如果你在Android Studio的欢迎窗口中看到创建新的Flutter项目，你就可以开始了。

试用

下载所有的组件是让Flutter应用程序启动和运行的最难部分。接下来，你将尝试实际构建一个应用程序。

有两种推荐的方法来创建一个新项目：使用IDE或通过终端的flutter命令行工具。在本章中，你将使用IDE的快捷方式，在下一章中，你将使用命令行。

在Android Studio中，点击创建新的Flutter项目选项。保留默认应用的选择，并点击 "下一步 "按钮，继续进入下一个界面。

对于这个例子，你可以保持默认值，或者改成更方便的值。点击 "下一步 "按钮继续。

这里的选项让你包括平台支持或改变包的名称。稍后你将了解更多关于这些选项的信息。现在，点击 "完成 "按钮。

如果你使用Visual Studio Code，过程类似。要创建一个新项目，使用视图▸命令调色板...▸Flutter。新项目。之后，点击出现的项目表格。

在这两个编辑器中，你可能会看到弹出窗口或信息来下载或更新各种工具和组件。按照指示，直到你解决这些信息。

例如，这个Android Studio的横幅显示。'Pub get'没有被运行。点击Get dependencies可以解决这个问题。

模板项目

默认的新项目在两个编辑器中都是一样的。它是一个简单的Flutter演示。该演示程序计算你点击一个按钮的次数。

要试一下，选择一个连接的设备，一个iOS模拟器或一个Android模拟器。

点击 "运行 "图标，启动该应用程序。

第一次编译和启动可能需要一些时间。当你完成后，你会看到以下内容。

恭喜你，你已经制作了你的第一个Flutter应用程序点击按钮，看到增量响应更新标签。

这个应用程序的所有代码都在默认项目中的lib\main.dart中。请随意看一看。

在本书的其余部分，你将深入了解Flutter应用程序、小部件、状态、主题和许多其他概念，这些概念将帮助你建立漂亮的应用程序。

奖励：尝试热重载

在未来的章节中，你会学到更多关于热重载的知识，但它的功能太酷了，在这一点上不能不放纵一下。在开始之前，调整你的IDE窗口，以便你能看到它和模拟器或仿真器，并在其中运行你的应用程序。

在main.dart中，找到以下文本部件。

Text(
  'You have pushed the button this many times:',
),

接下来，将字符串改为。'Thou hast pushed the button this many times:'，使其具有中世纪的风格。

这里是不那么棘手的部分。保存该文件。现在，看看正在运行的应用程序并观察其变化。

Et voila! 你的变化被重新加载，而无需停止应用和重新部署。

有时，保存文件并不能自动触发热重载。在这种情况下，只需按下工具条上的热重载图标，它看起来像一个闪电。

关键点

Flutter是谷歌的一个软件开发工具包，用于使用Dart编程语言构建跨平台应用程序。
有了Flutter，你可以很快建立一个高质量的应用程序，其性能和外观都很好。
Flutter适用于希望以最小的开销启动移动应用的新的和有经验的开发者。
使用在flutter.dev 找到的说明安装Flutter SDK和相关工具。
flutter doctor命令可以帮助你安装和更新Flutter工具。
本书将主要使用Android Studio作为Flutter开发的IDE。

从这里出发，去哪里？

您的Flutter之家是flutter.dev（以及Dart语言的dart.dev）。如果您在任何安装步骤中被卡住了，请去那里获取最新的说明。

flutter.dev 包含官方文档和参考页，您可以在 flutter.dev/docs 找到。这些将是您获得有关SDK的完整和最新信息的来源。

此外，还有flutter.dev/community ，其中有通往多个社交媒体平台上所有官方Flutter社区的链接。特别是，请查看谷歌开发者的Flutter YouTube频道：www.youtube.com/c/flutterde… 。

最后，raywenderlich.com上有《Dart学徒》，这是一本了解Dart的配套书籍。如果想快速入门，可以看看这篇免费的Dart基础知识文章www.raywenderlich.com/4482551-dar… ，或者视频课程《Dart编程：基础知识》，可在www.raywenderlich.com/4921688-pro… 。

[Flutter学徒] 1 - 开始行动