simplezhli/flutter_deer

🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图，更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.

Flutter Deer

English | 中文

本项目为个人学习Flutter的练习项目。

通过设置、修改、组合自带部件以及自定义来实现具体的设计效果，满足日常开发的需求。

本项目设计图见design目录，你可以通过我提供的设计图有目标的去练习。所有的实现仅是个人的学习理解，如果有更好的实现方案欢迎交流。

预览

部分页面效果如下：

觉得还可以的话，来个Star、Fork支持一波！本项目持续维护中，有问题欢迎提Issue。

实现内容（已迁移到空安全）

• mvp模式
• 使用provider (6.x 版本)做状态管理
• 基于dio （5.x 版本）的网络请求封装
• 完整的集成测试、可访问性测试。
• 支持深色模式
• 本地化（感谢 @ghedwards）
• 使用Sliver 系列组件实现复杂滚动效果
• 使用高德地图定位选择地址（支持Web）
• 通用Widget的处理封装
• 下拉刷新 + 上拉加载更多
• 应用检查更新
• PopupWindow
• 扫码功能（qr_code_scanner插件）
• 菜单切换动画（圆形扩散、3D翻转）
• 侧滑删除
• 城市选择
• 类似京东选择城市的三级联动
• 各种自定义Dialog
• 列表头部吸顶
• 密码输入键盘
• 验证码输入框
• 自定义简易日历
• 曲线图及饼状图
• 模块化路由管理
• 更多Demo（水波纹动画、刮刮卡、lottie）
• 更多的细节优化

具体可以下载体验：

Android版安装包：点击去下载。

iOS需要自行下载代码运行。

Web体验地址：https://simplezhli.github.io/flutter_deer/

项目运行环境

1. Flutter version 3.19.0

2. Dart version 3.3.0

注意事项

• debug模式下会有部分卡顿现象，这属于正常现象。良好的体验需要打release 包。 iOS可以执行命令flutter build ios 以创建release版本。 Android可以执行命令flutter build apk 以创建release版本。

• 项目运行有问题可以在iOS问题汇总、Android问题汇总中尝试寻找解决办法。

• 由于部分插件的原因，本项目在Windows、macOS仅做预览（主要为原生功能方面，UI问题不大）。有兴趣的可自行运行体验。

• 可以执行集成测试命令flutter drive --target=test_driver/driver.dart 查看功能演示。

• 因为页面有点多，一开始可能会导致页面无法与设计图对应上。我在代码注释中有添加设计图的相对路径，可以搜索或查找到对应页面，希望对你有帮助。

• 本项目使用FlutterJsonBeanFactory插件来生成Bean。

• Web受制于js等资源过大和部署在Github上，访问会慢一些。

心得总结（推荐阅读）

• Flutter开发中的一些Tips(一)

• Flutter开发中的一些Tips(二)

• Flutter开发中的一些Tips(三)

• Flutter适配深色模式（DarkMode）

• 说说Flutter中的RepaintBoundary

• 说说Flutter中的Semantics

• 说说Flutter中最熟悉的陌生人 —— Key

• 说说Flutter中的无名英雄 —— Focus

• Flutter性能优化实践 —— UI篇

• 玩玩Flutter的拖拽——实现一款万能遥控器

• 玩玩Flutter Web —— 实现高德地图插件

• 在GitHub Actions上进行Flutter 的测试和部署

• Flutter动画曲线Curves 效果一览

• Flutter状态管理之Riverpod

• 【译】正确操作Dart中的字符串

• 【译】学习Flutter中新的Navigator和Router系统

• 【译】Flutter 2.2中的新功能

使用到的三方库

库	功能
dio	网络库
provider	状态管理
flutter_2d_amap	高德2D地图
cached_network_image	图片加载
fluro	路由管理
flutter_oktoast	Toast
common_utils	Dart 常用工具类库
flutter_slidable	侧滑删除
flustars	Flutter 常用工具类库
flutter_swiper	Flutter 轮播组件
url_launcher	启动URL的插件
image_picker	图片选择插件
rxdart	Dart的响应式扩展
webview_flutter	WebView插件
keyboard_actions	处理键盘事件
azlistview	城市选择列表
date_utils	常用的日期工具类
bezier_chart	曲线图表
sprintf	格式化String
qr_code_scanner	扫码功能
intl	本地化
device_info_plus	获取设备信息
vibration	振动
lottie	动画效果

详细内容可以参看pubspec.yaml文件

后续计划：

• 添加地图功能，具体实现插件见 flutter_2d_amap

• 下拉刷新 + 上拉加载更多

• 引入状态管理，预计使用 provider

• 页面添加设计图路径注释，方便寻找对应的设计图。

• 添加集成测试。

• 深色模式支持。

• 添加Semantics（语义）

• Web端支持。

• 迁移到空安全。（安装包减少135KB，10.3M -> 10.1M）

• 迁移至Navigator 2.0。

已知存在问题：

• 部分使用的到的三方库没有适配3.0.0，flutter_swiper（flutter_swiper_null_safety_flutter3替代）、flustars（flustars_flutter3替代）、azlistview（升级scrollable_positioned_list）。

• 3.10.0 已知存在问题(#105203 #113595)

• 2.0.0 已知存在问题(#68571 #73351 #74890 #79773 #79931)

• ListView在没有设置分割线的情况下，个别Item之间存在大约1像素的间隔（像素对齐问题）。

• 其他历史问题见docs目录下的问题汇总。

Thanks For

• flutter_wanandroid

License

Copyright 2019 simplezhli

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

flutter_deer's Issues

为什么我打release包要15M。你发的包才9M呢？

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：小米MIX 2s
• 设备系统版本：如 Android 9.0
• Flutter 版本：如 1.7.8

具体问题描述

为什么我打release包要15M。你发的包才9M呢？

问题截图

异常日志

TextField 居中问题

运行环境

• 电脑系统：Windows 10
• 设备型号：小米6s
• 设备系统版本： Android 9.0
• Flutter 版本： [1.8.4]

具体问题描述

貌似所有的输入框 光标和hint没有垂直居中 稍微有点错位 搜索框尤其明显 不知道怎么回事

问题截图

异常日志

商品列表刷新问题

楼主，商品tab中，选择商品类别之后，应该根据类别变化发起网络请求，然后根据返回数据刷新商品列表，请问怎样做比较合适呢，没有找到合适的办法

如何登录？

验证码发生到哪里去了？

ImagePicker.pickImage(source: ImageSource.gallery) 没反应

运行环境

• 设备型号：华为 p30 pro
• 设备系统版本：9
• Flutter 版本：1.7.8 hotfix3

具体问题描述

1. 登录完成
2. 填店铺资料页，点“选执照”的按钮
3. 通过授权
4. 没有调出相册
5. 再次点击按钮有异常如下：

E/flutter (28517): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: PlatformException(already_active, Image picker is already active, null)
E/flutter (28517): #0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:564:7)
E/flutter (28517): #1      MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:316:33)
E/flutter (28517): <asynchronous suspension>
E/flutter (28517): #2      ImagePicker.pickImage (package:image_picker/image_picker.dart:53:40)
E/flutter (28517): <asynchronous suspension>
E/flutter (28517): #3      _StoreAuditState._getImage.<anonymous closure> (package:flutter_deer/store/store_audit_page.dart:34:32)
E/flutter (28517): #4      State.setState (package:flutter/src/widgets/framework.dart:1141:30)
E/flutter (28517): #5      _StoreAuditState._getImage (package:flutter_deer/store/store_audit_page.dart:33:5)
E/flutter (28517): #6      _StoreAuditState._buildBody.<anonymous closure> (package:flutter_deer/store/store_audit_page.dart:117:21)
E/flutter (28517): #7      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:635:14)
E/flutter (28517): #8      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:711:32)
E/flutter (28517): #9      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
E/flutter (28517): #10     TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:365:11)
E/flutter (28517): #11     TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:275:7)
E/flutter (28517): #12     PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:455:9)
E/flutter (28517): #13     PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:75:13)
E/flutter (28517): #14     PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:102:11)
E/flutter (28517): #15     _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19)
E/flutter (28517): #16     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22)
E/flutter (28517): #17     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7)
E/flutter (28517): #18     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7)
E/flutter (28517): #19     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7)
E/flutter (28517): #20     _rootRunUnary (dart:async/zone.dart:1136:13)
E/flutter (28517): #21     _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (28517): #22     _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
E/flutter (28517): #23     _invoke1 (dart:ui/hooks.dart:250:10)
E/flutter (28517): #24     _dispatchPointerDataPacket (dart:ui/hooks.dart:159:5)
E/flutter (28517): 

运行之后报错，删除了flutter的cache重新upgrade也不行

请问这是什么问题...

请问您是怎样将底部那四个按钮的点击选中时文字放大隐藏的呢？

请问您是怎样将底部那四个按钮的点击选中时文字放大隐藏的呢？我看了您的源码，好像没有哪个参数设置的取消这个动画的，是否可以告诉下我是怎么取消的吗？

亮哥 可以封装一个统一的路由跳转动画

0.0

首先这个练习的项目我觉得很好，很震惊。 但是我是初学者，大部分都看不懂。 如果有注释，或者有文字教程就好了

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：小米MIX 2s
• 设备系统版本：如 Android 9.0
• Flutter 版本：如 1.7.8

具体问题描述

问题截图

异常日志

写的真的是厉害,拜读中

抱住大神的大腿膜拜,日期选择那里是手撸的么

验证码按钮状态更改问题

现在代码中是点击发送验证码按钮直接倒计时，正常的开发流程中，是先网络请求验证码发送成功后，才进行倒计时，请问这里该怎么修改呢

问一下设计图通过什么画的，或者说是什么工具导出的

我们UI 问一下设计图通过什么画的，或者说是什么工具导出的？

工程应用需要登录，验证码收不到

硬件相关的处理

请问flutter中调用Android 或者 ios 的硬件是怎样处理的呢，例如摄像头，传感器 等。

无法运行项目

运行环境

• 设备型号：如：Emulator
• 设备系统版本：如 Android 8.0
• Flutter 版本：如 1.7.8

具体问题描述

下载项目后无法运行项目

问题截图

下载项目后更新过如下配置

异常日志

Error: Error when reading .....flustart..... Permission denied
import 'package:flustars/flustars.dart';

大佬,有单独的密码输入的功能说明么?

大佬,有单独的密码输入的功能说明么?

夸奖

挺用心了兄弟。
You are very attentive.

Could not find a file named "pubspec.yaml"

运行环境是最新的

异常日志

pub get failed (69) -- attempting retry 3 in 4 seconds...
Could not find a file named "pubspec.yaml" in https://github.com/simplezhli/flutter_2d_amap.git 9705e914e9c3593f41cb4d32d0f43b3abb9b14f1.
Running "flutter pub get" in flutter_deer-master...
pub get failed (1)

网络请求框架相关问题咨询

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：小米MIX 2s
• 设备系统版本：如 Android 9.0
• Flutter 版本：如 1.7.8

具体问题描述

问题截图

异常日志

您好，我下载安装之后在注册的时候发送验证码收不到？没办法进行注册

运行报错

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：as模拟器
• 设备系统版本：如 Android 8.1
• Flutter 版本：如 1.7.8

具体问题描述

运行报错

问题截图

异常日志

Compiler message: Error: The argument type 'Null Function(StringBuffer)' can't be assigned to the parameter type 'Iterable<DiagnosticsNode> Function()'.

如果出现以下问题：

Compiler message: Error: The argument type 'Null Function(StringBuffer)' can't be assigned to the parameter type 'Iterable Function()'.

可以尝试下面做法：

As a temporary workaround, you can navigate in Android Studio to Dart Packages > cached_network_image-0.7.0 > src > cached_network_image_provider.dart and remove the informationCollector named parameter (line 46), so the load(CachedNetworkImageProvider key) method will be as follows:

@OverRide
ImageStreamCompleter load(CachedNetworkImageProvider key) {
return new MultiFrameImageStreamCompleter(
codec: _loadAsync(key),
scale: key.scale,
);
}
This may not the best solution, but if you want to stay in Flutter 1.5.9, this workaround will allow you to run your app.

怎么获取验证码

routers 路由管理封装类带参数push下级页面

具体问题描述

NavigatorUtils.push(context,MyPageRouter.feedbackPage);

这种的封装下，我想带参数push到下一级页面，怎么携带参数呢，且参数类型不全是String类型，

我参阅了fluro路由管理框架里面的写法，是直接把参数携带到path的后边，类似于：
String route = "/demo?message=$message&color_hex=$hexCode";

但是您在他的基础上进行了又一层的封装，我想知道在您的代码基础上如何去携带参数的哈

获取用户数据API 把 isList 设置成true 没有回调onError

如题 ，模拟了 抛出了JOSN 解析的异常 但是ShopPagePresenter 没有回调onError

flutter packages get 报错

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：小米 8
• 设备系统版本：如 Android 9.0
• Flutter 版本：如 与源码一致

具体问题描述

程序down下来以后，执行flutter packages get 报错

问题截图

[flutter_deer] flutter packages get
Running "flutter pub get" in flutter_deer...
The current Flutter SDK version is 0.0.0-unknown.

Because oktoast 2.2.0 requires Flutter SDK version >=0.3.0 <2.0.0 and no versions of oktoast match >2.2.0 <3.0.0, oktoast ^2.2.0 is forbidden.

So, because flutter_deer depends on oktoast ^2.2.0, version solving failed.
pub get failed (1)
exit code 1

异常日志

返回数据处理问题。

为什么返回值会多message和code。怎么把data里面的data信息解析出来呢？

D/X-LOG (13781): ResponseCode: 200
D/X-LOG (13781): {
D/X-LOG (13781): "code": 0,
D/X-LOG (13781): "msg": null,
D/X-LOG (13781): "data": "登录成功!"
D/X-LOG (13781): }
D/X-LOG (13781): ----------End: 1267 毫秒----------
I/flutter (13781): response返回
I/flutter (13781): {"code":0,"data":{"code":0,"msg":null,"data":"登录成功!"},"message":""}

我准备将MVP模块单独抽象出来作为工具类来使用,事实上我已经在做了

我很喜欢这个项目的MVP实现方式,因此我准备将MVP模块单独抽象出来作为工具类来使用,事实上我已经在做了.
flutter mvp实现方式.

dio添加代理后仍然无法用fiddler抓包

dio添加代理后仍然无法用fiddler抓包

Android 的代码啥时候开源啊 没看到代码在哪

你的博客文章“Flutter 动画曲线Curves 效果一览”里面的GIF图是怎么做的？

如下图，请问下图中的两部分别是怎么做的？如果是用软件的话，请告诉我用什么软件，感谢指导。

环境冲突

升级到flutter1.9版本之后，依赖之间的兼容性问题

Because date_utils >=0.1.0 depends on intl ^0.15.0 and every version of flutter_localizations from sdk depends on intl 0.16.0, date_utils >=0.1.0 is incompatible with flutter_localizations from sdk.
So, because flutter_deer depends on both flutter_localizations any from sdk and date_utils ^0.1.0+2, version solving failed.
pub get failed (1)

请教关于项目 clone 下来编译不了的问题

大佬 , 我是小白一个 , clone 下你的项目后 , package get 一直不行 , 一直提示 dart 的版本对应不上 , 请问该怎么解决呢 ? flutter 版本 1.5.4 , 错误如下:

能把SpUtil移除下吗？

flustars库本身就已经包含了SpUtil了，你这样把源码暴露在外面，大家都直接copy你项目里面的工具类使用了，而不去使用pub库了，谢谢

在订单页中，左右滑动切换子tab。会出现 卡顿。

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：meizu pro7 plus
• 设备系统版本：如 Android 8.0

具体问题描述

直接下载的apk，订单页中，切换tab，每次都会在两个子tab切换动画走到一半的时候，会出现卡顿一下，然后顶部的子tab进行选中动画切换，最后才到内容剩下的一半切换完成。

引入状态管理，能否使用fish-redux？

引入状态管理，能否使用fish-redux？

请问一下 是否考虑结合Provider 开发多语言切换功能呢 ？

页面弹出遮罩略有延迟

进入APP后，我点击底部“店铺”Tab，然后点击右上角的闹铃Icon，发现弹出的遮罩有延迟。
我的测试机器是红米Note-7，MIUI 10 9.7.4|开发版，安卓版本为9。flutter版本为1.5.4-hotfix.2
具体表现为：刚弹出遮罩的时候，还会看到原来底部的页面，如下图所示：

请问下开发这个纯UI的APP用了多久

请问下开发这个纯UI的APP用了多久，和用原生开发比，大概可以快多少呢

请求network嵌套请求 dialog可能无法自动关闭的问题

提前感谢大佬！

具体问题描述

Dio 封装库中,一般在请求接口信息时需要串联各个接口以便顺序调用.
例如在登录时，会先请求登录信息、再请求配置文件

嵌套请求
//isShow:true 开启dialog
requestNetWork(isShow:true,url:login,onSuccess:(data){
      ///此时请求登录成功  isShow:true 开启dialog
      requestNetWork(isShow:true,url:config,onSuccess:(data){
      ///此时请求配置信息成功
      })
})

如上伪代码，isShow 会开启dialog,第一个请求成功后会关闭dialog,理论上第二个请求会重新开启dialog，请求成功后，会再次关闭dialog

我这边出现的问题是:在这种情况下，Dialog并不一定会关闭。
我特地在 view.showProgress() 、view.closeProgress()中打印以确保他们会正常执行，特别注意，view.closeProgress()的实现我使用的是原生的路由：

  void closeProgress() {
    if (mounted && _isShowDialog){
      _isShowDialog = false;
      Navigator.pop(context);///<-------
    }
  }

用的什么API？

请问在Ios上怎么进行预加载呢？

我最近也在用flutter混编iOS原生，发现第一次跳转到flutter的时候flutter页面会加载时间比较长体验不太好，请问我在启动app的时候怎么去对flutter进行预加载呢？

无法编译运行

运行环境

• 设备型号：如：MI 8
• 设备系统版本：如 Android 9.0
• Flutter 版本：如 1.5.4

具体问题描述

刚拉取最新代码，无法编译运行

问题截图

异常日志

Page类名都规范一下吧

代码中有的Page类名有Page后缀，有的又没有，统一一下规范吧
比如

flutter_deer/lib/shop/shop_page.dart

Line 17 in 8f656e2

class Shop extends StatefulWidget {

flutter_deer/lib/shop/shop_setting_page.dart

Line 19 in 8f656e2

class ShopSettingPage extends StatefulWidget {

SMSVerifyDialog类中,android 端当6位短信验证码输入完后,会同时执行3次onChanged回调里的长度相等判断

具体问题描述

SMSVerifyDialog 的短信验证框 ，输入完6位的短信验证码的时候，里边的v.length == _codeList.length 的 if 判断 会触发3次，我用provider 代替 了setState(() {});刷新页面，但是还是有问题

获取TextFieldItem 编辑后的值呢

请教一下，商品编辑页面，有很多的TextFieldItem、Check_Item当点击“提交”的时候，如何获取编辑的值呢，看着代码并没有Form类似getvalues方法

有一个问题，地图定位错误

如何让flutter的session保存不变。

想要给flutter-deer写后端接口，让项目看起来更真实。
利用session判断用户是否登录过。
web端session不会发生变化。
flutter-deer的session一直在变化。
flutter-deer发两次登录请求
我拿到的sessiond7eb9518-97f1-429f-84fc-4fe3630748ea
我拿到的session54b24859-8756-44da-9e93-2ed528b7f7aa
web端发两次登录请求
我拿到的session80491d3e-ef47-4a83-835f-5646992304c7
我拿到的session80491d3e-ef47-4a83-835f-5646992304c7

大佬，请问你的扫描的插件是怎样让他显示中文的，我这里手电筒的文字一直显示的是FLASH ON

运行环境

• 电脑系统：如：Windows 10
• 设备型号：如：小米MIX 2s
• 设备系统版本：如 Android 9.0
• Flutter 版本：如 1.7.8

具体问题描述

问题截图

异常日志

大佬您好，关于app开发的

大致查看了一下整体的项目，发现并没有使用mvp，数据、逻辑和视图都写到一起不太好吧，如果另一个人接手你的项目，可能会造成review困难，是否可以引用状态管理呢？而且mvp对于Flutter感觉并不适用，应该为mvvm，我个人理解为Flutter的界面是根据数据驱动，所以数据作为主导，并不像android开发那样，可以只更新一个控件，所以这个项目对于初学者比较友好（建议作为学习ui项目），但对于真正的企业项目，貌似不够用！