分类：flutter

2021
09-14

Flutter如何完成路由拦截,实现权限管理

目录相关文章fluro路由拦截思路定义路由时拦截跳转时拦截之前几篇介绍了fluro的路由管理和转场动画，本篇介绍如何完成路由拦截，进而实现权限管理。“此路是我开，此树是我栽。若是没权限，403到来！”相关文章若想了解flutter的路由相关篇章，请查阅下面的篇章：//www.jb51.net/article/215167.htm//www.jb51.net/article/214856.htm//www.jb51.net/article/215564.htm//www.jb51.net/article/215549.htm//www.jb51.net/arti... 继续阅读 >
2021
09-14

Flutter 用自定义转场动画实现页面切换

目录旋转转场动画缩放转场动画自定义转场动画运行效果fluro转场动画源码在使用自定义转场动画前，先扒一扒fluro的源码，通过源码可以发现这么一个标准的转场方法：RouteTransitionsBuilder_standardTransitionsBuilder(TransitionType?transitionType){return(BuildContextcontext,Animation<double>animation,Animation<double>secondaryAnimation,Widgetchild){if(transitionType=... 继续阅读 >
2021
09-10

Flutter 生成图片保存至相册的示例

目录基本思路添加依赖实现代码遇到一个需求，需要用Flutter生成图片，最终实现的效果如下：基本思路使用Canvas绘制图片中各元素，然后使用PictureRecorder进行记录生成。添加依赖qr_flutter:^3.1.0image_gallery_saver:^1.2.2fluttertoast:^4.0.0实现代码import'dart:ui'asui;import'dart:ui';import'package:flutter/material.dart';import'package:flutter_platforms/generator/qrcode_generator.dart';cla... 继续阅读 >
2021
09-09

Flutter开发中的路由参数处理

目录Navigator的push和pop方法代码实现最终效果Navigator的push和pop方法Navigator导航器的push和pop方法可以携带参数在页面间传递，其他变形的方法也一样。pushNamed方法原型如下：Future<T?>pushNamed<TextendsObject?>(StringrouteName,{Object?arguments,}){returnpush<T>(_routeNamed<T>(routeName,arguments:arguments)!);}除了routeName的命名路由以外，还有个可选参数argume... 继续阅读 >
2021
08-31

Flutter app页面路由以及路由拦截的实现

目录为什么要使用路由Flutter路由介绍页面结构与逻辑实现关键代码页面路由跳转为什么要使用路由在之前我们的代码中，页面跳转使用的代码如下所示：Navigator.of(context).push(MaterialPageRoute(builder:(context)=>LoginPage()),);在开发过程中，随着页面的增加，如果继续使用这种方式会有如下缺陷：代码耦合严重：涉及到页面跳转的地方就需要插入页面的构造函数，意味着需要知道其他页面的构建方式。不易维护：一... 继续阅读 >
2021
08-31

Flutter 底部弹窗如何实现多项选择

目录多选和单选的不同之处实现方式界面变更代码实现总结多选和单选的不同之处单选的时候，选中一个就可以直接把结果返回，因此本身底部弹窗无需状态管理。但到多选的时候，需要知道当前选中的选项，有选项被点击的时候需要存储下来，当再次被点击的时候要清空这个选项，同时界面还需要同步更新，因此就涉及到状态管理了。实现方式在Flutter中提供了一个StatefulBuilder的类，提供了一个builder方法构建有状态组件，并且提供了... 继续阅读 >
2021
08-31

Flutter 利用CustomScrollView实现滑动效果

目录CustomScrollView简介改造原代码让导航栏更有趣改造后的代码其他效果总结我们在之前的文章中//www.jb51.net/article/213709.htm 使用了ListView将几个GridView组合在一起实现滑动效果，今天利用CustomScrollView改造一下代码CustomScrollView简介CustomScrollView的常用属性如下：slivers：最重要的属性，由多个SliverXX组件组成的数组，包括如SliverList（对应ListView），SliverGrid（对应GridView）等，... 继续阅读 >
2021
08-12

Flutter 底部弹窗ModelBottomSheet的使用示例

目录实现效果代码结构基本使用自定义底部弹窗总结实现效果最终实现效果如图片所示，分布演示了基础的，全屏的和自定义的底部弹窗形式。代码结构在消息页面message.dart中，使用Column组件构建了三个按钮，点击每个按钮调用不同的底部弹窗显示。这部分代码不展示，核心注意的方式是按钮的onPressed响应方法，需要使用async修饰，这是因为ModalBottomSheet的返回结果是一个Future对象，需要通过await来获取返回结果。o... 继续阅读 >
2021
08-08

Flutter 如何封装文本输入框组件

目录UI组件封装的考虑要点文本输入框接口定义代码实现组件使用踩坑记录总结UI组件封装的考虑要点封装一个UI组件，通常需要考虑下面这三个点：接口如何定义：即组件接收什么输入参数来控制组件的外观和行为；与业务分离：UI组件应当只负责界面，而不负责业务，具体的业务应当由业务层完成；简单易用：因为是UI组件，要尽可能地简单易用，方便使用者快速上手。文本输入框接口定义首先先看一下我们上一篇使用文... 继续阅读 >
2021
08-08

Flutter 开发一个登录页面

目录业务逻辑图片圆形裁剪圆形扁平按钮TextField文本框完整代码页面跳转总结业务逻辑为了演示登录跳转，在分类浏览先做了一个简单的按钮，点击跳转到登录页面。实际的App中，通常会是触发某些需要登录才能查看的操作后再跳转到登录界面。布局分析界面如上图所示，从界面上看，整体内容区域是居中的，内容的布局是一个简单的列式布局，包括了顶部的一个Logo（通常是App图标），再往下是两个文本输入框，最后是登录按钮。整体布... 继续阅读 >
2021
07-22

Flutter 仿微信支付界面

目录带装饰效果的ContainerRow行布局和Column列布局ListView列表组件GridView网格组件代码实现结语：左侧是微信支付的界面，右侧是开发完成后的效果，图标是从iconfont上下载的。首先介绍一下本篇涉及到的组件。带装饰效果的Container实际过程中我们经常会遇到一个容器需要额外的样式，例如圆角，背景色等。在Flutter中，对于各种容器都有一个decoration的属性，可以用于装饰容器。典型的用法有设置背景色、圆角、边框和... 继续阅读 >
2021
07-22

Flutter 使用cached_image_network优化图片加载体验

目录使用占位图使用进度加载指示效果在App中会经常遇到需要从后台拉取图片的场景，这一方面会给服务器带来网络带宽消耗，另一方面加载图片的等待过程也会影响用户体验。因此，往往会在App端对图片做缓存机制，以避免同一张图片反复发起请求。这个时候cached_image_network就派上用场了上一篇Flutter给列表增加下拉刷新和上滑加载更多功能，我们使用了列表，其中列表中有从网络下载图片。直接使用Flutter自带的Image.networ... 继续阅读 >
2021
07-17

Flutter 给列表增加下拉刷新和上滑加载更多功能

目录有状态组件异步async/await引入flutter_easyrefresh使用flutter_easyrefresh运行结果结语有状态组件当Flutter的页面需要动态更新数据的时候，就会涉及到UI组件需要根据数据变化更新，此时也就意味着组件有了“状态”。这就类似React的类组件和函数组件（只是后续React使用了勾子函数实现了函数组件也可以有状态）。在Flutter中，组件也分为无状态组件（StatelessWidget）和有状态组件（StatefulWidget），一般尽... 继续阅读 >
2021
07-09

Flutter实现图文并茂的列表

目录界面布局分析ListView简介编码实现用到的组件结语：界面布局分析本篇要实现的列表如上图所示。我们拿到界面设计稿之后，在UI开发工作第一件事就是考虑界面的元素和布局。以上面的界面为例，实际的界面元素包括了列表和列表元素，而列表元素是关键，列表元素包括了左边的一张图片，图片右侧的标题和查看次数（带前置图标）。列表的元素的布局如下图所示。纵向上，列表元素的布局高度由图片决定。图标和浏览数的高度固定，剩... 继续阅读 >
2021
07-09

Flutter通过Container实现时间轴效果

目录时间轴是前端UI经常用到的效果，先看下效果图:实现一、借助Container中decoration属性，设置左侧的border，可以实现时间轴高度随着item变化效果二、重写BorderDirectional中paint方法三、完整代码时间轴是前端UI经常用到的效果，先看下效果图:时间轴的特点1、在列表中的高度不确定，高度取决于右侧item的高度2、时间轴通常在第一个item中的样式和其他item中不同。实现一、借助Container中decoration属性... 继续阅读 >
2021
07-09

flutter实现带删除动画的listview功能

flutter实现带删除动画的listview功能 个人开发app中，需要开发一个带有删除功能的ListView效果如下需求动画分析列表可以滚动用listView，有两个动画，第一个动画是透明度变化，第二个是size变化是顺序执行实现过程新建一个动画页面进行单独控制记得用statefulwidget类，这第二个动画之间涉及到页面刷新切换widget记得withtickerproviderstatemixin这个是动画类状态管理的必备classAnimationListItemextendsStatefulWidget{AnimationListItem();@override_A... 继续阅读 >