Flutter 获取网络数据及渲染列表
摘要:还是通过Dio包调用远程接口获取数据,这里返回值为一个Future,这个对象支持一个等待回掉方法then。 示例代码如下: 效果图:
阅读全文
posted @
2019-07-31 09:53
JoeYoung
阅读(4130)
推荐(0) 编辑
Flutter 移动端屏幕适配方案和制作
摘要:flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出。 安装依赖: 安装之前请查看最新版本 在每个使用的地方导入包: 属性 初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”
阅读全文
posted @
2019-07-29 15:52
JoeYoung
阅读(5628)
推荐(0) 编辑
Flutter Swiper制作轮播效果
摘要:1、引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter_swiper的GitHub地址:https://github.com/best-flutter/flutter_swiper 了解flutter
阅读全文
posted @
2019-07-29 09:53
JoeYoung
阅读(5521)
推荐(0) 编辑
Flutter 拖拽控件Draggable
摘要:Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单。下面作一个拖拽的案例。 Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片。用起来非常的灵活。 参数说明: data: 是要传递的参
阅读全文
posted @
2019-07-26 10:05
JoeYoung
阅读(3210)
推荐(0) 编辑
Flutter 轻量级的ToolTip控件
摘要:轻提示的效果在应用中是少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip。 轻量级操作提示 其实Flutter中有很多提示控件,比如Dialog、Snackbar和BottomSheet这些操作都是比较重量级的,存在屏幕上的时间较长或者会直接打断用户的操作。 当然并不是说这些控
阅读全文
posted @
2019-07-25 16:13
JoeYoung
阅读(1330)
推荐(0) 编辑
Flutter 右滑返回上一页
摘要:在苹果手机上有一种才操作叫做右滑返回上一页,一些不错的应用都有类似的操作,随着苹果手机越来越多,这种操作开始普遍开来,在安卓手机上也开始使用。 Cupertino UI 其实早都知道Flutter有两套UI模板,一套是material,另一套就是Cupertino。Cupertino主要针对的的就是
阅读全文
posted @
2019-07-25 10:58
JoeYoung
阅读(3775)
推荐(0) 编辑
Flutter参数的传递和接收
摘要:上次只写了方法和参数,这次写了完整的示例,页面间参数的传递和接收的示例。 1、参数传递 用在程序上解释就是比如你进入一个商品选择列表,当你想选择一个商品的具体信息的时候,你就要传递商品编号,详细页面接受到编号后,显示出不同的内容。 声明数据结构类 Dart中可以使用类来抽象一个数据,比如我们模仿一个
阅读全文
posted @
2019-07-25 09:50
JoeYoung
阅读(18928)
推荐(1) 编辑
Flutter的闪屏动画案例AnimationController
摘要:打开一个APP,经常会看到精美的启动页,这种启动页也称为闪屏动画。它是从无到有有一个透明度的渐变动画的。图像展示完事后,才跳转到用户可操作的页面。 AnimationController AnimationController是Animation的一个子类,它可以控制Animation, 也就是说它
阅读全文
posted @
2019-07-24 10:06
JoeYoung
阅读(1673)
推荐(0) 编辑
Flutter 贝塞尔曲线切割
摘要:现在人们对于网站的美感要求是越来越高了,所以很多布局需要优美的曲线设计。当然最简单的办法是作一个PNG的透明图片,然后外边放一个Container.但其内容如果本身就不是图片,只是容器,这种放入图片的做法会让包体变大。其实我们完全可以使用贝塞尔曲线进行切割。 ClipPath 路径裁切控件 clip
阅读全文
posted @
2019-07-24 09:21
JoeYoung
阅读(4464)
推荐(0) 编辑
Flutter磨砂玻璃效果制作
摘要:Flutter的Fliter Widget 也是非常强大的,它可以制作出你想要的神奇滤镜效果。下面制作一个毛玻璃效果。 这个和以前的写法都一样,所以就直接贴代码了。 这个代码嵌套很多,所以一定要注意你的代码层次,容易出错的地方就是嵌套错误。这个效果尽量少用,因为测试了一下,它对系统的消耗还是比较大的
阅读全文
posted @
2019-07-23 16:51
JoeYoung
阅读(2494)
推荐(0) 编辑
Flutter酷炫的路由动画效果
摘要:现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画。 其实路由动画的原理很简单,就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法。 不过这个方法还是有很多写法的,通过写
阅读全文
posted @
2019-07-23 11:32
JoeYoung
阅读(5893)
推荐(1) 编辑
Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏
摘要:FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触。 一般来说,它是一个圆形,中间放着图标,会优先显示在其他Widget的前面。一般可以实现浮动按钮,也可以实现类似闲鱼 app
阅读全文
posted @
2019-07-23 09:33
JoeYoung
阅读(8149)
推荐(1) 编辑
Flutter之ExpansionTile组件
摘要:ExpansionTile组件 ExpansionTile Widget就是一个可以展开闭合的组件,常用的属性有如下几个。 title:闭合时显示的标题,这个部分经常使用Text Widget。 leading:标题左侧图标,多是用来修饰,让界面显得美观。 backgroundColor: 展开时的
阅读全文
posted @
2019-07-22 14:55
JoeYoung
阅读(3995)
推荐(0) 编辑
Flutter 实现简单搜索功能
摘要:先建立一个主文件,继承StatelessWidget,然后在home属性中加入SearchBarDemo,这是一个自定义的Widget,主要代码都在这个文件中。 然后是搜索页面,里面包含数据及搜索功能。 工作中这些数据是后台传递给我们,或者写成配置文件的,这里我们就以List的方式代替了。我们在这个
阅读全文
posted @
2019-07-22 11:23
JoeYoung
阅读(9430)
推荐(0) 编辑
Flutter Window环境运行(VSCode + 单独运行Android 虚拟机)
摘要:官网以及很多网上文章的开发都是基于Android ,因为它能创建不同类型移动设备虚拟机。但个人始终觉得它太庞大,启动慢耗资源,但我们使用Flutter又离不开虚拟机。 经过实践,现在能成功的单独启动移动设备虚拟机使用VSCODE进行开发了。 1、各种安装和配置 按着官网文档设置环境变量,安装JDK,
阅读全文
posted @
2019-07-22 09:19
JoeYoung
阅读(3657)
推荐(0) 编辑
Flutter之切换导航TabBar组件
摘要:TabController 这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等。 TabController的创建有两种形式,一种是使用系统的DefaultTabController,第二种是自己定义一个TabController实现SingleTickerPro
阅读全文
posted @
2019-07-19 16:05
JoeYoung
阅读(4114)
推荐(0) 编辑
Flutter之Dio引入和简单的Get/Post请求
摘要:先在pubspec.yaml中引入Dio包如图所示 认识Dio库:dio是一个dart的 http请求通用库,目前也是大陆使用最广泛的库,国人开发,完全开源。 flutter的插件包管理:学了引入dio包,并简单的学习了pubspec.yaml的结构和编写注意事项。 get请求的编写:我们以一个充满
阅读全文
posted @
2019-07-19 14:49
JoeYoung
阅读(14865)
推荐(1) 编辑
Flutter 路由 页面间跳转和传参 返回
摘要:Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部。当然,这些pop方法会从堆栈中删除该屏幕。 在push的时候使用自定义方法构建一个路由 这种方式可以传递
阅读全文
posted @
2019-07-18 17:10
JoeYoung
阅读(5438)
推荐(0) 编辑
Flutter 圆形/圆角头像图片
摘要:图片显示 1、本地图片 Image.asset加载项目资源包的图片 Image.file加载手机内置或外置存储的图片 2、网络图片 Image.network无本地缓存 FadeInImage.assetNetwork淡入效果,无本地缓存 CachedNetworkImage第三方控件,有本地缓存和
阅读全文
posted @
2019-07-17 09:51
JoeYoung
阅读(4591)
推荐(0) 编辑
Flutter 底部的renderflex溢出
摘要:一开始直接使用Scaffold布局,body:new Column 然后模拟器会提示捕获异常: 然后百度了一下Flutter的溢出问题,发现解决办法是使用SingleChildScrollView包装一下。 比如原来代码是: 改为: 补充: SingleChildScrollView 嵌套 List
阅读全文
posted @
2019-07-17 09:27
JoeYoung
阅读(920)
推荐(0) 编辑
Flutter安卓客户端打包
摘要:想要安装到手机上,必须要进行打包,因为没有苹果手机,所以只能打包Android客户端的apk。 检查 App的配置 查看默认应用程序清单文件(位于/android/app/src/main/中的AndroidManifest.xml文件),并验证这些值是否正确,特别是: android:label
阅读全文
posted @
2019-07-17 08:56
JoeYoung
阅读(419)
推荐(0) 编辑
Flutter 底部导航栏bottomNavigationBar
摘要:实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变。 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太多,会比较拥挤,影响用户体验,实际上目前市面上大多数APP的底部导航标签都控制在4到5个左右。既美观
阅读全文
posted @
2019-07-12 16:11
JoeYoung
阅读(2897)
推荐(0) 编辑
Flutter中通过循环渲染组件
摘要:class ContactsState extends State{ List formList; initState() { super.initState(); formList = [ {"icon": Icon(Icons.alarm),"title": '车牌号'}, {"icon": Icon(...
阅读全文
posted @
2019-07-12 10:01
JoeYoung
阅读(4611)
推荐(0) 编辑
Flutter Widget框架概述
摘要:Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时,widget会重新构建UI,Flutter会对比前后变化的不同, 以确定
阅读全文
posted @
2019-07-11 09:17
JoeYoung
阅读(247)
推荐(0) 编辑
Dart 语言简述
摘要:Dart是一种“结构化的web编程”语言,Dart编程语言在所有现代浏览器和环境中提供高性能。Dart是谷歌开发的计算机编程语言,后来被ECMA认定为标准。 Dart重要的概念: 1、所有的东西都是对象。无论是变量、数字、函数等都是对象。所有的对象都是实例。所有的对象都继承自内置的Object类。这
阅读全文
posted @
2019-07-08 16:30
JoeYoung
阅读(2720)
推荐(1) 编辑
flutter 入口文件配置路由+加载页面
摘要:入口程序 所有的应用都有一个入口程序,通常是main函数引导进入应用程序,入口程序主要做一下几个方面的处理: 1、自定义主题:通过自定义将主题定义为XX风格,定义导航栏、弹出菜单等。 2、定义路由表:为整个应用程序作导航使用。例如:整个应用分三块需要路由,分别是:应用程序app、好友动态frends
阅读全文
posted @
2019-07-08 09:37
JoeYoung
阅读(3961)
推荐(0) 编辑
Flutter 常用组件
摘要:无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的。 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化。实现一个StatefulWidget至少需要两个类:一个StatefulWidget类,一个State类。
阅读全文
posted @
2019-07-04 17:12
JoeYoung
阅读(544)
推荐(0) 编辑
Flutter的布局方法
摘要:重点是什么? Widgets 是用于构建UI的类. Widgets 用于布局和UI元素. 通过简单的widget来构建复杂的widget Flutter布局机制的核心就是widget。在Flutter中,几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到
阅读全文
posted @
2019-07-04 10:37
JoeYoung
阅读(4046)
推荐(0) 编辑
在Flutter中构建布局
摘要:这是在Flutter中构建布局的指南。首先,您将构建以下屏幕截图的布局。然后回过头, 本指南将解释Flutter的布局方法,并说明如何在屏幕上放置一个widget。在讨论如何水平和垂直放置widget之后,会介绍一些最常见的布局widget: 如果你想对布局机制有一个“全貌”的理解,请参考Flutt
阅读全文
posted @
2019-07-03 16:38
JoeYoung
阅读(1204)
推荐(0) 编辑