基于Flutter开发的App商城

计算机工程系
毕业设计报告
题目：基于Flutter框架的电子商城制作
专　业：软件技术　
班级： 17移动互联2班　
学号： 31702160219 　
学生姓名：赖康翔　
指导教师：沈大旺　
完成时间： 2019 年 10 月 24 日

中文摘要
随着网络技术突飞猛进，互联网技术日渐发达、商务领域慢慢走向电子化，网络化，给传统的商务方式带来了新的途径和方案，如PC端的各种电子商务网站—淘宝、京东、拼多多等等。电子商务这已经成为人们生活的一部分，人们会通过网络进行卖花、买书、订酒，企业会通过网络完成商务的谈判和资金的流转。但是传统的面对面商务营销模式已经无法满足社会的需要，在21世纪的现在移动手机成为潮流，而PC端的网上商店已经无法满足社会用户的需求，移动端的电子商城应用已是当今的大趋势。
本项目以B2C企业对消费者的模式进行移动端电子商城的设计，背景以青廷科技有限公司设计的青廷商城App。Dart为开发语言，Flutter框架进行App程序的设计，App同时可以在Android和IOS上安装，用户可以通过注册登录商城进行购物，主要包括商品展示、用户注册、购物车、地址添加、商品收藏、浏览足迹、订单管理等功能模块。
本文首先描述了Flutter项目开发背景与应用前景，其次介绍了Flutter开发的搭建环境及Flutter程序架构，详细描述了青廷移动端电子商城实现的功能与使用的插件，然后论述了功能的程序设计与实现方法。如何对App界面进行布局界面布局，如何使用Dio进行html界面进行数据请求等。
关键词：移动端电子商城电子商务 Flutter App

Abstract

With the rapid development of information technology, the development of science and technology, and the gradual trend of e-commerce to e-commerce, networking, the traditional way of business has brought new ways and solutions, such as PC-side e-commerce sites Taobao, Jingdong, pinduoduo, and so on. E-commerce has become a part of people’s life. People will sell flowers, buy books and order wine through the network. Enterprises will complete business negotiations and capital flow through the network. However, the traditional face-to-face business marketing mode has not been able to meet the needs of the society. In the 21st century, mobile phones have become the trend, while the online store on the PC side has not been able to meet the needs of social users. The mobile e-mall application will become the trend in the future.

This project designs the mobile e-mall based on the B2C business to consumer model, and the background is the Qingting mall app designed by Qingting Technology Co., Ltd. Dart is the development language. The fluent framework designs the app program. The app can be installed on Android and IOS at the same time. Users can log in to the mall for shopping through registration, mainly including product display, user registration, shopping cart, address addition, product collection, browsing footprint, order management and other functional modules.

This paper first describes the development background and application prospect of flutter project, then introduces the construction environment of flutter development and flutter program architecture, describes in detail the functions and plug-ins of Qingting mobile electronic mall, and then discusses the program design and implementation methods of the functions. How to layout the app interface, how to use DIO for HTML interface data request, etc.

Key words: Mobile e-mall Electronic Commerce Flutter App

目录
中文摘要 I
Abstract I
第1章绪论
1.1前言
1.2产品功能需求详述
1.3项目开发的目的意义
1.4项目开发注意事项
1.5 App系统应用现状
第2章移动端电子商城相关技术介绍
2.1 Flutter简介
2.2 Dart语言简介
3.1 项目中使用的Flutter插件
第3章移动端电子商城实现
4.1 Flutter开发环境搭建
4.2 项目设计思路
4.3 代码结构
4.4 如何使用dio请求数据
4.5 如何使用flutter_screenutil插件进行屏幕适配
4.6 如何使用fluro插件进行路由的跳转
4.7 如何使用flutter快速进行轮播图的设计
4.8 Flutter如何打包APK
第4章移动端电子商城系统展示
5.1 完整代码展示
5.1 首页
5.2 栏目页
5.3 新闻页
第5章总结与展望
6.1 总结
6.2 展望
结论
参考文献
致谢

第1章论述

1.1 前言
-为什么使用flutter？
随着移动开发技术的日渐成熟，一些厂商开始考虑跨平台技术的解决方案，从早期的Cordova、Xamarin，再到后来的React Native和Weex等等，可谓是百家齐放，每种框架都有各自的优缺点，但目标都是一致的，就是提升应用的开发效率，降低研发成本，一套代码运行多个平台。这些框架除了Xamarin外都是采用Web端技术开发移动端应用，但提供比Web更好的用户体验。
以上框架中Cordova其实是一个Webapp框架，提供了针对iOS、Android、WP、BlackBerry等不同系统最常用的Native API调用能力，其本质还是由webkit做UI渲染，因此其性能和原生相比还有很大差距；而Xamarin笔者了解不多，又是个收费的项目，不再做扩展，有兴趣的可自行了解；React Native和Weex原理基本一样，都是基于Js的开发框架，React Native基于React.js，Weex基于Vue.js，其本质都是通过虚拟DOM驱动原生组件的渲染，因此性能和体验比较接近原生，然而其需要通过桥接器来驱动原生渲染的过程，导致其在性能上与原生还是有一定差距。基于以上框架的缺点，Flutter框架应运而生。
Flutter是一个多平台解决方案，使用Dart作为开发语言，通过Flutter框架转换为IOS或Android的程序，一套代码跑通安卓和苹果两个平台，减少了一般的开发成本，而且性能最接近原生，在遥远的将来可能这种插件式开发会在企业开发中替代掉Android与IOS的原生开发作为主要的移动应用开发手段，是以后移动应用开发的大方向。
1.2 项目功能需求详述
1、商品展示：通过读取后台api数据，在移动端的电子商城中进行展示企业的商品。
2、商品详情：通过读取后台api数据，点击展示的商品后进入的对该商品的产品简介，并提供加入购物车，立即购买，收藏等功能。
3、注册：用户能通过注册获取移动端的电子商城账号。
4、登录：用户能通过登录移动端的电子商城账号获取以下更多的功能服务。
5、购物车：在商品详情看到喜欢的商品可以加入购物车，提商品供结算功能。
6、地址管理：在个人中心里提供地址的填写，在购物时使用。
7、足迹：曾经查看过的商品可以在此处看到历史记录。
8、订单查询：曾经购买过的商品和未支付的商品可以在此次查到订单记录。
9、我的收藏：在商品详情看到喜欢的商品可以加入收藏。
10、问题反馈：用户遇到问题可以通过此处反馈信息。
11、优惠卷领取：此次能查看用户领取的优惠卷。
1.3 项目开发的意义
随着 Internet 技术的发展 , 联网成为人们快速获取、发布和传递信息的重要渠道，信息技术和网络技术的迅载发展和广泛应用，它对社会、经济、军事、科学和文化等领域产生越来越深刻的影响，也在正在改变着人们的工作、生活、学习和交流方式。它在人们政治、经济、生活等各个方面发挥着重要的作用，网上购物已经成为当今人们购物的潮流。因此，网上商城将会成为人们生活购物的第一选择。
利用互联网的突破地域限制的特点，为您同时服务于世界各地的用户。正因为网络无休息，一年 365 天、一天 24 小时无间断工作，您得移动端电子商城通过服务器环境搭建后永远忠实地服务于您的所有用户。同时，再利用多媒体技术，可以向用户展示自己、宣传自己，树立现代形象，无形中增值了自己的资产。不同的电子商务的宣传效果各异，但是通过互联网都大大提高了传播宣传力度。本文通过对移动端电子商城构建，着重从需求分析、系统功能实现以及APP的UI界面设计与美化等方面进行分析与描述，并给出具体的设计方案。因此，开发这样一套移动端电子商城很有必要。
1.4 手机系统应用现状
现在国内手机系统有两大主流一是Android，二是IOS，还有其他的系统如：Symbian，OS(Tapas)，Windows Mobile，MeeGo，Web OS，BlackBerry OS，三星 Bada等等。目前随着移动设备越来越普及以及移动设备的硬件的提升，移动设备的功能越来越完善，移动设备的系统平台也日渐火热起来。
1.5 项目开发注意事项
项目建设原则要有实用性和可行性，主要技术和产品具有成熟、稳定、实用的特点。实用性放在首位，既便于用户使用，又便于系统管理。
先进性和成熟性，系统设计采用超前思维，先进技术和系统工程方法，又注意思维的合理性，技术的可行性，方法的正确性。不但反映当今的先进技术和理念，而且具有发展潜力，能保证未来若干年内占主导地位。先进性与成熟性并重，并考虑到近年来的应用发展特点，把先进性放在重要位置。开发简单可以有单个工程师单周完成工作。
APP软件完全是从最初的想法形成的。手机APP软件的开发除了可行性外，还需要定制操作流程图，并严格执行。千万忌讳的是，还没有制作流程图就开始了应用程序的开发和生产。设计APP软件的最终目标是为用户服务，虽然不可能达到完美，但也尽量接近完美状态。手机APP软件开发应改善用户体验，以增加手机app软件的粘度。

第2章移动端电子商城相关技术应用概述
2.1 Flutter简介
2.1.1 flutter是什么？
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。
2.1.2 flutter特点
快速开发，由于Flutter选用了Dart作为其开发语言，Dart既可以是AOT（Ahead Of Time）编译，也可以是JIT（Just In Time）编译，其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。
性能优越，使用自带的高性能渲染引擎（Skia）进行自绘，渲染速度和用户体验堪比原生。
富有表现力的精美UI，Flutter内置众多精美的Material Design和Cupertino（iOS风格）小部件，开发者可快速构建精美的用户界面，以提供更好的用户体验。
2.1.2 flutter原理

图2-1 Flutter架构
GPU的Vsync信号同步到UI线程；UI线程使用Dart来构建抽象的视图结构；视图结构在GPU线程中进行图层合成；合成后的视图数据提供给Skia图形引擎处理成GPU数据；数据再通过OpenGL或Vulkan提供给GPU进行渲染。

2.2 Flutter框架介绍

图2-2 Flutter架构
2.2.1 Flutter框架分三层（Framework，Engine， Embedder）
Framework使用dart语言实现，包括UI，文本，图片，按钮等Widgets，渲染，动画，手势等。此部分的核心代码是flutter仓库下的flutter package，以及sky_engine仓库下的 io, async, ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。

2.2.2 Engine使用C++实现（主要包括:Skia, Dart 和 Text）
Skia，是开源的二维图形库，提供了适用于多种软硬件平台的通用API。其已作为Google Chrome，Chrome OS，Android, Mozilla Firefox, Firefox OS等其他众多产品的图形引擎，支持平台还包括Windows, macOS, iOS，Android，Ubuntu等。
Dart，部分主要包括:Dart Runtime，Garbage Collection(GC)，如果是Debug模式的话，还包括JIT(Just In Time)支持。Release和Profile模式下，是AOT(Ahead Of Time)编译成了原生的arm代码，并不存在JIT部分。
Text，即文本渲染，其渲染层次如下:衍生自 Minikin的libtxt库(用于字体选择，分隔行)；HartBuzz用于字形选择和成型；Skia作为渲染/GPU后端，在Android和Fuchsia上使用FreeType渲染，在iOS上使用CoreGraphics来渲染字体。
Embedder，是一个嵌入层，通过该层把Flutter嵌入到各个平台上去，Embedder的主要工作包括渲染Surface设置, 线程设置，以及插件等。平台(如iOS)只是提供一个画布，剩余的所有渲染相关的逻辑都在Flutter内部，这就使得它具有了很好的跨端一致性。

2.3 Dart简介

Dart也是一种VM语言，所以在每个运行Flutter的App中都有一个Dart的运行环境。编译模式支持AOT和JIT。Dart最开始是Google设计出来替代JavaScript的，但是并没有凑效。后面Flutter选择了Dart, 才使Dart活跃起来。

Dart语言的特点：
单进程异步事件模型；强类型，可以类型推断；具有极高的运行效率和优秀的代码运行优化的VM，根据早前的基准测试，性能比肩 Java7 的JVM；独特的隔离区( Isolate )，可以实现多线程；面向对象编程，一切数据类型均派生自 Object；运算符重载，泛型支持；强大的 Future 和 Stream 模型,可以简单实现高效的代码；Minix 特性，可以更好的实现方法复用；全平台语言，可以很好的胜任移动和前后端的开发在语法上，Dart 提供了很多便捷的操作。

2.4 项目中使用的Flutter第三方插件

在flutter经常使用别人写好的第三方插件在pubspec.yaml中加载，以下是本项目使用比较重要的第三方插件。
flutter_swipe
轮播图
dio
网络框架
flutter_spinkit
旋转组件
flutter_html
html框架
flutter_screenutil
屏幕适配
fluttertoast
Toast
shared_preferences
本地数据缓存
fluro
路由
city_pickers
城市选择
flutter_easyrefresh
上拉加载和下拉刷新
flutter_webview_plugin
WebView
cached_network_image
图片缓存

第3章移动端电子商城的相关技术介绍

3.1 Flutter开发环境搭建
Flutter环境的搭建相对繁琐，在刚刚接触Flutter时本人用了4天进行环境的搭建，所以在本文中为读者详细介绍了Flutter整个环境搭建的过程。
电脑配置环境如下：
• win7或更高版本系统（64位）
• 至少400M的磁盘空间（不包含IDE）
• Android Studio 3.0 及以上
• Android 4.1（API 16）以上
• git

一、安装Flutter Sdk与 Android Sdk
Flutter官网：http://flutter.io
Android Studio官网：https://developer.android.google.cn/studio/
二、 Window配置变量环境
1.在系统环境变量中找到Path，在最后添加Flutter的bin目录路径，例如：E:\ flutter\bin

图2-3 Flutter环境变量
2. 配置镜像，添加两个系统环境变量，分别为：FLUTTER_STORAGE_BASE_URL和PUB_HOSTED_URL。

图2-4 配置镜像1

图2-5 配置镜像2

三、安装Android Studio
首先下载Android studio安装包，可以从http://www.android-studio.org/下载最新版本，这里采用3.5版本进行演示，对应安装包为android-studio-ide-171.4408382-windows.exe，安装包大小681 MB，安装包不带SDK。下载好该安装包之后，点击进行安装，出现下界面一直点击下一步完成就好了。

图2-6 Android Studio安装
四、安装Android SDK
如果没有安装过Android SDK可以新建一个Android 项目Build一下会自动进行检测，自动安装Android SDK。如果自动安装失败可以在setting中手动安装。

图2-7 Android SDK安装

五、安装flutter依赖与环境检测
打开cmd命令行，输入flutter doctor，回车。
这命令初次运行过程（安装flutter需要的依赖以及进行编译）很慢，建议科学使用梯子。结果和下图类似。在第一次运作flutter时要根据检测内容给flutter添加Android Sdk权限。

图2-8 Flutter Doctor -v

六、在Android Studio中安装插件
刚刚安装好的Android Studio是无法创建Flutter项目的，需要在setting中的Plugins安装Flutter与Dart的插件，安装Flutter插件时会自动安装Dart插件，安装完成后刷新IDE就可以创建Flutter项目了

图2-9 Android Studio Flutter插件安装
插件安装完毕后就大功告成了，可以创建新项目开始进行开发了。

图2-10 Android Studio 新建Flutter项目
3.2 如何使用dio插件进行数据请求
Flutter网络连接工具类dio插件，具体内容如下该工具HttpUtil.dart工具类，在import加载dio.dart包后，通过调用getHttp方法就可以请求网络api接口了。在后期可以通过转model方式，接收服务器端发送过来的JSON字符串数据转换为Dart文件，让Json弱语言传化成强类型语言。

import 'package:dio/dio.dart';Future getHttp(String TypeText) async {try{Response response;var data = {'name':TypeText};// 这个链接是easy-mock 里面做的假数据// 如果使用post请求直接在这里换成post请求方式就行了response = await Dio().get("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",queryParameters:data);return response.data;print(e);}    }catch(e){}
}
3.4 如何使用flutter_screenutil插件进行屏幕适配
项目中使用flutter_screenutil，需要在项目目录中的pubspec.yaml文件中的dependencies里导入package。dependencies:# 最新的版本，版本会迭代，需保持最新的flutter_screenutil: ^0.5.1
使用时需要根据设计稿的尺寸初始化一下，具体实现看下方。
...// 作者建议在第一次 build 的时候就进行初始化，这样接下来就可以放心使用了。@overrideWidget build(BuildContext context) {// 方式一：默认设置宽度1080px，高度1920px ScreenUtil.instance = ScreenUtil.getInstance()..init(context);// 方式二：设置宽度750px，高度1334pxScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);// 方式三：设置宽度750px，高度1334px，根据系统字体进行缩放ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);...
}
3.4 如何使用fluro插件进行路由的跳转
项目中使用fluro，需要在项目目录中的pubspec.yaml文件中的dependencies里导入package。
dependencies:fluro: "^1.3.4"
或
dependencies:fluro:git: git://github.com/theyakka/fluro.git
如何使用fluro进行页面的跳转初始
//初始化路由
final router = Router();
//初始化后要定义roters和handles
var usersHandler = Handler(handlerFunc: (BuildContext                       context, Map<String, dynamic> params) {return UsersScreen(params["id"][0]);});void defineRoutes(Router router) {router.define("/users/:id", handler: usersHandler);}3.4 如何使用flutter_swiper快速进行轮播图的设计
//导入轮播图插件包
import 'package:flutter_swiper/flutter_swiper.dart';//核心代码
Swiper(scrollDirection: Axis.horizontal, // 横向轮换itemCount: widget.bannerData.length, // 图片数量autoplay: true, // 自动翻页itemBuilder: (BuildContext context, int index) {widget.indexcolor = index;return Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),image: DecorationImage(image: NetworkImage(widget.bannerData[index].url),fit: BoxFit.cover,)),);}, // 构建
// 构建创建监听事件onIndexChanged: (index) {// 如果index等于0，1，2时改变this.sttar变量颜色.if (index == 0) {setState(() {this.sttar = Color.fromRGBO(7, 8, 12, 1.0);});}if (index == 1) {setState(() {this.sttar = Color.fromRGBO(111, 125, 113, 1.0);});}if (index == 2) {setState(() {this.sttar = Color.fromRGBO(233, 93, 94, 1.0);});}},onTap: (index) {print('点击了第${index}');}, // 点击事件 onTappagination: SwiperPagination(// 分页指示器alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
builder: DotSwiperPaginationBuilder(// 指示器构建space: ScreenUtil.getInstance().getAdapterSize(5), // 点之间的间隔size: ScreenUtil.getInstance().getAdapterSize(7), // 没选中时的大小activeSize: ScreenUtil.getInstance().getAdapterSize(7), // 选中时的大小color: Colors.black45, // 没选中时的颜色activeColor: Colors.red)), // 选中时的颜色scale: 1.0, // 两张图片之间的间隔)

第3章移动端电子商城的实现

4.1 项目设计思路

图4-1 系统流程图
Windows10 操作系统作为开发环境，使用VS Code 作为开发工具，参考多个GitHub的flutter项目，有相应的借鉴与模仿。第三方开源插件dio来作为网络请求进行页面渲染显示。
利用多个不同 Android 、IOS、不同分辨率的移动设备作为测试终端。将系统划分为若干模块，对多个模块进行独立的单元测试。最后对整个客户端进行整体测试。确保此软件能够在大多数手机上稳定运行。

4.2 代码结构
以下对项目的代码架构进行详细说明：

图4-2 项目架构图

1.android ：安卓文件夹dart写好的代码会通过转换成为Android程序
2.images：本地缓存图片文件夹
3.ios： IOS文件夹dart写好的代码会通过转换成为IOS程序
4.lib：所有Dart文件会存放在此文件夹
文件夹名称文件类型
api文件夹 url接口
config文件夹路由
constant文件夹 App所有string文字
entity文件夹存放dart数据模型文件
page文件夹 UI界面文件(包含交互)
service文件夹数据请求
Utils文件夹第三方工具包
widget:文件夹 UI窗口界面文件
5.magin.dart:项目的核心dart文件，也是默认的
6.pubspec.yaml：Flutter框架配置文件
4.3 Flutter如何打包Apk
4.3.1 生成签名文件
1.Flutter IOS的打包相对限制较多，所以选择打包Android Sdk作为展示，在打包之前我们需要一个sign.jks签名文件，证明文件的唯一性。
keytool -genkey -v -keystore F:\APP\sign.jks -keyalg RSA -keysize 2048 -validity 10000 -alias sign
其中sign、storepass、keypass分别为：别名、密钥库密码、sign文件密码
F:\APP\sign.jks为签名问价存放目录，sign 为密钥名。后面都有用，请牢记。
2.在控制台输入上方指令后，会依次让你输入密钥库口令、姓氏、组织机构等等，下方是我的查看证书SHA1：
keytool -list -v -keystore F:\APP\sign.jks -alias sign -storepass 123456 -keypass 123456

图4-1 签名文件创建

4.3.2 Android Studio 配置
导入sign.jks，在Flutter工程中/android/app/key/sign.jks创建该目录。
要在app目录下创建key文件夹，然后把sign.jks拖进来。

图4-1 sign文件存放

4.3.3创建key.properites
在Flutter工程中/android/key.properites创建该文件，里面内容如下：

storePassword=123456
keyPassword=123456
keyAlias=sign
storeFile=key/sign.jks

4.3.4配置/android/app/build.gradle文件
需要修改 app 包下的 build.gradle 文件，增加如下配置：

android {signingConfigs {release {keyAlias 'sign'keyPassword 'android'storeFile file('key/sign.jks')storePassword 'android'}}buildTypes {release {signingConfig signingConfigs.release}}
}

图4-1 key文件存放
4.3.5打包APK
在当前项目目录的终端中执行：flutter build apk
或者直接在 Android Studio 的 Terinal 执行命令：

图4-1 打包Apk
生成的目录：当前项目\build\app\outputs\apk\release\xx.apk

第5章移动端电子商城系统展示
4.1 完整代码展示
名称图示说明
附件4-1 http://laikangxiang.cn:8099/root/flutter_shop_qt.git Gitlab代码

4.1 启动页
flutter的

图4-1 key文件存放

4.1 首页

4.2 分类页

4.3 购物车

4.4 订单详情页

4.5 个人中心

4.6 问题反映与优惠卷

4.7 注册与登录

4.8 地址管理

4.9 我的收藏与足迹

4.10 商品详情与结算

总结
经过几个多月的设计和开发体会到了开发岗的辛苦, 发现flutter大的开发不是一个人能完成的，电子商城系统流程基本开发完毕。本文简要介绍了系统设计实现过程中涉及的技术要点。同时对搭建系统的开发环境进行了介绍，如所使用的各种技术。项目以Dart为开发语言，插件式开发为核心。
通过这次毕业设计，我更深入地了解了Flutter，不仅熟悉了软件开发的过程，而且提高了自己解决问题的能力，从以前的项目结合，真正做到学有所用虽然在设计中我遇到了不少问题，例如数据转模型问题，但通过各种途径的学习请教均得到了很好的解决，自身也从中学会了很多东西，体会很深收益良多。
最后本文对Flutter电子商城系统进行展示，对系统的软件设计进行了描述包括如何请求数据等。同时针对系统主要功能的设计进行了着重介绍。随着互联网的兴起与电子商务的普及，社会的强烈需求移动应用必会有着更加广泛的应用前景。

致谢
在本文完成之际，非常感谢沈大旺老师，从设计思路、设计方法、设计过程等几个方面都给我很多指导，论文的选题、方案设计，到论文最终定稿，他都以严谨认真的态度对待，他的治学严谨和机敏睿智、高超的实践技能都对我产生很深的影响。值此提交论文之时，在此向导师表达衷心的感谢！