Flutter 技术入门与实战 (10):开启 Flutter 之旅 1.2.1

阅读数:11 2019 年 12 月 15 日 18:47

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

(Windows 环境搭建)

内容简介
第 1 章介绍 Flutter 的基本概念,并搭建第 yi 个 Flutter 程序,来感受一下 Flutter 之美。
第 2 章介绍几个重要知识点,如入口程序、Material Design、Flutter 主题、无状态组件和有状态组件、使用包资源、Http 请求。
第 3 章简单介绍 Dart 语言。Dart 语言是 Flutter SDK 指定的语言,我们很有必要补充一下它的基础知识,包括语法特性、基本语句、面向对象等。
第 4 章介绍常用组件。Flutter 里有一个非常重要的核心理念:一切皆为组件,本章主要讲解开发中用得 * 频繁的组件,如容器组件、图片组件、文本组件、图标组件和表单组件等。
第 5 章介绍 Material Design 风格的组件,Material Design 风格是一种非常有质感的设计风格,并提供一些默认的交互动画。本章将分类介绍这些组件。
第 6 章介绍 Cupertino 风格的组件,这是一类 iOS 风格的组件,如 CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView 等。
第 7 章介绍页面布局的基础知识和技巧,如基础布局处理、宽高尺寸处理、列表及表格布局等,* 后通过一个综合布局示例来演示如何编写复杂的页面。
第 8 章介绍如何处理手势,如轻击、拖动和缩放等。Flutter 中提供 GestureDetector 进行手势检测,并为手势检测提供了相应的监听。
第 9 章介绍如何加载、处理、展示资源和图片,如添加资源和图片、自定义字体等。
第 10 章介绍路由及导航是如何处理的,包括页面的渲染以及数据传递。
第 11 章介绍组件装饰和视觉效果的处理,如 Opacity(透明度处理)、DecoratedBox(装饰盒子)、RotatedBox(旋转盒子)、Clip(剪裁处理)和 CustomPainter(自定义画板)。
第 12 章介绍动画效果的制作,包含两个动画组件的使用:用 AnimatedOpacity 实现渐变效果、用 Hero 实现页面切换动画。
第 13 章介绍 Flutter 插件开发的入门知识。Flutter 插件可以和原生程序打交道,比如调用蓝牙、启用 WIFI、打开手电筒,等等。
第 14 章介绍开发工具及使用技巧,介绍几款常用的 IDE 工具,从代码的编写、辅助功能、程序调试、性能分析等多方面讲解工具及使用技巧。
第 15 章介绍测试与发布应用,包括:测试应用、发布 Android 版和 iOS 版 App。
第 16 章通过一个综合案例介绍如何使用 Flutter 实现即时通讯 App 的界面。

1. 使用镜像

首先解决网络问题。环境搭建过程中需要下载很多资源文件,当某个资源更新不到时,就可能会报各种错误。在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

复制代码
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意 此镜像为临时镜像,并不能保证一直可用,读者可以参考 Using Flutter in China: https://github.com/flutter/flutter/wiki/Using-Flutter-in-China 以获得有关镜像服务器的最新动态。

2. 安装 Git

Flutter 依赖的命令行工具为 Git for Windows(Git 命令行工具)。Windows 版本的下载地址为: https://git-scm.com/download/win

3. 下载安装 Flutter SDK

去 Flutter 官网下载其最新可用的安装包。

注意 Flutter 的渠道版本会不停变动,请以 Flutter 官网为准。Flutter 官网下载地址: https://flutter.io/docs/development/tools/sdk/archive#windows 。Flutter GitHub 下载地址: https://github.com/flutter/flutter/releases

将安装包 zip 解压到你想安装 Flutter SDK 的路径(如:D:\Flutter)。在 Flutter 安装目录的 Flutter 文件下找到 flutter_console.bat,双击运行并启动 Flutter 命令行,接下来,你就可以在 Flutter 命令行运行 flutter 命令了。

注意 不要将 Flutter 安装到需要一些高权限的路径如 C:\Program Files\。

4. 添加环境变量

不管使用什么工具,如果想在系统的任意地方能够运行这个工具的命令,则需要添加工具的路径到系统 path 里去。这里路径指向到 Flutter 文件的 bin 路径,如图 1-5 所示。同时,检查是否有名为“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也需要添加它们。重启 Windows 才能使更改生效。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-5 添加 Flutter 环境变量

5. 运行 flutter 命令安装各种依赖

使用 Windows 命令窗口运行以下命令,查看是否需要安装任何依赖项来完成安装:

复制代码
flutter doctor

该命令检查你的环境并在终端窗口中显示报告。Dart SDK 已经捆绑在 Flutter 里了,没有必要单独安装 Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。如下代码粗体显示,Android SDK 缺少命令行工具,需要下载并且提供了下载地址,通常这种情况只需要把网络连好,VPN 开好,然后重新运行 flutter doctor 命令即可。

复制代码
[-] Android toolchain - develop for Android devices
Android SDK at D:\Android\sdk
x 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.

注意 一旦你安装了任何缺失的依赖,需再次运行 flutter doctor 命令来验证你是否已经正确地设置了,同时需要检查移动设备是否连接正常。

6. 编辑器设置

如果使用 flutter 命令行工具,可以使用任何编辑器来开发 Flutter 应用程序。输入 flutter help 在提示符下查看可用的工具。但是笔者建议最好安装一款功能强大的 IDE 来进行开发,毕竟开发调试运行打包的效率会更高。由于 Windows 环境只能开发 Flutter 的 Android 应用,所以接下来我们会重点介绍 Android Studio 这款 IDE。

(1)安装 Android Studio

要为 Android 开发 Flutter 应用,你可以使用 Mac 或 Windows 操作系统。Flutter 需要安装和配置 Android Studio,步骤如下:

1)下载并安装 Android Studio: https://developer.android.com/studio/index.html

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

(2)设置你的 Android 设备

要准备在 Android 设备上运行并测试你的 Flutter 应用,需要安装 Android 4.1(API level 16)或更高版本的 Android 设备。步骤如下:

1)在你的设备上启用“开发人员选项”和“USB 调试”,这些选项通常在设备的“设

置”界面里。

2)使用 USB 线将手机与计算机连接。如果你的设备出现提示,请授权计算机访问你的设备。

3)在终端中,运行 flutter devices 命令以验证 Flutter 识别出你连接的 Android 设备。

4)用 flutter run 启动你的应用程序。

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

(3)设置 Android 模拟器

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

1)启动 Android Studio→Tools→Android→AVD Manager 并选择 Create Virtual Device,打开虚拟设备面板,如图 1-6 所示。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-6 打开虚拟设备面板

2)选择一个设备并点击 Next,如图 1-7 所示。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-7 选择模拟硬件设备

3)选择一个镜像点击 download 即可,然后点击 Next,如图 1-8 所示。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-8 选择系统镜像

4)验证配置信息,填写虚拟设备名称, 选择 Hardware - GLES 2.0 以启用硬件加速,点击 Finish,如图 1-9 所示。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-9 验证配置信息

5)在工具栏选择刚刚添加的模拟器,如图 1-10 所示。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-10 在工具栏选择模拟器

6)也可以在命令行窗口运行 flutter run 启动模拟器。当能正常显示模拟器时(如图 1-11 所示),则表示模拟器安装正常。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-11 Android 模拟器运行效果图

提示 建议选择当前主流手机型号作为模拟器,开启硬件加速,使用 x86 或 x86_64 image。

详细文档请参考: https://developer.android.com/studio/run/emulator-acceleration.html

(4)安装 Flutter 和 Dart 插件

IDE 需要安装两个插件:

  • Flutter 插件:支持 Flutter 开发工作流 (运行、调试、热重载等)。
  • Dart 插件:提供代码分析 (输入代码时进行验证、代码补全等)。

打开 Android Studio 的系统设置面板,找到 Plugins 分别搜索 Flutter 和 Dart,点击安装即可,如图 1-12 所示。

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

图 1-12 Android Studio 插件安装

Flutter技术入门与实战(10):开启Flutter之旅 1.2.1

购书地址 https://item.jd.com/12526484.html?dist=jd

评论

发布