
Flutter进阶
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
一醉南柯
这个作者很懒,什么都没留下…
展开
-
Flutter进阶实战 4-20 不规则底部工具栏BottomAppBar 制作(2)
前言:前面博客做了一个不规则底部工具栏BottomAppBar的界面,这里继续进行完善,实现按钮的点击事件。实现效果:实现过程:1、StatefulWidget子页面的制作前面使用的子页面继承与StatelessWidget(不可变控件),所以很麻烦的写了4个页面,其实完全可以写一个继承于StatefulWidget的控件,进行动态创建。新建一个each_view.dart...原创 2019-07-07 21:32:00 · 808 阅读 · 0 评论 -
强大的Flutter Http请求开源库-dio
DIO是扑网中文English开源的一个强大的飞镖的Http请求库,支持RESTful API,因此FORMDATA,拦截器,请求取消,饼干管理,文件上传/下载,超时等...文档语言:English | 中文简体DIO图片一个强大的Dart Http请求库,支持Restful API,FormData,拦截器,请求取消,Cookie管理,文件上传/下载,超时等...添加依赖...转载 2019-08-25 20:25:22 · 992 阅读 · 0 评论 -
Flutter进阶实战 18-20 可拖拽Draggable控件实例
前言:Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单。这里就学习一下Flutter拖拽控件,并根据学到的知识作一个拖拽案例。实现效果:知识点:一、Draggable WidgetDraggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片。用起来非常的灵活。参数说明:data: 是要传递的参...原创 2019-08-15 23:07:51 · 1254 阅读 · 0 评论 -
Flutter进阶实战 14-20 展开闭合列表ExpansionPanelList案例
前言: 前面介绍的只是一个单个的展开闭合组件,你当然可以把这个组件作为List元素,组成一个数组,形成列表。不过Flutter也很贴心的为提供了一个ExpansionPanelList Widget,它可以实现展开闭合的列表功能。需要注意的是这个列表必须放在可滑动组件中使用,否则会报错。实现效果:知识点:一、ExpansionPanelList 常用属性expa...原创 2019-08-11 21:14:43 · 6186 阅读 · 0 评论 -
Flutter进阶实战 17-20 轻提示ToolTip控件实例
前言:轻提示的效果在应用中式少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip。实现效果:知识点:轻量级操作提示其实Flutter中有很多提示控件,比如Dialog、Snackbar和BottomSheet这些操作都是比较重量级的,存在屏幕上的时间较长或者会直接打断用户的操作。当然我并不是说这些控件不好,根据需求的不同,要有多种选择,所以才会给大家...原创 2019-08-14 22:17:57 · 2202 阅读 · 2 评论 -
Flutter进阶实战 16-20 右滑返回上一页CupertinoPageRoute案例
前言:在苹果手机上有一种才操作叫做右滑返回上一页,一些不错的应用都有类似的操作,随着苹果手机越来越多,这种操作开始普遍开来,在安卓手机上也开始使用。这里实现这种右滑返回上一页的操作。实现效果:知识点:一、Cupertino UI其实早都知道Flutter有两套UI模板,一套是material,另一套就是Cupertino。Cupertino主要针对的的就是IOS系统的UI,...原创 2019-08-13 22:25:11 · 4291 阅读 · 0 评论 -
Flutter进阶实战 13-20 展开闭合ExpansionTile组件案例
前言:手机的屏幕本身就很小,所以要合理利用空间,把主要的元素展示出来,次要或者不重要的元素等用户向看的时候再给用户展示。这类操作最常见的交互就是展开和闭合了。这里我们主要学习一下ExpansionTile组件的使用。实现效果:知识点:ExpansionTile组件ExpansionTile Widget就是一个可以展开闭合的组件,常用的属性有如下几个。title:闭合时显示...原创 2019-08-08 22:32:39 · 4842 阅读 · 2 评论 -
Flutter进阶实战 10&11-20 保持页面状态
网址原创 2019-08-05 21:50:14 · 159 阅读 · 0 评论 -
Flutter进阶实战 12-20 流式布局 模拟添加照片效果
前言:这里写一个模拟添加多张照片的小实例,进而学习一下流式布局!实现效果:知识点:一、mediaQuery 媒体查询使用meidaQuery可以很容易的得到屏幕的宽和高,得到宽和高的代码如下:final width = MediaQuery.of(context).size.width;final height = MediaQuery.of(context).size...原创 2019-08-07 22:08:51 · 389 阅读 · 0 评论 -
Flutter进阶实战 7-20 毛玻璃效果制作
前言:Flutter的Fliter Widget 也是非常强大的,它可以制作出你想要的神奇滤镜效果。这里我们就以实战的方式,制作一个毛玻璃效果,通过实例来学习Fitler 的用法。效果如下:这位老师你认识吗?实现过程:一、main.dart文件编写import 'package:flutter/material.dart';import 'Frosted_class.dar...原创 2019-07-22 14:24:51 · 2191 阅读 · 0 评论 -
Flutter进阶实战 8&9-20 保持页面状态
前言:在工作中切换页面时,再切换回来,时要求页面状态不发生改变的。这能给APP浏览者最好的体验,机会所有的APP都有这个需求,属于一个大众需求。为了能看出是保持状态的,我们作一个按钮,然后点一下加一。实现效果:一、With 关键字的使用with是dart的关键字,意思是混入的意思,就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类, 避免多重继承导致的问题。比如下面的...原创 2019-07-24 22:20:40 · 656 阅读 · 0 评论 -
Flutter进阶实战 6-20 酷炫的路由动画-2
前言:前面在路由动画1中我们介绍了“渐隐渐现过度动画”的使用,这里再介绍三种动画以及叠加动画的使用!一、缩放路由动画return ScaleTransition( scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation( parent:animation1, curve: Curves.fastOutSlowIn...原创 2019-07-14 21:53:34 · 352 阅读 · 0 评论 -
Flutter进阶实战 3-20 不规则底部工具栏BottomAppBar 制作(1)
前言:大部分的底部导航都是中规中矩的,但有些时候也需要突出个性,比如在中间部位增加一个突出的按钮。实现界面效果:实现过程:1、自定义主题样本Flutter支持自定义主题,如果使用自定义主题,设置的内容项是非常多的,这可能让初学者头疼,Flutter贴心的为给我们准备了主题样本。primarySwatch :现在支持18种主题样本了。具体代码如下:theme: ...原创 2019-07-04 21:10:31 · 1638 阅读 · 0 评论 -
Flutter进阶实战 1&2-20 BottomNavigationBar底部导航栏制作
前言:工作中最简单的一个APP也要具备一个功能,就是底部导航栏,你很难找出没有底部导航栏的应用。实现的效果:编写过程如下:1、主入口文件main.dart的编写 首先我们先写一个主入口文件,这个文件只是简单的APP通用结构,最主要的是要引入自定义的BottomNavigationWidget组件。import 'package:flutter/material...原创 2019-07-04 19:40:00 · 462 阅读 · 0 评论 -
Flutter进阶实战 5-20 酷炫的路由动画-1
前言:现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫呢!下面介绍更炫酷的路由。运行效果:其实路由动画的原理很简单,就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法。不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同。实现过程:1、主入口方法先编写...原创 2019-07-12 21:58:20 · 712 阅读 · 0 评论 -
Flutter进阶实战 15-20 打开应用的闪屏动画案例
前言:打开一个APP,经常会看到精美的启动页,这种启动页也称为闪屏动画。它是从无到有有一个透明度的渐变动画的。图像展示完事后,才跳转到用户可操作的页面。这里学习一下闪屏动画的制作。实现效果:知识点:一、AnimationControllerAnimationController是Animation的一个子类,它可以控制Animation, 也就是说它是来控制动画的,比如说...原创 2019-08-12 22:27:22 · 1423 阅读 · 0 评论