CodingFire的博客

之前项目中就用了iconfont，当时开发中更新iconfont的时候，我们都不愿意去做，总是让引入这个东西的同事来做，原因是我们当时确实不会。每次那个同事都吐槽我们：这个很简单的，你们自己弄，都教过好几次了，你们呀！在一片笑声中，他默默的更新iconfont去了。由此也浪费了不少时间，后来慢慢的，自己也就学会了，才觉得确实不难。直到今天，又一次看到iconfront，才突然想起来，不觉嘴角挂起一抹自嘲和愉快的微笑。

最近偶然间看到有人关于Flutter中TextField的高度问题，所以就写了这篇博客，另外附上收键盘的几种方式。这个效果看着还行，但是吧，为什么这么高呢？最外层包裹ColorFiltered，颜色可自己定，不过一般是灰色。2.项目中存在多个键盘，希望能够点击空白区域全局收起。其实上面的TextField代码中已经给出了设置。一.先说说设置TextField的高度问题。1.如果只有一个键盘，那我们可以简单的用。接着添加点击事件来取消焦点就可以了。3）全局设置字体不随系统改变。二.来说说收键盘问题。

在网上搜索了下针对这个问题的博客，都是讲的监听，也是从官方那里拿来的，对于怎么使用讲解也比较浅薄，对于一个初学者来说不好下手，这也是这篇博客诞生的初衷，帮助初学者更好的学习监听列表状态，并解决一些优化问题。注意：唯一的槽点就是这里没有判断cell内部的状态，只要滑动所有的cell都会变成滑动中，实际开发中要判断cell内部是否已经加载耗时的操作（gif，普通大图，动画）完毕，在 model中给一个参数来记录并判断，若已加载完毕，则滑动时不再显示加载中的状态，同时，也可在滑动时暂停动画。

今天这篇博客说的是地图和定位的问题，不一样的是，这是在flutter中处理地图，定位，反地理编码。先看下做出来的效果如何：目前用到的都是模拟数据，真实场景大家自己接入数据即可。这里的功能分为几部分：1.百度地图；2.定位功能；（百度地图提供了定位功能，需要单独引入，但是这里选择使用其他的基于LBS的定位）3.反地理编码；4.抽屉功能；（就是这个可以拖拽的列表，可展开，可折叠）5.滑动按钮。然后我们来一步步说明怎么来使用这些功能：1.百度地图百度地图flutter插件接入地址：htt

之前我写过一篇关于rxdart使用的博客：Flutter开发 - rxdart使用要义，一看就会的rxdart使用讲解，但讲道理，Provider才是在flutter中使用最广的状态管理方式，一直想写一篇关于Provider使用的博客，今天终于找到时间写了个demo，并写这篇博客给大家聊聊Provider的基础使用防范，包含单个Provider的使用，多个Provider的使用。虽然网上也有很多关于Provider的博客，但是讲解的并不是很详细，像是上学的时候老师在念课本，听了但是根本不会用，那么这篇博客，

近期有一个关于数据报表的需求，需要表格可以上下左右的滑动，且滑动过程中左边和上边的表头固定不动，这不活脱脱的Excel么？尝试了多种办法来处理：1.自己写，左右滑动时，左边序号表头可固定，但是上下滑动时，顶部的表头无法固定，且很难实现下拉刷新和上拉加载的需求，比较适用于那些固定数据的表格，整体看起来还是很美观的，也是利用了系统提供的一些组件来实现：下面给大家看下完整的代码实现，并解析下：import 'package:flutter/material.dart';class TableDemo

给view加阴影这个需求还算是比较常见的，在flutter中也同样，回顾过去的开发内容，一共用过两种加阴影的方式，今天分享给大家，看下效果图：1.使用Card组件，card组件加的阴影更明显一些吧，而且是四周围绕的，使用起来简单，但是颇有限制，有些地方使用不是很友好，具体案例一时没想起来，大家可以在使用中体会下有哪些限制：//对了，在使用时，记得外层包一层Container使用，方便设置边距Container( margin: EdgeInsets.only(left: 20

1.简单富文本在富文本展示过程中，如果只有1-2段文字需要富文本，且是位于收尾的这种，如：0天后；30元这样的富文本处理起来是很容易的，可以这么做：Widget richTextWidget({String normalStr, String highightStr}) { TextStyle normalStyle = TextStyle(fontSize: 13, color: Color(0xFFA5ABB6), fontWeight: FontWeight.w400); Text

计算规则都在下方了，只需要传入创建的时间戳就可以返回想要的内容，不解释了哈，哪家自己看代码，不复杂：///评价时间规则，11位的时间戳传入String getCommentTime(int createAt) { ///获取当前时间的时间戳 ～/ 是整除取整数的意思，不加～，除出来是double类型的，带小数点 var cTimestamp = DateTime.now().millisecondsSinceEpoch; var allStamp = cTimestamp - create

在iOS中，你要写一个漂亮的导航栏，如果想要自己定制，那是需要花点时间的，甚至可能你要完全重写，而且导航栏中存在很多你舍之后不生效的东西，对于初学者，甚至入门三四年的人的来说，依然是一个噩梦。而在Flutter中，Flutter为我们提供了丰富的组件，你可以选择像在iOS里那样自定义一个view，来作为导航栏，但是相较于iOS中的使用，Flutter更为强大，接下来，博主就带大家来看一下Flutter的导航栏。1.结构要想使用系统的导航栏，必须要按照一定的结构来写页面。Widget build(Bu

在iOS中，我肯定不会写这篇博客。如果我写了，读者会说：你这不是骗流量的么？我又不是小白。哼，取关！????打扰了，这里虽然是flutter工程，不过最终体现还是以pod的形式存在于Xcode原生工程中，博主看过一些类似的博文，有博主就是直接在pod中建文件夹把framework拖进去的。不过我们博主今天肯定不会讲这种方式，第一：太打脸，第二：太没水平，都做flutter了，还按照原生的方式来做，不太好。况且这么做是不安全的，你总不能删了pod之后，每次都要重新做一遍倒入的过程吧？这里博主给大家提供一种

最近有一个重力感应的功能，需求是图片根据屏幕倾斜的方向向对应方向移动，大家应该都见过这个功能吧。所以这个就需要重力感应或者陀螺仪的功能来判断倾斜的方向，轴距的变化。原生里面已经很成熟了，但是在flutter中还是很难找到相关的资料的。你以为博主要自己写一个用？那你就天真了，前人栽树，后人乘凉，博主找到了一个pub可以用，网上一查，找不到使用记录啊，所以就分享出来给大家，减少大家自己开发plugin的损耗。pub名叫：sensors给大家演示下代码： void initState() { s

initState是flutter生命周期中重要的一环，类似于iOS中viewWillAppera，是页面创建前初始化的一个必经步骤。在这个步骤中，我们可能要先去准备一些数据，数据的来源可分为本地和网络请求。在请求的过程中，我们可能会使用到context。如果直接放在initState中，会发生context为null的情况，这时候你需要对这个使用context的方法做一个延时的动作：Future.delayed(Duration.zero).then((value) async { ///使用带

1.Error: Could not find the correct Provider<xxxxxxxxx> above this xxxxxx Widget 这个不是找不到provider，而是找到的provider不正确，那么应该是context传的不对2.NoSuchMethodError: The method '[]' was called on null. 方法返回的是一个数组，但是没有做为空的判断，这个尤其要注意，不止是数组，还有其他的类型3.NoSuchMethod

很早就想写这个问题的，一直忘记了，最近翻阅代码，突然看到这个问题，所以就拿出来和大家说说，分享一下经验。我写的页面底部有一个Widget，就类似于评论的点赞和收藏的组件，页面的中间有一个输入框，很自然的，当我点击输入框的时候，底部的Widget就被键盘顶起来了。可我并不希望被顶起来，那该怎么办呢？resizeToAvoidBottomInset这个属性默认为true，设置为false就可以避免被键盘顶起，还有一些是图片导致变形的情况，都可以使用这个。使用方法是： Widget build(Bu

什么是状态管理？在flutter里面有一个词叫状态管理，通俗一点的讲叫数值变化或者数据传递。而在flutter中比较出名的状态管理是provider，provider在这章里先不讲，我们先来说说另一个用来管理状态的东西，rxdart。什么是rxdart？rxdart是类似于provider的一个pub库，可以用来监听数据的变化，从而达到数据传递和变更的效果。rxdart的核心思想是什么？rxdart的核心思想是使用单例，如果在当前界面来使用rxdart，那博主想说，这也太简单了，简直大材小用，所以

就是如图所示的功能，这是一个签名页面，通过签名的内容和百度的签名验证API效验，获取用户的签名，然后用于合同等一些场景。乍一听签名，特别还是flutter的签名，觉得好难啊，但是不用担心，flutter提供了我们强大的pub，这里推荐大家一个用于签名的pub signature: ^3.2.0功能的问题解决了，那么界面的问题我们看下，要实现横屏，博主参考了网上提供的一些方法，均以失败告终，整个app只有这一个界面是支持横屏的，如果是原生，我相信大家有很多办法可以实现，在flutter里面貌似行不.

最近通过sentry平台，看到了很多奇怪的异常，有些异常甚至达到了百万级别，仔细去看才发现问题所在，报错是这样的：_CastErrorNull check operator used on a null valuechange_notifier.dart in ChangeNotifier.notifyListeners at line 218看到之后根据对应提示找到了代码，发现是notifyListeners报的，也就是说，在notifyListeners的时候，被通知的‘对象’已经被销毁了，

最近通过sentry解决异常的时候发现了一个报错：════════ Exception caught by widgets library ═══════════════════════════════════════════════════════The following assertion was thrown while finalizing the widget tree:Multiple widgets used the same GlobalKey.The key [GlobalKe

今天偶然发现在iOS设备上，当设置了紫铜的字体大小很大后，在app中字体变化很大，会导致flutter中文字的换行。虽然算不上bug，但是对app美观性是一种影响。为了不让app字体根据系统字体大小而变化，特地找了下处理的方法：1.对单个Text设置不跟随系统文字Text( //倍数可以自己设置，1就是不变 textScaleFactor: 1.0, 'xxxxxxxx', style: TextStyle(fontSize: 14, color: Color(0

上一篇讲解了截图和保存图片的方法，这篇博客将对图片转base64和上传sentry，以及动态获取本地app版本号的方法做讲解。首先来看下代码部分：对图片做base64处理：Future<String> base64Img() async { try { RenderRepaintBoundary boundary = imgKey.currentContext.findRenderObject(); var image = await boundary.toIm

上一篇博客中讲解了sentry的基本使用，文后提到了sentry的扩展使用，关于异常上报的同时截图进行上传。要知道，在iOS或者安卓中截屏是一件很困难的事，涉及到的权限根本绕不过去，但是却可以通过绘制的方式拿到截屏，考虑到代码的一致性，降低iOS和安卓的开发，所以选择在flutter中对屏幕进行截屏。图片的上传推荐两种方式：1.通过接口上传到oss云服务器中，但相对的可能会有很多异常，导致服务器存储大量无用的图片，但也可以通过一定的方式定期清理；2.通过将图片进行base64编码字符串，通过sent

在原生App中，我们用来监听异常和崩溃的工具有很多，主流的有Bugly，友盟等等。而在flutter中，异常的监听就没那么容易了，好在官方提供了一个插件供我们使用，这就是sentry，关于sentry的用法，但是官方没有解释太详细，网上资料也不多，但也能找到，不过有些写的比较简单，没有详细解释原因，所以在使用过程中难免要走不少的弯路。今天博主就把sentry的使用方法略加详细的介绍一下，还有一些扩展的用法；1.首先sentry的使用需要先搭建自己的私服，这个可能需要后端的小伙伴来帮忙部署；2.搭建成功

1.22版本相关：flutterSDK：1.22.1（目前最新版为1.22.2）dart：2.10.1LHHdeMacBook-Pro:next zcy$ dart --versionDart SDK version: 2.10.1 (stable) (Tue Oct 6 10:54:20 2020 +0200) on “macos_x64”LHHdeMacBook-Pro:next zcy$ flutter --versionFlutter 1.22.1 • channel stable •

在flutter中提供了渐变色的组件，但前提是必须使用Container，具体使用方法见下方：import 'package:flutter/material.dart';class JianBianColor extends StatefulWidget { @override _JianBianColorState createState() => _JianBianColorState();}class _JianBianColorState extends State&lt

什么？设置圆角失效？你有遇到过么？知道原因么？今天，这篇博客，博主将带你揭开ClipRRect设置圆角失效的秘密。按照惯例，我们先看下效果图：废话不多说，直接揭开谜底：影响圆角的元凶不是别人，正式margin的设置，来看下代码：import 'package:flutter/material.dart';class ClipRectPage extends StatefulWidget { @override _ClipRectPageState createState() =>

写flutter也有一段时间了，期间多是带着iOS的思想在写，今天带给大家的是flutter中tableview，cell里面有多个相似的item的布局。看下图：这个布局在iOS中是比较常见的布局，我们一般会在cell中通过for循环的方式布局，在flutter中，for循环并不能直接用来布局，那要怎么写呢？方法1:这个是博主曾经用过的方式，就是一个个的写，效率比较低，还要判空，点击事件和赋值都要单独分开给数据源，不推荐这么做；方法2:博主今天推荐的方法是使用Wrap，看看具体代码怎么写的吧：

先来看下效果图在开发中，很多场景都会使用的返回顶部的功能，那么在flutter中，返回顶部的按钮要怎么做呢？首先，我们要来写一个按钮：好吧，我相信大家都会写这个按钮。其次，监听页面的滚动，原声中我们使用delegate，可以知道滚动的距离，在flutter中怎么监听呢？看代码： //这个widget.controller就是外部传入的被监听的这个滚动的'控制器'或者页面吧 widget.controller?.addListener(isScroll); void isScroll()

首先，大家先看一下效果图：看起来就是一行行的显示，但是小伙伴千万不要觉得使用Row就能解决，还涉及到换行呢，你总不至于要一个个算长度来换行吧？所以这里推荐使用Wrap，来看下Wrap部分怎么使用：Wrap( spacing: 12.0, // 主轴(水平)方向间距 runSpacing: 0, // 纵轴（垂直）方向间距 alignment: WrapAlignment.start, children: _keywords

idevice_id和iproxy无法打开在Mac电脑上比较常见，属于老生常谈的的话题。比较容易解决，一般是需要给一些权限，这个网上搜下很多的，博主这里再贴下代码，和其他人的都一样的，没啥好说的：sudo spctl --master-disable///这里说白了就是你看到的最后一个文件在电脑上的路径，直接拖进去就可以了sudo xattr -r -d com.apple.quarantine futter的SDK目录/bin/cache/artifacts/libimobiledevice/ide

在iOS/Android中，如果希望在点击切换到对应的界面之后刷新当前页面，iOS/Android提供了一套完整的生命周期供我们使用，同时tabbar也了提供点击后对应的协议/接口。可以说是非常成熟和方便了。Flutter也有自己的生命周期，但却没有原生那么成熟，下一篇我们单独来说下Flutter生命周期的使用，今天我们来说一种通过GlobleKey来实现点击后刷新当前界面的方法。我们来假定一个场景，我们有一个app，有四个tabber，我们希望在点击个人中心的tab时可以刷新个人中心中的用户信息数据，

单例在各个开发平台都有使用的场景，可以用于定义一些全局的参数和保存生命周期内的一些数据。那么在Flutter中单例该怎么使用呢？博主百度了下，找到的大多数都是类似这样的写法：class Manager { // 工厂模式 factory Manager() =>_getInstance() static Manager get instance => _getInstance(); static Manager _instance; Manager._internal()

个人中心页面为什么要挑这个页面来讲解下布局呢，因为它比较具有代表意义，块状的布局，包含Row，Column，Stack。最主要的是角标的处理方式。在一般的页面中，我们都采用上下布局，左右布局，列表等来做，很巧合的是这里基本都有，同时有一个要注意的点是角标，属于绝对位置的布局。首先我们来解析一下这个个人中心页面；顶部导航栏；头部个人信息；订单和其他中的Item项（角标要注意下）；这个页面由三部分组成，我们分别来说下三部分怎么实现：顶部导航栏appBar: AppBar(

Flutter应用在用户中出现小面积Crash现象通过友盟查看日志问题复现尝试更换Flutter版本问题定位和官方沟通过程总结现象app运行就闪退，出现的机型包括iOS12.x，iOS13.5.1，iOS14等；Flutter版本1.17.2通过友盟查看日志我们通过友盟去查看了一下崩溃的日志，只能看到引起崩溃的内容是flutter相关的东西，没有什么实质性的输出无法定位到具体问题。问题复现为了解决这个crash问题，我们想办法联系到了客户，通过testflight让用户共享崩溃数据，问题重现，拿