程子清

摘要

Flutter是Ooogle开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。在调研了Flutter的各项特性和实现原理之后，我们决定使用Flutter开发吉首市综治中心网格化服务管理系统协同平台移动端——赛协通APP。本文主要介绍在开发过程中用到的技术和解决方案。

【关键词】Flutter 智慧城市跨平台

1 概述

智慧城市以“智能手机十移动互联网为基础”，实现了城市“以人为中心”的高度信息化。在智慧城市建设中需要开发很多APP应用，这些APP大多数需要跨平台，同时项目紧，开发周期短，这就要求我们选择一种技术方案可以夸平台。在调研了Flutter的各项特性和实现原理之后，我使用Flutter框架在很短的周期開发了一款赛协通APP。在使用Flutter过程中，我们主要涉及了界面设计布局、网络请求数据、本地数据存储和路由页而跳转这四个方面技术。

2 界面设计布局

Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件

类的层次结构是扁平的，以最大化可能的组合数量。

在写应用程序时，经常会使用StatelessWidget和StatefulWidget编写新控件，两者的差别在于你是否要管理控件的状态。一个控件的主要任务是实现build函数，定义控件中其他较低层次的控件。build函数将依次构建这些控件，直到底层渲染对象。

3 网络请求数据

网络请求是APP开发中至关重要的一步，我们在开发这款APP采用的是dio库，dio是Flutter中文网开源的一个强大的Dart Http请求库，支持Restful API.FornData.拦截器、请求取消Cookie管理、文件上传下载、超时等。

（1）添加依赖（如图2所示）。

（2）一个极简的示例（如图3所示）。

4 本地数据存储

在开发APP过程中，我们需要存储一些数据在本地，比如，登录账户、登录密码和一些配置信息。在Flutter平台我们使用sharedpreferences库。SharedPreferences轻量级存储类，以键值对的形式保存设置，属性和数据，同时支持Android和iOS。

（1）添加依赖（如图4所示）。

（2）实际代码（如图5所示）。

5 路由页面跳转

Flutter里而有路由支持所有的路由场景，push、pop页而，页而问的参数传递等等。flutter里而的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。我们暂时把它们规为静态路由和动态路由。

5.1 静态路由的注册

在新建一个MD风格的APP的时候，可以传入一个routes参数来定义路由。但是这里定义的路由是静态的，它不可以向下一个页而传递参数（如图6所示）。

静态路由的使用

在新建一个MD风格的APP的时候，可以传入一个routes参数来定义路由。但是这里定义的路由是静态的，它不可以向下一个页而传递参数（如图7所示）。

pop回上一个页而（如图8所示）。

5.2 动态路由的使用

当需要向下一个页而传递参数时，要用到所谓的动态路由，自己生成页而对象，所以可以传递自己想要的参数（如图9所示）。

也可以用PageRouterBuilder来自定义打开动画（如图10所示）。

6 总结

Flutter目前仍处于早期阶段，也还没有发布正式的Release版本，不过我们看到Flutter团队一直在为这一目标而努力。虽然Flutter的开发生态不如Android和iOS原生应用那么成熟，许多常用的复杂控件还需要自己实现，有的甚至会比较困难（比如官方尚未提供的ListView scrollTo（index）功能），但是在高性能和跨平台方而Flutter在众多UI框架巾还是有很大优势的，可以大大提供开发效率。

参考资料

[1]石磊.基于Spark技术在智慧城市系统中的应用[J].电子技术与软件工程，2018（18）.

[2]Flutter框架技术概览.

[3]Flutter插件仓库.