flutter 真机无法调试 sdk报错_中小团队的Flutter实践经验总结
作为当前最火热的跨端技术之一, Flutter频频登上各大科技版面头条。
阿里,腾讯和美团等大厂也发布了众多Flutter相关技术实践文章。
不少个人公众号也纷纷发布相关技术专栏。
但是真正用于生产系统的除了大厂外,并不多见。那么小团队怎么办?能不能用呢
我司经过半年的开发,用Flutter完成了C端产品的App初版, 我就在这里从前端架构的角度,聊一聊我们团队在Flutter上的一些实践经验。
本文不谈具体的技术细节,也不展示代码样例,只聊我们团队到目前为止的的实践感想和经验总结。读者对象为有一定前端开发经验,用过并且想深入使用Flutter作为生产级别框架的开发者。
1.先说说团队成员构成。
本项目负责Flutter开发的前端团队总共3人,iOS工程师,Android工程师,Web前端工程师各一人,此前并无Flutter经验。 其中Android工程师有React Native经验, Web前端工程师有React经验。 项目初期只有iOS工程师和Web前端工程师。 大约一个月后Android工程师加入。
2. 学习Dart、布局和基本组件
如果有OC,Java 和Es6的经验,Dart很好学,大约经过一、两周的学习就已经可以开始上手写代码了。
大家都是从最基本的Material组件开始使用,先搭建基本的App框架,并在这过程中学习布局。Flutter的布局很好上手, 学习了Row,Column,Flex和Stack,Positioned,常见的布局就差不多搞定了。当然,Flutter的布局也有种种怪癖和坑。不过比起拥有float, margin collapse等反人类怪癖的css来说,学习曲线很低。而大部分布局问题都有不少中英文资料解答了。
https://flutter.dev/docs/development/ui/layoutflutter.devhttps://flutter.dev/docs/development/ui/widgetsflutter.dev
组件方面,有经验的客户端工程师也可以很容易的在各种可滚动组件中找到如ListView等老熟人。
https://flutter.dev/docs/development/ui/advanced/sliversflutter.dev
Flutter标配的GestureDetector也提供了丰富的手势识别支持,识别点击,滑动,长按,短按和缩放等手势轻而易举。
https://flutter.dev/docs/development/ui/advanced/gesturesflutter.dev
路由:路由功能也由Flutter原生框架支持。辅以配套的Material和Cupution组件,大约一个月,我们就已经快速实现了主页,中间页和我的三个基本模块的主要内容。这期间我们也对路由功能做了一些自己的封装,减少了一些调用代码量。
https://flutter.dev/docs/development/ui/navigationflutter.dev
状态管理,Flutter的状态管理借鉴了React,Web前端同学可以在这里看到熟悉的setState函数,有经验的同学可以很快上手。而常见的Eventbus、Redux、MobX和Rx等状态管理组件也有了Flutter的实现。闲鱼还有自研的Fish-Redux
https://flutter.dev/docs/development/data-and-backend/state-mgmt/optionsflutter.dev
动画:flutter提供了Animation和Tween支持
https://flutter.dev/docs/development/ui/animations/tutorialflutter.dev
当然,团队里的三位的同学也在各种领域都有丰富的经验,并有极强的学习能力和学习热情。才能在短时间内达成这样的成果,所以团队里有优秀的人才还是很重要。
3. 丰富的第三方组件和代码示例
一个完整的App,少不了推送,错误监控等辅助功能,下面是一些常用的功能组件
上下拉刷新:
https://pub.dev/packages/flutter_easyrefreshpub.dev
推送:极光
极光推送 - 客户端集成插件 - 极光文档docs.jiguang.cn
埋点:极光统计
极光统计 - 客户端集成插件 - 极光文档docs.jiguang.cn
网络请求库:Dio,相当于Web前端的Axios
https://github.com/flutterchina/diogithub.com
序列化:因为Dart在Flutter中不支持反射,序列化稍显繁琐,官方也有不错的示例
https://flutter.dev/docs/development/data-and-backend/jsonflutter.dev
错误监控:FlutterError可以捕捉错误信息并上报,官网给出了示例:
https://flutter.dev/docs/cookbook/maintenance/error-reportingflutter.dev
示例资源:官网和Flutter中文网提供了很多的示例
https://flutter.dev/docs/cookbookflutter.dev
国际化:intl提供了支持
https://flutter.dev/docs/development/accessibility-and-localization/internationalizationflutter.dev
4. 测试、调试和工具
开发工具:vscode和android studio提供了和其他语言一样完美的开发体验
https://flutter.dev/docs/development/tools/android-studioflutter.dev
调试:提供了布局查看器,内存查看器、时间线查看器和性能查看器等工具
https://flutter.dev/docs/testing/debuggingflutter.dev
测试:从单元测试到集成测试都有支持
https://flutter.dev/docs/testingflutter.dev
5. 原生交互
原生插件开发:Platform Channel提供了和Native系统通信的能力,目前我们用的非常少,只自己编写了读取计步器,调用openCV和调用第三方SDK等几个插件。大部分代码都还是Flutter编写,复用率非常高。
https://flutter.dev/docs/development/platform-integration/platform-channelsflutter.dev
6. 自研:
对我们的第一版App来说,自研的组件并不多。主要有:
一个尺子状的滑动选择器
图表库。这个有团队提供了一个flutter charts,但是远远没有Echarts好用
使用Flutter Canvas 我们自己开发了折线图,柱状图和散点图等图表并支持滑动。
标签云:我们自己开发了3D旋转标签云组件。下面是一个示例,当然,我们的比这个好看的多:)
Android的3D标签云:TagCloudView - Android开发 - 开发语言与工具 - 深度开源www.open-open.com
关系图谱:我们自己还开发了一个类似于neo4j中的知识图谱节点关系图组件
7. 坑:
- 报错信息有时候晦涩难懂,习惯了就好
- WebView的支持坑不少,有时候需要原生层面修改代码
- 各种奇怪的bug,比如两个Container之间一道奇怪的细线,官方给出了不太通用的workaround
- 图片控件加载图片缓慢等等
因为中文资料较少,有些问题的解决需要有一定的英文搜索和阅读能力
8.总结
经过半年的学习,团队三人组已经很好的掌握了Flutter,开发速度明显提升。
半年时间里不仅完成了App的业务功能,还完成了路由组件自定义封装,图表库,标签云和关系图谱等自定义组件开发。代码达到很高的复用率(估计有95%),只有几个需要和原生通信的插件在iOS和安卓上分别进行了开发,原本计划需要2个Android和2个iOS加1个Web前端的开发,3个人就完成了。而且3位开发还可以互相修改和维护大部分代码。
不过Flutter也还有很多不完美的, 对于实时性和性能要求比较高的如视频播放、图像处理和对战游戏等或许还不一定能满足要求。有些Bug还需要等待Flutter团队处理。但是对于常见的App功能来说,Flutter在动画和流畅性方面已经达到令我们满意的要求了。
现在Flutter社区很活跃,几个大厂和个人团队也在Engine层面给Flutter团队和社区贡献了不少优化代码,我们相信Flutter会是以后以后跨端开发的重要力量。
供参考。
flutter 真机无法调试 sdk报错_中小团队的Flutter实践经验总结相关推荐
- flutter 真机无法调试 sdk报错_老许,你要转Flutter不要?只要你开金口,面试题现在就给你送来...
概述 Flutter是Google推出的一套开源跨平台UI框架,可以快速地在Android.iOS和Web平台上构建高质量的原生用户界面.在过去的一年里,Flutter的更新频率是相当的快,也有很多的 ...
- flutter 真机无法调试 sdk报错_Flutter - 不一样的跨平台解决方案
本文主要介绍Flutter相关的东西,包括Fuchsia.Dart.Flutter特性.安装以及整体架构等内容. 简介 Flutter作为谷歌推出的跨平台开发框架,一经推出便吸引了不少注意.关于Flu ...
- flutter 真机无法调试 sdk报错_Flutter源码剖析(二):源码的阅读与调试环境配置
综述 Flutter从架构上来说有3部分: 用Dart写的Framework层,面向开发者 用Java/Kotlin写的Embdder层(For Android,iOS是OC/Swift),纯Flut ...
- flutter 真机调试卡在 Installing build\app\outputs\flutter-apk\app.apk...
记录一下 : flutter 真机调试卡在 Installing build\app\outputs\flutter-apk\app.apk-
- xcode7中,无需证书即可进行真机编译调试!
iOS开发总是面临一个问题,借不到机器进行测试,自己的机器又不能使用.每到这个时候我都在想,苹果什么时候给力一点? 现在,苹果终于给力了!Xcode7全新特性来袭,下面为大家介绍: 无需证书的真机编译 ...
- 系统升级到10,xcode升到8,之后真机不能调试的问题
打个广告:欢迎大家关注我的青少儿编程课堂,扫码就可以关注 问题:系统升级到10,xcode升到8,插上真机不能调试的问题 提示Development cannot be enabled while y ...
- 鸿蒙真机运行调试步骤
鸿蒙真机运行调试问题 在真机调试时需具备三个文件才可运行,网上有很多教程指导大家如何运行,在这我将详细对步骤说明如下: 第一步: 在DevEco Studio开发工具上生成P12文件 点击按钮new生 ...
- UWA Pipeline 2.0 功能详解|私有云真机远程调试
UWA Pipeline 是一款面向游戏开发团队的本地协作平台,旨在为游戏开发团队搭建专属的DevOps研发交付流水线. 为帮助大家更好了解最新2.0版本中的各项新功能,我们将陆续为大家进行详解. 今 ...
- 【Android NDK 开发】NDK C/C++ 代码崩溃调试 - Tombstone 报错信息日志文件分析 ( 使用 addr2line 命令行工具查找动态库中的报错代码位置 )
文章目录 一.从 Tombstone 报错日志中查找报错动态库 二.addr2line 命令行工具使用 64 位动态库使用的 aarch64-linux-android-addr2line.exe 工 ...
- android 网络时区 错误,React native 安卓机器上调试代码报错:网络请求出错TypeError: Network request failed...
React native 安卓机器上调试代码报错:网络请求出错TypeError: Network request failed 安卓机器 usb连接调试 报错信息 TypeError: Networ ...
最新文章
- Python os.chdir() 方法用于改变当前工作目录到指定的路径。
- 用 XStream 序列化/反序列化 XML 为 Java 对象(实例)
- 如何知道现在是否单用户模式_新手运营Shopee现在是否来得及,商品的转化如何提高?...
- 关于微分方程的初值条件和边界条件(狄里克雷(Dirichlet)条件、诺依曼(Neumann)条件、洛平(Robin)条件)
- OPENCV图像创建,保存和复制
- 筹码游戏java代码编写,PAT(Basic Level) 乙级练习题 ------ 1071 小赌怡情 java
- 【MFC】可调整按钮位置的工具栏
- spingboot实现redis的发布订阅
- 如何从心理上缓解对浑浊物的恐惧?
- 未能加载文件或程序集Microsoft.VisualStudio.Web.PageInspector.Loader
- Steins;Game Gym - 102798J(未解决)
- (九)Spring 事务开发、事务属性详解
- javascipt很有用的代码,实现全选与反选,还可以与struts2或sevelet交互使用
- 14-9-25日jenkins部署到tomcat的错误日志
- 人工智能与深度学习概述(1)
- java代码混淆工具
- # 3 网页实现吃豆子动画
- 做计算机项目的流程图,软件工程实验三(程序流程图和PAD图)
- CMake的使用例子
- 一道逻辑推理题的程序实现(纯属娱乐)