分类：Flutter

2022
07-11

详解Flutter Widget

目录 概述：Widget的本质：分类：WidgetStatelessWidgetStatefulWidgetStateParentDataWidgetRenderObjectWidget小结 概述：所有的一切都可以被称为widget在开发Flutter应用过程中，接触最多的无疑就是Widget，是『描述』FlutterUI的基本单元，通过Widget可以做到：描述UI的层级结构(通过Widget嵌套)；定制UI的具体样式(如：font、color等)；指导UI的布局过程(如：padding、center等)；…... 继续阅读 >

2022
05-30

Flutter Boost 混合开发框架

目录一、FlutterBoost简介二、FlutterBoost集成2.1Android集成2.2iOS集成三、FlutterBoost架构四、FlutterBoost3.0更新4.1不入侵引擎4.2不区分Androidx和Support分支4.3双端设计统一，接口统一4.4支持【打开flutter页面不再打开容器】场景4.5生命周期的精准通知4.6其他Issue一、FlutterBoost简介众所周知，Flutter是一个由C++实现的FlutterEngine和由Dart实现的Framework组成的跨平台技术框架。其中，FlutterEngin... 继续阅读 >

2022
05-27

flutter 动手撸一个城市选择citypicker功能

城市选择器在项目开发中一般都会用到，基于flutter版本的也有一个city_pickers但是已经很久没有人维护了，项目中之前也用的是这个,最近升级到flutter1.17.x后，发现有一定的概率闪退，无奈之下，只能自动动手撸一个了demo下载地址：https://github.com/qqcc1388/city_pickerCityPickerView能够实现以下功能显示省市区地址，市或者区可以为空白数据省市区数据支持自定义，但是格式要按照city.json中个格式来，如果需要外部... 继续阅读 >

2022
05-24

Flutter源码分析之自定义控件（RenderBox）指南

目录前言RenderObject类继承层级解析RenderBox叶节点与父节点控件的测量与布局performResize和performLayoutrelayoutBoundary叶节点父节点ParentDataParentDataBoxParentDataContainerBoxParentDataContainerParentDataMixin测量child大小布局child控件的绘制绘制自身内容绘制childrepaintBoundary控件的点击事件处理RenderProxyBoxRenderBox子类的常规写法命名mixin成员变量布局、绘制、点击事件对应Widget的常规写法一... 继续阅读 >

2022
01-12

Flutter listview如何实现下拉刷新上拉加载更多功能

目录下拉刷新RefreshIndicator上拉加载更多总结:下拉刷新在Flutter中系统已经为我们提供了googlematerialdesign的刷新功能,样式与原生Android一样.我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新，下面们还是先来看下如何使用吧RefreshIndicator构造方法:constRefreshIndicator({Keykey,@requiredthis.child,this.displacement:40.0,//触发下拉刷新的距离@requiredthis.onRefresh,... 继续阅读 >

2021
12-11

Flutter瀑布流仿写原生的复用机制详解

目录废话开篇：先看复用效果复用状态打印问题一、实现思路是什么？问题二、UI布局代码分析。总结废话开篇：iOS与android在实现列表界面的时候是有重用机制的，目的就是减少内存开销，用时间换空间。个人感觉flutter并没有特别强调复用，关于listView.builder的“复用”个人感觉应该是销毁跟重建的过程，所以这里用flutter实现了简单的复用机制。代码拙劣，大神勿喷，共同进步先看复用效果复用状态打印右侧是简单实现瀑布流界面，... 继续阅读 >

2021
12-09

Flutter实现微信朋友圈功能

本文实例为大家分享了Flutter实现微信朋友圈功能的具体代码，供大家参考，具体内容如下今天给大家实现一下微信朋友圈的效果，下面是效果图下面还是老样子，还是以代码的方式进行讲解import'package:dio/dio.dart';import'package:flutter/cupertino.dart';import'package:flutter/material.dart';import'package:nursery_school_gardener/view/main/dynamic/FriendView/FriendCell.dart';classDynamicextendsStatefulWidg... 继续阅读 >

2021
10-20

Flutter实现自定义筛选框的示例代码

目录一、首先自定义筛选框的按钮视图，布局很简单，一个listView就可以搞定。二、定义筛选数据展示列表视图。一、首先自定义筛选框的按钮视图，布局很简单，一个listView就可以搞定。1、在数据model中添加了一个selectedModel属性，用来记录当前已选择的筛选项（目前仅支持单选）。2、当按钮数量小于3个时，按钮最大宽度为屏幕宽度的1/3；小于屏幕宽度时，则为屏幕宽度/按钮数量。具体代码如下：vartext=model.selectedFilterMo... 继续阅读 >

2021
10-20

flutter 路由机制的实现

目录实现基础_routeNamed_flushHistoryUpdatesaddpushpopremove总结整个flutter应用的运行都只是基于原生应用中的一个view，比如android中的FlutterView，flutter中的页面切换依赖于它的路由机制，也就是以Navigator为中心的一套路由功能，使得它能够完成与原生类似且能够自定义的页面切换效果。下面将介绍flutter中的路由实现原理，包括初始化时的页面加载、切换页面的底层机制等。实现基础flutter应用的运行需要依赖... 继续阅读 >

2021
10-17

Flutter悬浮按钮FloatingActionButton使用详解

目录1、普通用法2、修改悬浮按钮位置3、修改悬浮按钮大小4、去除悬浮按钮切换动画5、一般的自定义悬浮按钮样式6、彻底的自定义悬浮按钮样式1、普通用法floatingActionButton:FloatingActionButton(child:Icon(Icons.add),onPressed:(){print('不要啊~');},),2、修改悬浮按钮位置继承FloatingActionButtonLocation类，重写对应方法自定义位置import'package:flutter/material.dart';classCustomFloa... 继续阅读 >

2021
10-16

Flutter自定义搜索框效果

本文实例为大家分享了Flutter自定义搜索框效果的具体代码，供大家参考，具体内容如下效果实现方式import'package:dio/dio.dart';import'package:flutter/material.dart';import'package:keduo/base/baseSize.dart';import'package:keduo/utils/icon_utils.dart';classSearchBarWidgetextendsStatefulWidget{finalValueChanged<String>onchangeValue;finalVoidCallbackonEditingComplete;constSearchBarWidget({... 继续阅读 >

2021
10-16

flutter实现appbar下选项卡切换

本文实例为大家分享了flutter实现appbar下选项卡切换的具体代码，供大家参考，具体内容如下TabBar、Tab、TabBarView结合实现这里实现的是appbar下的选项卡import'package:flutter/material.dart';/***有状态StatefulWidget*继承于StatefulWidget，通过State的build方法去构建控件*/classTabBarAndTopTabextendsStatefulWidget{通过构造方法传值TabBarAndTopTab();//主要是负责创建state@override_Demo... 继续阅读 >

2021
09-17

Flutter自定义Appbar搜索框效果

本文实例为大家分享了Flutter自定义Appbar搜索框效果的具体代码，供大家参考，具体内容如下首先看一下实现本次实现的效果。本来想直接偷懒从flutterpub上找个能用的使用起来，但是看了下发现都与目前ui效果相差很大，于是乎决定自己实现一个。整体的话比较简单，本来也是为了练手而做的。为了方便处理statusbar的高度适配，于是乎直接依托于Appbar进行了实现，这样就可以不用处理状态栏适配了。class_HotWidgetStateextendsSta... 继续阅读 >

2021
09-16

Flutter 剪裁组件的使用

目录效果展示剪裁WidgetClipRRect（圆角矩形剪裁）其他属性其他形状剪裁ClipOval（椭圆剪裁）其他属性ClipRect（矩形剪裁）ClipPath（路径剪裁）做个优化源码仓库参考链接效果展示在实际项目当中我们经常看到如下各种剪裁形状的效果，Flutter为我们提供了非常方便的Widget很轻松就可以实现，下面我们来一起看看吧剪裁WidgetClipRRect（圆角矩形剪裁）这里我们通过borderRadius属性就可以很方便的设置圆角半径来实现圆角剪裁... 继续阅读 >

2021
09-14

Flutter 使用fluro的转场动画进行页面切换

目录转场形式设定页面默认转场方式跳转时指定转场方式总结在fluro中，定义路由处理器Handler时可以指定该页面的默认转场形式，或者在使用navigateTo方法是可以设置页面跳转transition参数来设定个性化的转场形式。本篇演示了fluro内置的转场动画，效果如下图所示。转场形式fluro的转场形式通过TransitionType枚举定义，如下所示：enumTransitionType{native,//原生形式，和原生的保持一致，默认nativeModal,//原... 继续阅读 >

2021
09-14

Flutter 路由插件fluro的使用

目录fluro的使用方法路由处理器Handler使用示例页面跳转运行效果前面两篇文章我们介绍了Flutter的原生导航器Navigator实现页面跳转，路由及路由拦截的使用，具体可以参考之前的文章：//www.jb51.net/article/215167.htm//www.jb51.net/article/214856.htm使用原生的路由基本上能够满足大部分需求，但如果想要对页面做类似浏览器url那样的路由，或者控制页面跳转的转场动画，那么原生的路由需要做不少的改造。在pub上，有优... 继续阅读 >