咖啡花园

Flutter插件一野狗云身份认证使用野狗身份认证（Wilddog Auth）的Flutter插件。野狗云身份认证即Auth，用于帮助企业和开发者将野狗快速接入应用的身份认证系统，一次身份认证打通野狗所有产品。还可以用于增强已有帐户体系和简化新应用中账号系统的开发。开发者使用Auth能让新应用避开从0开始的帐户系统开发，轻松搞定用户注册登录、用户信息存储。同时野狗采用行业标准的JWT格式对传输数据进

Flutter插件一野狗云实时通信使用野狗实时通信引擎（Wilddog Sync）的Flutter插件。野狗实时通信引擎即Sync，可以帮助开发者解决应用的实时通信问题，开发者通过API，即可为应用建立客户端之间的长连接，并实时地双向同步数据。开发者使用Sync能快速实现三大功能：实时数据通信、实时数据分发以及实时数据存储，以下介绍Sync常见的应用场景。实时聊天：可用于直播或社交应用中的实时聊天

纸聊这个应用程序使用Google的Flutter移动框架开发，是一个实时聊天应用程序，为了能专注于APP设计，应用程序的服务端使用Googler的Firebase平台。程序程序的名称为纸聊，意为像传递小纸条一样的简约聊天，登录后所有好友都在，消息无缝同步，还能发送图片。支持Android、iOS等多个平台，多端消息漫游同步。（由于使用了谷歌的后端服务，该应用程序必须在科学上网时才能正常使用。）应用截

在这一系列的前二十篇文章里，我们已经完成了最主要的添加、删除好友，并与好友聊天，还可以发送图片的功能。这一篇文章会完成个人资料与设置相关的功能，并将应用发布上线。之前设置了个人资料的入口按钮，现在我们就来完成个人资料屏幕，个人资料屏幕的UI如下图所示。在该屏幕点击右上方的按钮会变换浏览、编辑两种状态，而控制状态变换的关键在于设置一个全局变量。当用户进入个人资料屏幕时，编辑状态设置为false，因此显

在上一篇文章《Flutter实战一Flutter聊天应用（十九）》中，我们完成了删除用户的逻辑，就是将会话的有效性设置为false就可以了。那么当会话的有效性为false时，用户再次添加该会话，我们应该怎么处理呢？打开add_session.dart文件，将_AddSessionState的_addSession方法中将新会话写入数据库的代码提取出来。同时，在_AddSessionState中新增一

在上一篇文章中，我们完成了聊天列表的用户界面与功能代码。在用户添加完会话后，聊天列表会增加对应的会话项，通过点击会话项，可以进入聊天屏幕。在这一篇文章中，我们主要是修改lib/chat_screen.dart的代码，也就是最早的聊天屏幕。首先打开lib/chat_screen.dart，在ChatScreen中添加五个参数，messages是会话对应的消息列表，myName和sheName是会话双方

在上一篇文章中，我们完成了基本的添加聊天功能，但是还没有在聊天列表显示添加的新聊天，在这篇文章中我们将实现这个功能——在聊天列表中展示所有的聊天。首先，我们在/lib目录下新建一个group_chat_list_body.dart文件。在group_chat_list_body.dart中编写一个有状态控件GroupChatListBody，传递两个参数，phone（手机号码）和myName（姓名）

在正文开始之前，我们先组织一下数据，所有Firebase实时数据库的数据都被存储为Json对象。我们可以将该数据库视为云托管Json树，该数据库与SQL数据库不同，没有任何表格或记录。当我们将数据添加至Json树时，它变为现有Json结构中的一个节点。虽然Firebase实时数据库允许嵌套数据的深度多达32层，然而，当我们提取数据库中某个位置的数据时，也会检索所有子节点。另外，当我们向某用户授予数据

在上一篇文章《Flutter实战一Flutter聊天应用（十五）》中，我们完成了登陆屏幕。在用户登陆成功后，会在本地创建一个LandingInformation文件，以使应用程序在启动时可以判断用户的登陆状态。在main.dart文件中，我们在main方法执行runApp之前使用existsSync方法判断LandingInformation文件是否存在。判断结果会传递给TalkcasuallyAp

优化输入体验在进行下一步之前，我们先优化一下注册的体验：正在输入注册信息时，点击屏幕空白部分，清除当前文本输入框的焦点，同时收起键盘。正在输入注册信息时，直接收起键盘，再点击空白部分，清除当前文本输入框的焦点。不在用户输入时直接判断并显示错误提示信息，而是在用户输入完成以及点击加入按钮时判断并显示错误提示信息。在每一个输入框下方都显示帮助信息，提示用户输入什么内容。首先我们把SignUpS

在上一篇文章《Flutter实战一Flutter聊天应用（十四）》中，我们完成了注册屏幕。为了保持应用程序入口只有一个，即登陆屏幕，用户注册完成之后会返回手机号码、密码到登陆屏幕，让用户点击登陆按钮就可以直接登陆应用程序了。现在我们就来完善一下登陆屏幕。应用程序的项目已经上传到GitHub上，大家可以直接查看sign_in.dart文件的代码。我们回到sign_in.dart文件，在_SignInS

提交用户的注册信息我们现需要将用户的注册信息保存到Firebase实时数据库，在Firebase控制台中，更改Firebase实时数据库的安全规则，选择“Database > 规则”，规则如下所示：{ "rules": { "users":{ ".read": true, ".write": true }, "messages": {

由于当前项目的账号是直接使用Google账户，iOS系统问题不大，但是Android系统如果没有Google框架，则无法使用我们的应用程序。因此，我们需要创建自己的账户数据。在这篇文章中，我们会创建一个登陆屏幕和注册屏幕，两个屏幕的UI如下图所示：关于UI布局的内容不是这篇文章的重点，所以不会具体描述，只会展示代码并陈述布局思路。有关UI布局的内容可以查看《Flutter进阶—构建布局实例》、《Fl

我们的应用程序现在可以点击查看图像，但还没有实现查看时放大、缩小与移动图像。要实现这个功能，需要监听用户在图像上的操作，并调用相应的回调处理用户操作。我们先将Transform控件从_ImageZoomableState的build方法中拆分出来。在_ImageZoomableState类中添加_drawImage方法。class _ImageZoomableState extends State<

首先，我们要修复一下之前几篇文章中存在的缺陷。在发送超过两行的消息时，屏幕上显示的消息不会自动换行，会超出最大宽度。我们可以通过将Text包装在Container控件中，再添加一个width属性，使其获得一个不超出屏幕大小的宽度。class ChatMessage extends StatelessWidget { //... @override Widget build(BuildCo

在这篇文章中，我们将允许用户在聊天消息中发送图像，从设备检索图像文件，并将文本和图像数据存储在Google云端存储Bucket中。由于我们使用Firebase云储存，应用程序将变得更加健壮和可扩展。它能够在上传和下载期间处理网络中断，安全地存储数据，并在用户群扩展时保持相同的性能。要将数据（如文本和照片）从移动设备上传到云端，我们需要使用firebase_storage插件。在main.dart文件

现在，我们将使用Firebase服务将聊天消息数据存储并同步到公用共享实时数据库上的云。我们需要使用firebase_database插件，用于在Firebase数据库存储和同步消息，还需要使用firebase_animated_list插件，用于增强聊天消息列表。在main.dart文件中，确保导入相应的包。import 'package:firebase_database/firebase_da

使用Firebase控制台的分析（Analytics）功能可以帮助我们了解用户是如何使用Flutter应用程序。我们将启用捕获预定义的事件，调整应用程序以收集登录事件和发送消息的指标。数据捕获后，我们将通过Firebase控制台在仪表板中查看。要使用Firebase Analytics收集用户的数据，我们需要firebase_analytics插件。在main.dart文件中，确保导入相应的包。im

我们将使用Google登录来验证应用程序的用户。Google登录功能可让用户使用其Google帐户（与Gmail、Play、照片和其他Google服务所使用的帐户相同的帐户）进行安全登录。我们还可以根据与用户的Google帐户相关联的个人资料和身份信息，个性化用户体验。用户登录后，我们可以使用个人资料照片个性化聊天消息头像。要添加对Google登录的支持，我们将使用google_sign_in插件，

我们的应用程序现在已经有了一个好看的UI，但是我们还没有一个后端。所以我们要买一个云服务器，然后再安装数据库？当然不是！我们可以使用Firebase平台作为后端，那么Firebase是什么呢？Firebase一开始只是一个移动后端即服务平台，自2014年10月被Google收购后，被谷歌改造成了针对移动开发（iOS和Android）和Web开发的一个完整后端解决方案，2016年谷歌在I/O大会上推出

首先，我要对上一篇文章进行一点补充，在添加动画效果后，需要重新启动应用程序。使用重新启动而不是热重新加载，因为需要清除任何没有动画控制器的现有消息。目前在我们的应用程序中，即使输入字段中没有文本，也会启用“发送”按钮，我们可以根据该字段是否包含要发送的文本来决定是否启用发送按钮，并更改按钮的外观。定义_isComposing，一个私有成员变量，只要用户在输入字段中键入，该变量就是true。class

我们可以向控件添加动画效果，使应用程序的用户体验更加流畅和直观。在这篇文章中，我们将在聊天消息列表中添加基本动画效果。当用户发送新消息时，我们不要将其简单地显示在消息列表中，我们将从列表底部垂直放置消息。Flutter中的动画被封装为包含类型值和状态（如前进、后退、完成和关闭）的Animation对象，我们可以将动画对象附加到控件或监听动画对象的更改。基于对动画对象属性的更改，框架可以修改窗口控件的

随着项目的代码越来越多，我们会碰到各种问题，所以我们需要学习一下如何使用IntelliJ定位并解决问题。我们可以在IntelliJ IDE上调试在模拟器/仿真器或真机设备上运行的Flutter应用程序，使用IntelliJ编辑器可以：选择一个设备或模拟器来调试应用程序。查看控制台消息。在代码中设置断点。在运行时检查变量并评估表达式。IntelliJ编辑器在您的应用程序运行时会显示系统日志，

不知不觉，进阶的教程已经写了几十篇了，通过前面的学习，大家已经打下了良好的基础，接下来我们就开始进行项目实战吧！我们现在要写一个叫“谈天说地”的应用程序，这是一个简单、可扩展的聊天应用程序，能实时显示信息，用户可以输入文本信息，也可以通过按返回键或发送图标发送，还可以在iOS和Android设备上运行。首先我们要在IntelliJ编辑器中启动一个新的Flutter项目：启动IntelliJ IDE

在之前写过的《Flutter进阶—平台插件》中，笔者简单介绍了如何简单的使用和创建一个Flutter插件，现在可以试试编写一个可以在平台与客户端之间传递数据的Flutter平台插件。在此之前，可以先了解一下平台插件的基本原理。上面图片是平台通道的结构概述，使用MethodChannel在客户端（UI）和主机（平台）之间传递消息，消息和响应异步传递，以确保用户界面保持响应。在客户端，Flutter的M

Flutter makes it easy and fast to build beautiful mobile apps.这是Flutter项目主页上对Flutter的定义，它可以轻松、快速地构建漂亮的移动应用。Flutter是Google使用Dart语言开发的移动应用开发框架，使用一套Dart代码就能构建高性能、高保真的iOS和Android应用程序，并且在排版、图标、滚动、点击等方

质感设计的Theme类将主题应用于后代控件，主题描述了应用程序的颜色和排版选择。后代控件使用Theme.of获取当前主题的ThemeData对象，当控件使用Theme.of时，如果主题稍后更改，则会自动重建，以便可以应用更改。我们可以通过Theme.of查看当前应用程序的配色方案。class _MyHomePageState extends State<MyHomePage> { Widget

Flutter目前无法使用平台的数据库，因此我们暂时使用Firebase实时数据库。首先我们需要为项目配置Firebase，具体配置方法可以在《Flutter实战一Flutter聊天应用（五）》查看，因为我们只需要使用Firebase数据库，所以pubspec.yaml文件的内容需要修改一下。name: talk_casuallydescription: A new flutter project

使用http包Flutter支持http包，版本0.11.3+12或更高版本，首先在pubspec.yaml中声明对http的依赖，注意添加声明后按顶部的“Packages get”：dependencies: flutter: sdk: flutter http: '>=0.11.3+12'发出HTTP请求接下来，创建一个HTTP客户端（Client），我们建议使用createHt

这篇文章我们会学习Flutter应用程序如何与iOS和Android设备上可用的平台特定代码集成，这包括设备API，（比如url_launcher和battery）和第三方平台SDK（比如Firebase）。使用现有的平台插件Flutter插件是一种特殊的包，一个插件包含一个用Dart编写的API定义，结合Android的平台特定实现，适用于iOS或两者兼容。搜索插件现有的...

大部分应用程序都有多个屏幕或页面，并希望用户能从当前屏幕平滑过渡到另一个屏幕，Flutter的路由和导航功能可以帮助我们管理应用程序中的用户界面之间的命名和过渡。管理多个用户界面有两个核心概念和类：路由（Route）和导航器（Navigator），路由（Route）是应用程序的“屏幕”或“页面”的抽象，导航器（Navigator）是管理路由的控件。导航器（Navigator）可以推送（push）和弹

前面的两篇文章【动画效果（八）、动画效果（九）】中，我们只需要统计产品和地区，如果现在增加一个统计项目——销售渠道，那么使用之前的堆叠条形图和分组条形图都不适合。我们可以将两者结合，使用分组+堆叠条形图，实际效果如下图所示：如上图，我们使用同一种颜色的不同透明度表示不同的销售渠道，为了实现不同的透明度，我们需要先更新一下color_palette.dart文件的代码：import 'package:

在上一篇文章中，我们实现了统计每个产品和地区的销售额，如果现在需要统计每个产品和地区所占市场份额的百分比，那么使用堆叠条形图是不合适的，我们可以使用分组条形图，因为它可以同时在两个类别维度上进行定量比较。分组条形图的实际效果如下图所示：要实现上面的效果，我们需要更新bar.dart文件的代码：import 'package:flutter/material.dart';import 'packag

通过学习前面的文章，我们现在终于能为更复杂的图表制作动画效果了【手动斜眼笑】。接着上一篇文章讲，如果公司的产品销往全国各地，那么我们的图表要展示的内容就需要加上地区。我们可以使用堆叠条形图来试试效果，实际效果如下图所示：堆叠条用于数据集，其中类别是二维的，并且将由bar高度表示的数值加起来是合理的。其中一个颜色表示一个地区，每个条形表示一个产品，产品条形图使公司可以对比全国市场上各个产品的销售额，同

我们假设一种情况，如果应用程序使用条形图显示给定年份的产品类别的销售额，用户可以选择另一年，然后该应用程序将动画到该年的条形图。如果产品类别在两年内是相同的，或者恰好是相同的，除了在其中一个图表中右侧显示的其他类别，我们可以使用我们现有的代码。但如果公司在2016年有A，B，C和X类产品，但是在2017年中断了B并推出了D？动画效果可以做得非常好看，但仍然会让用户感到困惑。为什么？因为它不保留语义。

在上一篇文章中，我们之前对BarChart.lerp的定义并不是高效的，我们正在创建的Bar实例，仅作为Bar.lerp的参数给出，并且针对动画参数t的每个值重复出现。每秒60帧，这意味着可能很多Bar实例被送到垃圾收集器，即使是相对较短的动画。我们可以采用以下三种解决方案：Bar实例可以通过在Bar类中仅创建一次而不是每次调用collapsed来重复使用，但这种方法不适合我们的应用程序。重用可

在本篇文章开始前，我们先来总结一下之前我们都做了哪些事情。在第一篇文章中，我们在动画值更改时调用double lerpDouble(num a, num b, double t)重新绘制条形。在第二篇文章中，我们首先用Tween类帮助我们管理动画值，并重新绘制条形，然后把绘制条形动画相关的类提取到bar.dart文件。在第三篇文章中，我们首先在Bar类中增加颜色的字段，再新建color_palett

在上一篇文章：Flutter进阶—实现动画效果（三）中，实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形，同样是随机高度、颜色。首先在bar.dart中创建BarChart类，并使用固定长度的Bar实例列表。我们将使用5个条形，表示一周的5个工作日。然后，我们需要将创建空白和随机实例的责任从Bar转移到BarChart。import 'package:flutter/material.d

在上一篇文章：Flutter进阶—实现动画效果（二）的最后，我们实现了一个控件，其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的控件。还有一个浮动按钮控件，用于启动条形图高度的动画变化。现在开始向我们的单个条形添加颜色，在Bar类的height字段下添加一个color字段，并且更新Bar.lerp以使其两者兼容。在上一篇文章中，介绍过“lerp”是“线性内插”或“线性

在上一篇文章：Flutter进阶—实现动画效果（一）的最后，我们说到需要一个处理程序混乱的概念。在这一篇文章中，我们会引入补间，它是构建动画代码的一个非常简单的概念，主要作用是用面向对象的方法替代之前面向过程的方法。tween是一个值，它描述了其他值的空间中的两个点之间的路径，比如条形图的动画值从0运行到1。补间在Dart中表示类型为Tween的对象abstract class Tween<T> {