Flutter锦囊
文章平均质量分 86
Flutter是Google开发的移动应用开发框架,使用一套Dart代码就能构建高性能的iOS、Android等应用程序。Flutter与iOS、Android结合,会碰撞出怎样的火花呢!
何小有
不会编程的测试不是好玩家!
展开
-
Flutter游戏:启动时的欢迎页
本篇文章的内容需要在完成以下内容代码的基础上进行哦!《开始用Flutter做游戏吧》《Flutter游戏:万有引力定律》《Flutter游戏:垃圾里会生蚊子》《Flutter游戏:蚊子飞来飞去》加载更多资源首先下载接下来要用到的游戏资源文件,因为之前已经下载过一部分,所以下面讲一下这次添加了哪些内容。branding/title.png:游戏标题图片,建议7:4大小,即7x4图...原创 2019-07-22 23:51:29 · 2535 阅读 · 1 评论 -
Flutter游戏:蚊子飞来飞去
本文紧接上文《Flutter游戏:垃圾里会生蚊子》中完成的代码内容,建议先完成前面的代码呦。更多蚊子种类现在我们可以为蚊子添加更多种类,即为Fly类添加更多子类,这一步应该很快就可以完成,因为它们与components/mosquito-fly.dart文件基本相同,唯一的区别就是引用的图像文件名不一样。创建一个新子类文件components/drooler-fly.dart,声明一个Dro...原创 2019-07-15 10:33:13 · 1630 阅读 · 1 评论 -
Flutter游戏:垃圾里会生蚊子
加载游戏资源在开始下面的内容之前,最好的话是先把《开始用Flutter做游戏吧》过一遍,然后再完成《Flutter游戏:万有引力定律》里的游戏,因为下面的内容是在该游戏的基础上开发的。首先下载这个游戏要用到的游戏资源文件,然后在项目目录下建立assets/images目录,在该目录下再分别建立bg和flies目录,用于存放背景图片和组件图片。资源文件就位后,在pubspec.yaml文件里添...原创 2019-07-11 17:23:25 · 1525 阅读 · 1 评论 -
Flutter游戏:万有引力定律
搭游戏主循环要Flutter做一个游戏,我们需要先把一个简单的Flame游戏主循环脚手架给搭起来,这部分的内容在前面的《开始用Flutter做游戏吧》里面有详细的讲解哦!新建一个hit-game.dart文件,用以下代码建立游戏主循环,这个游戏主循环是我们游戏的核心,我们待会再扩充里面的内容。import 'dart:ui';import 'package:flame/game.dart...原创 2019-07-09 17:21:45 · 3247 阅读 · 2 评论 -
开始用Flutter做游戏吧
一点点基础游戏主循环(GameLoop)游戏主循环是游戏的核心,计算机一次又一次运行的一组指令,用通俗的话来说,如果游戏有生命,那么游戏主循环就是游戏的心跳。同时为了更好的理解游戏主循环,还需要引入一个计算机图像领域的知识——FPS,FPS全称是“Frames Per Second”,翻译为“每秒传输帧数”,意思就是,如果游戏以60FPS运行,则计算机每秒运行60次游戏主循环。总结一下就是,...原创 2019-07-03 12:12:16 · 12891 阅读 · 5 评论 -
Flutter:1个人,100天业余时间,能开发出什么?
项目介绍这个一个淘电商APP,同类型的APP有粉象生活、花生日记、好省、折800等等,基本上一个常规电商APP该有的,这个项目都有了。目前,该项目的完成度为80%,剩余的20%因为没有后台项目支持,所以无法完成。为啥要做这个东西勒,因为作为Flutter的早期研究者,有不少人都问过我,Flutter现在可不可以做商业项目?现有的原生项目接入Flutter靠不靠谱?Flutter会不会有很多功能...原创 2019-06-25 15:43:34 · 3130 阅读 · 5 评论 -
Flutter代码锦囊---淘口令复制弹窗
对于淘系电商APP或其他类似的APP而言,获取剪贴板上的淘口令,再解析出具体的商品详情,是整个APP的核心业务操作,就像下面图片展示的这样。下面我们就用Flutter实现这个功能,首先是前面一部分导入相关引用和常规页面布局代码,直接复制就好了。import 'package:flutter/material.dart';import 'package:flutter/cupertino.d...原创 2019-06-21 11:33:49 · 1786 阅读 · 4 评论 -
Flutter代码锦囊---摇一摇
现在很多APP里面的会出现让用户拿起手机摇一摇的场景,除了最常见的微信、QQ等社交APP里面的摇一摇,我们在把APP给测试人员测试的时候,也经常要添加上摇一摇弹窗切换环境的场景,比如下面的场景。所以,下面就来演示一下在Flutter上要怎么加上监听手机“摇一摇”并进行后续的操作逻辑。首先,我们要使用Flutter官方开发的传感器(sensors)插件,在pub spec.yaml目录下添加下...原创 2019-06-20 19:49:32 · 1725 阅读 · 0 评论 -
Flutter代码锦囊---自定义曲线裁剪
在实际开发中,很多APP里面都会有一些布局需要用到曲线,而不是直线,下面举两个例子,一个是京东APP的页面,一个是淘宝APP的页面,它们都用到了曲线。在Flutter中可以怎么实现这个效果呢,有一个简单的方法,也有一个复杂的方法。首先简单的方法是什么呢?让UI给一张PNG图片文件,直接贴上去。那复杂的方法又是啥嘞?自定义一个曲线裁剪画布,用来裁剪组件,这篇文章讲的就是这个方法。下面我们就...原创 2019-05-07 20:59:42 · 2202 阅读 · 1 评论 -
Flutter代码锦囊---魔改进度条
Flutter框架提供了Material Design风格的线性进度条(LinearProgressIndicator)组件,就是下面的样子,方方正正的,一点也不圆润。但是很多APP的设计都按照Material Design风格来玩的,各种各样的都有,我们选择最常见的一种来看一下,下面是“淘宝APP->淘抢购”页面里面的进度条,还是带动画的。如果直接用线性进度条(LinearProg...原创 2019-05-07 14:17:01 · 2446 阅读 · 2 评论 -
Flutter代码锦囊---集中管理路由与导航
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中、灵活的方式去管理项目中所有页面的路由与导航。通常我们是使用主页(home)属性设置应用程序的默认路由,即Navigator.defaultRouteName或/路由上的组件。除非指定了初始路由(initialRoute)属性,否则这是在应用程序正常启动时首先显示的路由。如果无法显示初始路由(initia...原创 2019-04-23 16:40:08 · 857 阅读 · 1 评论 -
Flutter代码锦囊---切换时页面保持状态
一个正常的Flutter项目中,通过底部导航栏(BottomNavigationBar)或者标签栏(TabBar)组件来切换页面内容,是很正常的操作。但是大家是否有发现,每次导航栏或标签栏切换页面时,之前的页面就被清理了。比如,第一个页面的列表视图(ListView)已经滑动到底部,切换到第二个页面以后再回来,第一个页面的列表又回到了顶部。出现上面问题的原因是,页面的状态(State)没有被保留...原创 2019-04-23 14:13:15 · 3464 阅读 · 0 评论 -
Flutter代码锦囊---根据环境选择URL地址
现在要给公司开发一个内部使用的APP,但是因为是小公司,没有多余的服务器资源,只能拿公司的主机当服务器,也只能在通过映射实现外网访问。所以呀,很蛋疼,只能想办法判断用户是在内网使用APP,还是在外网使用APP,然后根据环境选择URL请求的IP地址。首先是新建一个dart文件,把Flutter应用和页面的架子搭起来,然后运行调试,确认应用可以正常跑起来。import 'dart:async';...原创 2019-03-11 17:39:11 · 1813 阅读 · 0 评论 -
Flutter布局锦囊---绑定手机页
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“顶部导航栏”,标题+取消按钮+跳过按钮的应用栏。“手机号输入框”,用于获取手机号码的圆角边框输入字段。“验证码输入框”,用于获取验证码的圆角边框输入字段,还包括获取验证码的按钮。“提交按钮”,在满足条件后让用户点击的提交按钮。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“顶部导航栏”下面的代码导入了一堆东...原创 2019-01-27 16:51:10 · 1296 阅读 · 1 评论 -
Flutter布局锦囊---圆框的表单字段
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“黑色圆角边框”,因为文本字段(TextField)组件的没有符合需求的样式,所以要自己做一个边框。“文本输入框”,去掉文本字段(TextField)组件默认样式的文本输入框。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“黑色圆角边框”通过容器(Container)组件的边界(border)属性做出一个矩形的边...原创 2019-01-24 20:27:07 · 1214 阅读 · 1 评论 -
Flutter布局锦囊---完善信息页
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“用户昵称输入”,获取用户输入的昵称信息。“用户头像选取”,获取用户选取作为头像的图片。“用户性别选择”,获取用户选择的性别信息。“提交按钮”,提交用户的信息。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“用户昵称输入”先通过脚手架(Scaffold)组件、安全区(SafeArea)组件和列表视图(List...原创 2019-01-23 22:07:05 · 1303 阅读 · 1 评论 -
Flutter布局锦囊---男女性别单选
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“点击操作”,感应用户选择性别的区域。“选择性别男”,性别男的选择区域,点击会更新图片和样式。“选择性别女”,性别女的选择区域,点击会更新图片和样式。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“点击操作”首先为性别男和性别女的图文内容搭一个可以点击的区域,等一下把它们俩放在这个区域里来,同时定义一个性别选择...原创 2019-01-17 11:46:45 · 3313 阅读 · 1 评论 -
Flutter布局锦囊---有背景图的头像选择
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“获取相册图片”,Flutter团队开发的图片选择器(image_picker)插件,从手机相册中获取图片。“默认头像图片”,新用户默认的头像图片,右下方通过一个小图片提醒用户可以点击设置头像。“圆形头像图片”,经过简单裁剪后的圆形头像图片,上面覆盖一层边框背景图片。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现...原创 2019-01-15 15:09:56 · 2340 阅读 · 1 评论 -
Flutter布局锦囊---带输入字段的应用栏
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“堆栈容器”,使用大小框(SizedBox)和堆栈(Stack)组件搞的容器,用于实现层次结构。“下层的导航”,放在堆栈容器下层,由图标按钮(IconButton)和图片(Image)组件实现的导航。“上层的输入区域”,经过简单定制后的文本字段(TextField)组件。然后就可以开始进行编码了。第1步:绘制组件树第2步:...原创 2019-01-12 18:42:21 · 848 阅读 · 0 评论 -
Flutter布局锦囊---简单的应用栏
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“公共应用栏”,可以给应用程序中的大部分页面使用的通用组件。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“公共应用栏”使用Flutter的应用栏(AppBar)组件,你可以实现一些简单定制效果。应用栏(AppBar)组件亮度(brightness)属性可以控制系统状态栏的字体颜色,比如,如果你把背景颜色(back...原创 2019-01-11 10:57:34 · 911 阅读 · 1 评论 -
Flutter布局锦囊---屏幕顶部提醒
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“提醒页面”,显示在屏幕上方的文字提醒页面,不会覆盖原路由页面。“路由导航”,使用Flutter的路由与导航组件来推(push)提醒页面。“倒计时抛”,使用Flutter的倒计时组件自动抛(pop)提醒页面。“过渡动画”,为推(push)和抛(pop)提醒页面的过程添加动画效果。然后就可以开始进行编码了。第1步:绘制组件树...原创 2019-01-07 22:13:59 · 5745 阅读 · 5 评论 -
Flutter布局锦囊---手机号登录页
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“运营位”,使用自定义的旋转木马滑块组件实现可以滚动的运营位。“登录表单”,使用自定义的登录表单组件实现手机号、验证码登录的表单。“用户协议”,使用自定义的用户协议组件实现用户协议的声明文本。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“运营位”先把需要引用的自定义组件一次引入,carousel_with_i...原创 2019-01-05 01:02:47 · 4335 阅读 · 2 评论 -
Flutter布局锦囊---用户协议声明
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“用户协议声明”,使用文本(Text)组件和文字跨度(TextSpan)组件组成的用户协议声明文本。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“用户协议声明”因为Flutter的嵌套结构非常复杂,所以你必须将所有可以重复的东西都提取出来,增强代码可读性。import 'package:flutter/mate...原创 2019-01-04 23:16:08 · 3960 阅读 · 2 评论 -
Flutter布局锦囊---蜡笔画的表单
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“手机号输入框”,使用自定义的登录表单字段组件实现的输入框。“验证码输入框”,使用自定义的登录表单验证码组件和登录表单字段组件组合实现的输入框。“登录按钮”,使用自定义的涂鸦按钮组件实现的按钮。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“手机号输入框”首先引入需要的自定义组件,login_form_fiel...原创 2019-01-04 22:15:52 · 1827 阅读 · 0 评论 -
Flutter布局锦囊---带彩条的文本字段
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“文本输入框”,使用文本字段(TextField)组件实现的输入框。“状态指示条”,使用容器(Container)组件实现带颜色的长方形。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“文本输入框”Flutter的布局代码嵌套非常深,为了代码的可读性,你可以先把一部分没有依赖的纯样式代码提取出来。import ...原创 2019-01-03 19:29:49 · 1619 阅读 · 0 评论 -
Flutter布局锦囊---涂鸦风格按钮
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“可点击框”,使用堆栈(Stack)组件布局的可点击区域。“底部矩形”,用来衬托“主要矩形”,以形成立体效果的矩形。“主要矩形”,按钮主体部分,通过调整上下位置来模拟按压效果。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“可点击框”通过手势探测器(GestureDetector)组件,你可以通过检测多种手势并...原创 2019-01-03 15:34:32 · 1706 阅读 · 0 评论 -
Flutter布局锦囊---验证码倒计时
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“获取验证码按钮”,可以通过点击按钮来获取验证码。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“获取验证码按钮”获取验证码的按钮需要显示在文本字段的上面,所以你可以直接使用Flutter的墨水瓶(InkWell)组件,一个可以响应触摸的矩形区域。然后通过dart:async库的计时器(Timer)类,使其控制墨水...原创 2019-01-02 14:11:53 · 7055 阅读 · 4 评论 -
Flutter布局锦囊---轮播图片与滑块
设计给的效果如下:拿到设计后,先把整体拆分成几个部分:“运营位”,可以通过左右滑动来切换图片。“进度条”,显示“运营位”当前位置的进度条。然后就可以开始进行编码了。第1步:绘制组件树第2步:实现“运营位”Flutter没有直接提供可以通过左右滑动来切换图片的组件,不过你可以在Flutter第三方包和插件仓库中找到解决方案,carousel_slider包是一个轮播(Carou...原创 2018-12-27 18:31:07 · 4704 阅读 · 1 评论 -
Flutter框架
在Flutter框架出现之前,主要有以下几个移动App跨平台开发框架:Cordova、Ionic、AppCan、Dcloud、APICloud、React Native。虽然有那么多框架,但是它们的原理都是使用HTML、CSS和JavaScript进行移动App开发,多平台共用一套代码,提供了丰富的主流UI库、用来调用原生API的JavaScript API包装器,同时还提供App打包、发布的工具...原创 2018-05-07 18:46:36 · 4125 阅读 · 2 评论 -
自定义Flutter控件
在Flutter开发中,我们会经常和各种控件打交道,它们也能满足业务的大部分需求。但是,我们往往需要将多个控件组合起来,才能实现业务的需求,而且这样写出来的代码维护起来非常困难。因此,我们可以把那些需要多个控件组合才能实现的功能自定义化,成为一个自定义控件,易于维护。无状态控件Flutter框架给我们提供了StatelessWidget和StatefulWidget两个抽象类,用于原创 2018-01-31 14:48:33 · 6110 阅读 · 0 评论 -
基本的Material Design布局结构
Flutter应用的用户界面是由布局控件(不可见的)和展示控件(可见的)协同完成的,布局控件就像是建筑里的框架,而展示控件则相当于建筑里的砖瓦。展示控件按照布局控件的要求依次排列,就组成了用户所看见的界面。在Flutter应用中,最基础的布局结构是脚手架(Scaffold),例如:import 'package:flutter/material.dart';void main(){ runAp原创 2017-12-20 10:01:37 · 1337 阅读 · 0 评论 -
使用Material Design的Flutter应用
使用Flutter框架必须要导入flutter/material.dart包,然后在main()函数中调用material包的runApp函数,这样就可以启动一个Flutter应用。访问《Flutter框架基础》了解更多内容。import 'package:flutter/material.dart';void main() { return runApp(Widget app);}那么如何原创 2017-12-13 23:25:34 · 5125 阅读 · 0 评论 -
Flutter框架基础
Flutter应用程序是由一些零散且有关联的控件组成的,那么控件是什么?控件,就是你在屏幕上看到那些东西。例如,一间教室相当于一个屏幕,它里面可以放椅子,也可以放桌子,教室就是一个控件。在这个教室里,放一张桌子,在上面写上“Hello World”这个经典名句,桌子就是一个控件,它上面写有文字。这相当于你在屏幕上放一个Text控件,然后在Text控件的data属性中写上“Hello World”这句原创 2017-12-05 18:28:06 · 3310 阅读 · 1 评论 -
Material Design设计技巧
很多人以为做个应用程序很简单,所以描述需求的时候及其模糊,自己都不知道要做的东西的具体功能,结果项目做出来跟自己想的完全不一样。项目上线的时候漏洞百出,反复修修补补解决不了问题,后面直接报废重做。在开始开发一个新应用时,最麻烦的就是需求改来改去。所以首先需要列出要实现功能的表单,然后连续划掉不重要的项目,直到表单中只剩下核心功能,这样能确保应用的特征和功能点。新应用可以在后续版本中添加其他功能,但是原创 2017-11-30 00:48:45 · 965 阅读 · 0 评论 -
Material Design基础
Material Design,中文名:材质设计,是由Google推出的全新设计语言,旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的感官体验。Flutter与Material Design的关系密切,Flutter框架中有一个Material Design风格的Widget库,而且这个Widget库也是Flutter的重要组成部分。但是Material Design不仅仅应用在Flutt原创 2017-11-20 11:44:14 · 2155 阅读 · 1 评论