Flutter 设计师
为 iOS 和 Android 构建跨平台应用程序
讲师：Sai Kambampati
口袋资源独家DesignCode付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
Flutter 是一个相对较新的工具包，可以轻松构建外观漂亮且易于使用的跨平台应用程序。通过利用平台的本机组件，我们将构建一个可以在 iOS 和 Android 上运行的应用程序，其外观和感觉就像是本机开发的。此外，我们将看到 Flutter 如何通过一个代码库为我们提供原生性能、用于快速开发的热重载以及对漂亮的原生组件的访问。
源代码
您还可以在我的GitHub 存储库中查看课程中每个部分的源代码。
关于本课程
与 SwiftUI 和 React 非常相似，Flutter 使用声明式 UI，使其成为快速设计和开发的最佳框架之一。这就是本课程专为设计人员和开发人员设计的原因。我们将探讨如何使用 Flutter 及其易于学习的 Dart 编程语言为主要移动操作系统 Android 和 iOS 创建应用程序。本课程适合初学者，将帮助您涉足 Flutter 不断扩大的海洋。我们在本课程中加入了设计技巧和高效的工作流程，以帮助您在创纪录的时间内构建出色的用户界面。
设计文件在 Figma 中，项目资产和 Flutter 源代码与您共享，以便您可以与自己的进度进行比较。
要求
虽然本课程适合初学者，但它有助于获得一些编程经验，尤其是使用声明式 UI 的编程经验。如果您来自 SwiftUI 或 React/React Native 背景，那么您应该会发现 Flutter 和 Dart 非常容易理解。
在本课程中，我运行的是 macOS Big Sur 和 Xcode 12 的测试版，以及 Android Studio 4.0.1。幸运的是，Flutter 已经存在了很长一段时间，所以你不需要使用 beta 应用程序，因为我确信 macOS Catalina 和 Xcode 11 也能正常工作。我们将使用 Android Studio 开发我们的 Flutter 应用程序，因此我将指导您下载上述每个应用程序以及 Flutter 和 Dart SDK。
安装 Xcode
如果您使用的是 Mac，那么 Xcode 是一个很棒的工具。它将使您能够访问对于将 Flutter 桥接到 iOS 至关重要的命令行工具。使用 Xcode，您还可以访问 iOS 模拟器，这是一个查看 Flutter 应用程序性能的便捷工具。您可以从 App Store 下载 Xcode 。
安装 Android Studio
Android Studio 适用于 macOS 和 Windows 用户。对于 Mac 用户，即使安装了 Xcode 和 VSCode，我也建议下载 Android Studio。在使用 Flutter 进行开发时，Android Studio 提供了一系列方便的快捷方式来加快您的工作流程、访问 Android 虚拟设备以及更深入地了解您应用的性能和布局。
要安装 Android Studio，您可以从 Android 开发者网站下载该应用程序，网址为https://developer.android.com/studio。您会看到适用于您各自系统（Windows、macOS、Linux 或 Chrome 操作系统）的下载选项。
当您第一次打开 Android Studio 时，系统会要求您安装 Android SDK 以及其他一些有助于开发的插件。您应该按照 Android Studio 提供的说明进行操作，因为这些插件和程序将有助于未来的 Android 开发。
安装 Flutter SDK
在开始之前，您需要 Flutter 和 Dart SDK 来创建跨平台应用程序。要安装 Flutter，请前往Flutter 的安装页面，您可以按照说明下载与您的系统相关的 SDK。对于 Mac 用户，使用终端安装更简单。
打开终端并输入：
mkdir flutter_dev
cd flutter_dev
git clone https://github.com/flutter/flutter.git这将创建一个名为flutter_dev的新文件夹，并将 Flutter SDK 克隆到该文件夹中。
克隆存储库后，打开 flutter_dev 文件夹并导航到flutter > bin。将路径复制到 bin 文件夹。
返回终端，输入：
vim ~/.zshrc这将打开您的终端在发出命令时使用的“rc”文件。按“I”进入插入模式，一直滚动到底部，在该行的末尾，按几次回车键，在“rc”文件的末尾和下一行之间留出一些空间你将输入：
export PATH=[PATH_TO_FLUTTER_SDK]/flutter/bin:$PATH按冒号按钮“ wq”和Enter以保存并退出 rc 文件。这会告诉终端您的 Flutter SDK 所在的位置。
现在，在终端中打开一个新窗口并发出flutter命令。这应该让终端开始下载并安装 Dart SDK。安装完成后，输入flutter –version以验证一切正常。
将 Flutter SDK 链接到 Android Studio
打开 Android Studio 并在启动屏幕上，按下底部的Configure按钮，然后选择SDK Manager。在打开的新窗口中，从边栏中选择插件，然后选择市场选项卡，搜索Flutter。第一个结果应该是我们正在寻找的结果。它应该来自flutter.dev。单击“安装”按钮，Android Studio 将提醒您 Dart 插件也将被安装。选择安装，几秒钟后，选择重新启动 IDE。
创建你的第一个 Flutter 项目
在启动屏幕上，应该有一个名为Start a new Flutter project 的新选项。选择该按钮并选择Flutter 应用程序作为您的模板。单击Next后，您应该会进入一个可以配置 Flutter 应用程序的屏幕。
在项目名称下，输入designcode，并确保 Flutter SDK 路径与您安装 Flutter SDK 的路径相匹配。Android Studio 应该会自动检测到这一点，但最好验证两次。选择一个项目位置来保存您的项目，您可以选择设置一个描述。当您对配置感到满意时，请按下一步。
最后，系统会要求您设置Package Name。如果您来自 iOS 开发，包名称类似于包标识符。我将我的设置为io.designcode.designcode。确保选中所有 AndroidX 和平台通道语言复选框，单击“完成”让 Android Studio 创建您的 Flutter 项目。
探索示例应用程序
当项目打开时，您会看到您位于一个名为main.dart的文件中。在左侧，您会看到一个侧边栏。此侧边栏将包含与您的 Flutter 项目关联的所有文件夹和库。打开designcode文件夹，你会发现它下面有很多文件夹。iOS文件夹表示有助于将 Dart 代码桥接到 iOS 的后端 Flutter 代码，android文件夹做同样的事情，但适用于 Android，web文件夹用于将我们的代码移植到制作 web 应用程序。但是，我们将处理lib文件夹。这是我们大部分代码的去向。如果你打开这个文件夹，你可以看到里面有一个文件：主要的飞镖。该文件也是 IDE 当前显示给您的文件。
通常，Flutter 约定规定main.dart应该是包含main()方法的文件，但这并不是硬性规定。main ()方法是 Flutter 在运行应用程序时寻找的第一个方法。在此方法中，您会看到 Flutter 正在调用另一个名为runApp的函数，该函数将MyApp类作为输入。
不深入细节，您会看到MyApp是一个符合StatelessWidget类型的类。如果您想立即查看此示例应用程序的功能，在我们的 IDE 顶部，您会看到一个下拉菜单，该菜单当前设置为no device selected。将其切换为打开 iOS 模拟器，然后当 iOS 模拟器启动时，按下绿色的播放按钮。这将在模拟器上构建并运行应用程序。
热重载
Flutter 的优势之一是通过集成Hot Reload，我们不需要在每次更改代码时都重新构建我们的应用程序。为了演示这一点，让我们对当前的入门应用程序做一个小改动。使用MyApp类，将ThemeData的主要样本更改为以下内容：
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
visualDensity: VisualDensity.adaptivePlatformDensity
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);我们在这里所做的只是将应用程序的配色方案从蓝色更改为红色。现在，如果我们按下 CMD+S 来保存我们的文件（或闪电按钮），Android Studio 将热重启我们的应用程序，我们的模拟器将立即反映这些更改。这使得即时创建设计更改变得容易。
Figma 模板（可选）
如果您想跟踪我们在 Flutter 中开发此应用程序时的进度，Meng 已经创建了一个 Figma 模板供您遵循。设计文件可供您使用，因此您可以检查用户界面是如何制作的。
导入资产
资产可以在 本课程的第二部分 或下载页面中下载。要导入资产，请将文件夹拖放到 资产文件夹中。
