Flutter提升开发效率的一些方法和工具

简介:

Flutter的环境搭配完之后,就开始Flutter的开发,下面的一些工具和方法,可以省下一些时间。

自己在用的,暂时想到的,就是这些了,总结一下。

1.JSON解析快速生成实体类
根据接口返回的数据,编写实体类,添加两个方法。

fromJson()方法是可以聪一个Map中构造出一个User的实例,toJson()方法,可以将一个实例转化为Map。
image
如果接口返回的数据比较复杂点,那么手动写起来就会很麻烦。这个时候可以利用json_serializable来帮你自动生成实体类的一些代码,还有利用caijinglong.github.io/json2dart/i…来快速生成相关代码。

将json数据复制到这个网站上,就会生成相关的代码,只需要将这些代码复制到项目中的文件就行了,

最后在我们的项目根目录下运行flutter packages pub run build_runner build,我们可以在需要时为我们的model生成json序列化代码 。

注意:要先在pubspec.yaml文件里面添加:
image

每个类最后面生成的with _$UserSerializerMixin,这部分可以去掉,不去掉的话,好像生成会有问题,反正我是去掉了,没什么影响。
image
2.代码模板
最简单的一个例子,就是在写一个有状态StatefulWidget的时候,要手动继承StatefulWidget,重写createState方法,再创建一个相应的State类并重写build方法。会写到你吐血。

这个时候就需要一些代码模板,帮你快速生成代码。

反正百度一下肯定有些导入Flutter代码模板的教程。

比如直接打出stf,就可以自动提示生成StatefulWidget的代码了。
image

3.Asset资源文件的导入
Flutter中,常见类型的asset包括静态数据(例如JSON文件),配置文件,图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)。

一般导入的资源都要在pubspec.yaml文件中按照下面的方式,一个一个进行声明,应用程序才能获取到。

image
改进方法:要包含asset文件下面的所有资源,直接用下面这样方法,这样的话,只在这个目录里的文件会被包含进来。

image
4.Flutter Outline工具,主要用于视图的预览,还有其他功能
在编写布局的时候,可以看到Flutter Outline界面,会实时地更新所写的布局层次,方便查看。

除了视图的预览,还有其他的功能。

就是右键某一个widget,可以根据提示框,快速帮你在这个widget的外面包装一层比如padding之类的代码。这个功能有时候挺方便的。
image
Extract method的作用是:可以把某一个widget控件的代码,帮你封装成一个方法。不用你去手动地去找出一个widget的全部代码,再自己拉到某一个方法内。

另一方面,也可以方便地看出这个widget的相关代码,比如要复制操作起来也比较方便。
image
5.拖动widget自动生成相关代码
有一个网站:flutterstudio.app/

可以拖动widget到模拟器中,就可以生成相关的布局代码,自己手动复制粘贴就可以了。
image
image

原文发布时间为:2018-12-8
本文作者:Android开发中文站
本文来自云栖社区合作伙伴“ Android开发中文站”,了解相关信息可以关注“AndroidChinaNet”微信公众号

相关文章
|
6月前
|
开发者
Flutter笔记:build方法、构建上下文BuildContext解析
本文主要介绍Flutter中的build方法和构建上下文对象。
186 2
Flutter笔记:build方法、构建上下文BuildContext解析
Doodle Jump — 使用Flutter&Flame开发游戏真不错!
用Flutter&Flame开发游戏是一种什么体验?最近网上冲浪的时候,我偶然发现了一个国外的游戏网站,类似于国内的4399。在浏览时,我遇到了一款经典的小游戏:Doodle Jump...
|
3月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
334 0
|
10天前
|
移动开发 前端开发 JavaScript
移动端 Hybrid 开发:RN、Flutter与Webview的抉择与融合
【4月更文挑战第6天】本文对比了移动端Hybrid开发的三种主流方案——React Native (RN),Flutter和Webview。RN基于JavaScript,适合React熟练的团队,适用于性能要求高、跨平台的中大型应用。Flutter,使用Dart语言,以其高性能和自定义UI适用于追求极致体验的项目。Webview适合快速移植Web应用至移动端,开发成本低但性能受限。选择时要考虑项目规模、性能需求、团队技术栈等因素,实际应用中常采用混合策略,如RN/Flutter+Webview、原生模块集成等,以实现最佳开发效果和长期技术规划。
51 0
|
7月前
|
Dart 前端开发 API
Flutter笔记:手写一个简单的画板工具
1. 任务介绍Flutter笔记实现一个简单的画板工具作者目 录1. 任务介绍2. 知识点准备3. 代码实现与效果1. 任务介绍在本文中,我们将一起开发一个基本的Flutter画板应用,用户可以在画板上自由绘制,选择不同的颜色来绘制线条。这个画板应用将允许用户通过点击颜色选择按钮来选择画笔的颜色,并提供鼠标光标支持以增强用户体验。
153 0
|
3月前
|
JSON Dart 算法
Dart/Flutter工具模块:the_utils
Dart/Flutter工具模块:the_utils
47 0
|
3月前
|
设计模式 JavaScript 开发者
Flutter笔记:聊一聊Flutter中委托的设计方法
Flutter笔记:聊一聊Flutter中委托的设计方法
78 0
|
3月前
|
编解码 搜索推荐 Android开发
Flutter笔记:发布一个模块 scale_design - (移动端)设计师尺寸适配工具
Flutter笔记:发布一个模块 scale_design - (移动端)设计师尺寸适配工具
54 0
|
3月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
119 0