分类：Flutter

2021
04-07

详解Flutter中的数据传递

Flutter中的数据传递在开发中，数据从一个页面传递到另一个页面事很常用的，在Android开发中，通常是通过把数据放到intent中传递过去。在Flutter中，数据是如何传递的呢？在Flutter中一切都是Widget,所以数据的传递就成了数据才Widget中的传递。在之前的学习中，数据从一个Widget传递到子Widget是通过构造函数，一层一层的往里面传，要是widget的层级比较少，还没什么问题，要是层级很多，这样传递就太麻烦了。还好F... 继续阅读 >

2021
04-07

详解Flutter的路由导航

Flutter的路由导航路由管理或导航管理：从一个页面平滑地过渡到另一个页面，我们需要有一个统一的机制来管理页面之间的跳转。在原生的Android开发，是通过startActivity或startActivityForResult来完成页面的跳转的，在Flutter中如何实现呢？在Flutter中，页面之间的跳转是通过Route和Navigator来管理的：Route是页面的抽象，主要负责创建对应的界面，接收参数，响应Navigator打开和关闭；而Navigator则会维护... 继续阅读 >

2021
04-07

Flutter实现图片滤镜效果

本着学习的态度，研究了一下flutter里面的ColorFilter，字面意思翻译颜色过滤器，学习就是要举一反三，拓展思考就把这个功能做了一个简单的图片滤镜效果。（ps：图片有点没控制住，有点长）效果如下：ColorFilter介绍两种使用方式constColorFilter.mode(Colorcolor,BlendModeblendMode)constColorFilter.matrix(List<double>matrix)实现效果主要通过第一种方式，首先创建一个MorningPainter类继承CustomPainter,定义三个... 继续阅读 >

2021
04-07

详解Flutter混排瀑布流解决方案

背景流式布局，这是一种当前无论是前端，还是Native都比较流行的一种页面布局。特别是对于商品这样的Feeds流，无论是淘宝，京东，美团，还是闲鱼。都基本上以多列瀑布流进行呈现，容器列数固定，然后每个卡片高度不一，形成参差不齐的多栏布局。对于Native来说，无论是iOS还是Android，CollectionView和RecyclerView都能满足我们的绝大部分场景了。不过目前闲鱼很多业务场景都是在Flutter上进行实现的，当时Flutter官方只提供了Lis... 继续阅读 >

2021
03-30

浅谈Flutter解析JSON三种方式

Dart实体类格式classCategoryMo{Stringname;intcount;CategoryMo({this.name,this.count});//将map转成moCategoryMo.fromJson(Map<String,dynamic>json){name=json['name'];count=json['count'];}//将mo转成map，可缺省Map<String,dynamic>toJson(){finalMap<String,dynamic>data=newMap<String,dynamic>();data['name']=this.name;data['count']=this.count;returndata;}}方案一:手写... 继续阅读 >

2021
02-20

详解如何在Flutter中集成华为认证服务

最近发现华为AGC认证服务支持Flutter框架了，期待这个平台的支持已经很久了，所以迫不及待接入了，关联了自己的邮箱等账号。集成步骤安装flutter环境a)下载Fluttersdk包，地址：https://flutter.dev/docs/get-started/install/windows将压缩包解压到任意文件夹，例如D:\Flutterb)将flutter命令文件添加到环境变量中，此处我添加的Path为D:\Flutter\flutter_windows_1.22.2-stable\flutter\bin。c)在AndroidStudio中点击“File... 继续阅读 >

2021
01-22

详解Flutter 调用 Android Native 的方法

Flutter调用AndroidNative的方法，是通过MethodChannel的方式来实现的:在Android端：创建一个Class，实现FlutterPlugin和MethodCallHandler接口重写onAttachedToEngine()，onDetachedFromEngine()，onMethodCall()onAttachedToEngine()中，根据自定义的CHANNEL_NAME创建MethodChannel，onDetachedFromEngine中，释放MethodChannelonMethodCall中，通过自定义的METHOD_NAME，来响应Flutter中，invokeMethod对Native的... 继续阅读 >

2020
11-29

详解Flutter点击空白隐藏键盘的全局做法

开发原生页面的时候，在处理键盘事件上，通常的需求是，点击输入框外屏幕，要隐藏键盘，同样的，这样的需求也需要在Flutter上实现，Android上的实现方式是在基类Activity里实现事件分发，判断触摸位置是否在输入框内。/***获取点击事件*/@CallSuper@OverridepublicbooleandispatchTouchEvent(MotionEventev){if(ev.getAction()==MotionEvent.MotionEvent){Viewview=getCurrentFocus();... 继续阅读 >

2020
11-06

Flutter 和 Android 互相传递数据的实现

（一）Android代码设置1，打开AndroidStudio创建一个应用程序，包名dev.android.book2,创建一个MyApplication,应用在AndroidManifest.xml文件中的application的android:name属性上3，创建FlutterEngine的实例，然后把这个实例添加到缓存的FlutterEngine当中4，创建MethodChannel的实例，指定一个此实例的唯一字符串，例如dev.android.book/add5,设置methodChannel方法回调函数，接收Flutter通过MethodChannel发过来的消息... 继续阅读 >

2020
10-10

flutter局部刷新的实现示例

局部刷新我们在做项目的时候，都需要单独的去刷新一个值，而不是把整个界面都重绘。大家都知道setState是进行重绘的一个方法，他会执行生命周期的一个build，这将会使得整个界面来进行重绘。当然我们也会说把他进行状态管理，因为我个人不是很喜欢用provider进行状态管理，而是使用steam和event_bus进行传值和管理，当然自然的代码就会多了，所以我现在也在寻找provider更简单的方法，当然这里就不说了，在跟其他人聊的时候，都说... 继续阅读 >

2020
10-10

100 行代码实现Flutter自定义TabBar的示例代码

Flutter的确很强大，但美中不足的是生态还有待完善，没有出现像前端的Antd或Element那样全能的基础UI库。由此带来的直接影响是开发效率提不上去，需要耗费大量的时间精力在基础组件的封装上。官方的TabBar不满足需求，又没有合适的轮子，只好自己造轮子啦。接下来带你一步步实现自定义TabBar……一、目标和效果需求目标是：这个页面不要material左侧统一的返回键和Title在右侧有取消按钮，点取消即返回点击Tab... 继续阅读 >

2020
10-10

Flutter项目在 iOS14 启动崩溃的解决方法

Flutter是什么？Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android和iOS平台上都可以运行。下面看下Flutter项目在iOS14启动崩溃的问题及解决方法崩溃现象在iOS14发布之后，运行APP就出现闪退，和机型没关，只要是iOS14就必闪退崩溃分析1、启动就闪退，多起几次可能有一次没有问题。2、启动后到某个页面卡死（必卡跳不过）根本原因尚不明确，个人分析ProductName会影响HeaderFolderPath，可能是... 继续阅读 >

2020
10-10

Flutter中嵌入Android 原生TextView实例教程

前言本篇文章中写到的是flutter调用了Android原生的TextView案例添加原生组件的流程基本上可以描述为：1android端实现原生组件PlatformView提供原生view2android端创建PlatformViewFactory用于生成PlatformView3android端创建FlutterPlugin用于注册原生组件4flutter平台嵌入原生view1创建原生组件创建在fLutter工程时会生成几个文件夹，lib是放flutter工程代码，android和ios文件夹分别是对应的双平台的原生工程。... 继续阅读 >

2020
10-10

Flutter 控制屏幕旋转的实现

最近需要做个平板的项目，然后需要直接横屏，有2种实现方式。1,随着屏幕旋转，布局自动调整。做横竖屏适配2，强制屏幕横屏，不随着屏幕去调整第一种方式这里就不做说明了。代码做适配就可以。下面说一下第二种实现方式Flutter自带方式flutter为我们提供了方法来控制系统的横竖屏显示SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight,DeviceOrientation.po... 继续阅读 >

2020
10-10

Flutter List数组避免插入重复数据的实现

List具有一定长度存在索引的对象集合(长度为0不存在索引,长度>0存在索引)常见列表1、定长列表默认值null例如:List<int>fixedLengthList=newList(2)、List<int>fixedLengthList=newList(8)List<int>fixedLengthList=newList(2);for(inti=0;i<2;i++){print("索引为${i}的值${fixedLengthList[i]}");}I/flutter(9251):索引为0的值nullI/flutter(9251):索引为1的值null固定长度不可修改 List<int>fixedLeng... 继续阅读 >

2020
10-10

Flutter 全局点击空白处隐藏键盘实战

老孟导读：为什么要实现点击空白处隐藏键盘？因为这是iOS平台的默认行为，Android平台由于其弹出的键盘右上角默认带有关闭键盘的按钮，所以点击空白处不会隐藏键盘。对于单个页面来说，通过为TextField添加focusNode，点击空白处时使TextField失去焦点，实现如下：classDismissKeyboardDemoextendsStatelessWidget{finalFocusNodefocusNode=FocusNode();@overrideWidgetbuild(BuildContextcontext){return... 继续阅读 >