Flutter 技术入门与实战 (11):开启 Flutter 之旅 1.2.2

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

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

(MacOS 环境搭建)

内容简介
第 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 的界面。

首先解决网络问题,参见上节“Windows 环境搭建”。

1. 命令行工具

Flutter 依赖的命令行工具有 bash、mkdir、rm、git、curl、unzip、which。

2. 下载安装 Flutter SDK

请按以下步骤进行下载安装 Flutter SDK:

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

注意 Flutter 的渠道版本会不停变动,请以 Flutter 官网为准。另外,在中国大陆地区,要想获取安装包列表或下载安装包有可能发生困难,读者也可以去 Flutter GitHub 项目下去下载安装 Release 包。
Flutter 官网下载地址: https://flutter.io/docs/development/tools/sdk/archive#macos
Flutter GitHub 下载地址: https://github.com/flutter/flutter/releases

步骤 2:解压安装包到你想安装的目录,如:

复制代码
cd /Users/ksj/Desktop/flutter/
unzip /Users/ksj/Desktop/flutter/v0.11.9.zip.zip

步骤 3:添加 Flutter 相关工具到 path 中:

复制代码
export PATH=`pwd`/flutter/bin:$PATH

3. 运行 Flutter 命令安装各种依赖

运行以下命令查看是否需要安装其他依赖项:

复制代码
flutter doctor

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

复制代码
[-] Android toolchain - develop for Android devices
Android SDK at /Users/obiwan/Library/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 命令来验证你是否已经正确地设置了,同时需要检查移动设备是否连接正常。

4. 添加环境变量

使用 vim 命令打开~/.bash_profile 文件,添加如下内容:

复制代码
export ANDROID_HOME=~/Library/Android/sdk //android sdk 目录
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn // 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // 国内用户需要设置
export PATH=/Users/ksj/Desktop/flutter/flutter/bin:$PATH // 直接指定 flutter 的 bin 地址

注意 请将 PATH=/Users/ksj/Desktop/flutter/flutter/bin 更改为你的路径即可。

完整的环境变量设置如图 1-13 所示。

设置好环境变量以后,请务必运行 source $HOME/.bash_profile 刷新当前终端窗口,以使刚刚配置的内容生效。

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-13 MacOS 环境变量设置

5. 编辑器设置

如果使用 Flutter 命令行工具,可以使用任何编辑器来开发 Flutter 应用程序。输入 flutter help 在提示符下查看可用的工具。但是笔者建议最好安装一款功能强大的 IDE 来进行开发,毕竟开发调试运行打包的效率会更高。由于 MacOS 环境既能开发 Android 应用也能开发 iOS 应用,Android 设置请参考 1.2.1 节“Windows 环境搭建”中的“安装 Android Studio”,接下来我们会介绍 Xcode 使用方法。

(1)安装 Xcode

安装最新 Xcode。通过链接下载: https://developer.apple.com/xcode/ ,或通过苹果应用商店下载: https://itunes.apple.com/us/app/xcode/id497799835

(2)设置 iOS 模拟器

要准备在 iOS 模拟器上运行并测试你的 Flutter 应用。要打开一个模拟器,在 MacOS 的终端输入以下命令:

复制代码
open -a Simulator

可以找到并打开默认模拟器。如果想切换模拟器,可以打开 Hardware 下在 Device 菜单选择某一个模拟器,如图 1-14 所示。

打开后的模拟器如图 1-15 所示。

接下来,在终端运行 flutter run 命令或者打开 Xcode,如图 1-16 所示选择好模拟器。点击运行按钮即可启动你的应用。

(3)安装到 iOS 设备

要在苹果真机上测试 Flutter 应用,需要一个苹果开发者账户,并且还需要在 Xcode 中进行设置。

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-14 选择 iOS 模拟器

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-15 iOS 模拟器效果图

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-16 Xcode 启动应用

1)安装 Homebrew 工具,Homebrew 是一款 MacOS 平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。下载地址为: https://brew.sh

2)打开终端并运行一些命令,安装用于将 Flutter 应用安装到 iOS 设备的工具,命令如下所示:

复制代码
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

提示 如果这些命令中有任何一个失败并出现错误,请运行 brew doctor 并按照说明解决问题。

接下来需要 Xcode 签名。Xcode 签名设置有以下几个步骤:

步骤 1:在你 Flutter 项目目录中通过双击 ios/Runner.xcworkspace 打开默认的 Xcode 工程。

步骤 2:在 Xcode 中,选择导航面板左侧中的 Runner 项目。

步骤 3:在 Runner target 设置页面中,确保在 General→Signing→Team(常规→签名→ 团队)下选择了你的开发团队,如图 1-17 所示。当你选择一个团队时,Xcode 会创建并下载开发证书,为你的设备注册你的账户,并创建和下载配置文件。

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-17 设置开发团队

步骤 4:要开始你的第一个 iOS 开发项目,可能需要使用你的 Apple ID 登录 Xcode。任何 Apple ID 都支持开发和测试。需要注册 Apple 开发者计划才能将你的应用分发到 App Store。请查看 https://developer.apple.com/support/compare-memberships/ 这篇文章。登录界面如图 1-18 所示。

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-18 使用 Apple ID

步骤 5:当你第一次添加真机设备进行 iOS 开发时,需要同时信任你的 Mac 和该设备上的开发证书。点击 Trust 即可,如图 1-19 所示。

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-19 信任此电脑图示

步骤 6:如果 Xcode 中的自动签名失败,请查看项目的 Bundle Identifier 值是否唯一。这个 ID 即为应用的唯一 ID,建议使用域名反过来写,如图 1-20 所示。

步骤 7:使用 flutter run 命令运行应用程序。

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

图 1-20 验证 Bundle Identifier 值

Flutter技术入门与实战(11):开启Flutter之旅 1.2.2

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

评论

发布