Flutter 技术入门与实战 (21):开启 Flutter 之旅 2.5

阅读数:4 2019 年 12 月 15 日 18:48

Flutter技术入门与实战(21):开启Flutter之旅 2.5

(使用包资源)

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

Flutter 包类似于 Java 语言里的 jar 包,由全球众多开发者共同提供第三方库。例如,网络请求(http)、自定义导航 / 路由处理(fluro)、集成设备 API(如 url_launcher&battery) 以及第三方平台 SDK(如 Firebase)等。这使得开发者可以快速构建应用程序,而无须从头造轮子。

1. 包仓库

所有包(package)都会发布到 Dart 的包仓库里,如图 2-3 所示,输入你想使用的包后点击搜索即可。

提示 包仓库地址为: https://pub.dartlang.org

2. 包使用示例

接下来使用 url_launcher 这个包来详解讲解第三方包的使用,步骤如下。

步骤 1:打开 pubspec.yaml 文件,在 dependencies 下添加包的名称及版本,如图 2-4 箭头指向的内容所示。

Flutter技术入门与实战(21):开启Flutter之旅 2.5

图 2-3 Dart 包仓库

Flutter技术入门与实战(21):开启Flutter之旅 2.5

图 2-4 添加 url\_lancher 包

步骤 2:点击 Packages get 命令来获取工程配置文件中所添加的引用包,或者打开命令行窗口执行 flutter packages get 命令,如图 2-5 所示。

注意 在更新包资源的过程中注意观察控制台消息,可能有版本错误、网络问题,这些都会导致更新失败。

Flutter技术入门与实战(21):开启Flutter之旅 2.5

图 2-5 执行 Packages get 命令

步骤 3:打开 main.dart 文件,导入 url_launcher.dart 包:

复制代码
import 'package:url_launcher/url_launcher.dart';

步骤 4:这时就可以使用 launch 方法来打开 url 地址了:

复制代码
const url = 'https://www.baidu.com';
launch(url);

完整的 main.dart 代码如下所示:

复制代码
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '使用第三方包示例',
home: new Scaffold(
appBar: new AppBar(
title: new Text('使用第三方包示例'),
),
body: new Center(
child: new RaisedButton(
onPressed: () {
// 指定 url 并发起请求
const url = 'https://www.baidu.com';
launch(url);
},
child: new Text('打开百度'),
),
),
),
);
}
}

步骤 5:启动示例,打开界面如图 2-6 所示。

点击“打开百度”按钮,页面会跳转至百度页面,如图 2-7 所示。

Flutter技术入门与实战(21):开启Flutter之旅 2.5

图 2-6 使用第三方包示例初始界面

Flutter技术入门与实战(21):开启Flutter之旅 2.5

图 2-7 “打开百度”页面效果图

Flutter技术入门与实战(21):开启Flutter之旅 2.5

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

评论

发布