Flutter
文章平均质量分 56
磐石BedRock
一个不会写后端和APP的程序员不是一个好的前端程序员,对!没错!菜鸡前端程序员就是我!
展开
-
Flutter 关于序列化JSON之json_serializable库的使用
Flutter 关于序列化JSON之json_serializable库的使用原创 2022-08-29 17:23:21 · 1585 阅读 · 0 评论 -
Flutter 瀑布流布局(根据图片高度展示)
Flutter瀑布流布局(依靠图片宽高计算左右布局)原创 2022-06-06 11:16:45 · 1191 阅读 · 0 评论 -
Flutter 本地数据库sqflite实战操作
Flutter本地化数据库操作、sqflite操作方法、数据库操作原创 2022-03-29 15:39:19 · 4159 阅读 · 7 评论 -
项目升级到Flutter2.5.0之后出现的报错问题
记录一次报错,关于项目升级到2.5.0之后报错问题错误信息一:Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.解决办法:在您的项目级 gradle 文件中,只需将 ext.kotlin.version 从您拥有的任何版本增加到“1.4.32”或任何可用的最新版原创 2021-10-27 17:44:07 · 1423 阅读 · 0 评论 -
如何将Flutter开发的Android app 发布Google Play(谷歌应用商店)流程
将Flutter Android app 发布Google Play(谷歌应用商店)流程一、首先就是要做到科学!二、打开google play官网,注册谷歌账号三、打开谷歌开发者站点https://play.google.com/apps/publish/signup/创建你的App应用四、创建完毕应用后,会自动进入到应用设置页面,然后点击Production准备上传你的版本五、点击Continue同意谷歌条款六、上传时候出现了2个问题,原因是我的Android App Bundle还是F原创 2021-06-07 11:28:36 · 4035 阅读 · 2 评论 -
Flutter 语言国际化状态管理
Flutter语言国际化,手动切换App语言1、配置字体文件:custom_localization.dartimport 'dart:async';import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:flutter/widgets.dart';class Translations { Locale _locale; // 多语言文本资源,为了演原创 2021-04-09 10:48:42 · 481 阅读 · 0 评论 -
Flutter Wrap流式布局嵌套循环Row导致占据一行问题
Flutter Wrap流式布局嵌套循环Row导致占据一行问题项目中我们在使用Wrap去循环数据的时候,有一些UI需要使用到Row布局来进行展示,但是众所周知的是,Row布局会占满一行,这就导致我们的Wrap失效了,如何解决呢?解决方案:利用RichText来代替Row,其中RichText中可以使用WidgetSpan来存放我们的正常Widget组件,上代码:Wrap( spacing:ScreenAdapter.setWidth(20),// 主轴(水平)方向间距 runSp原创 2021-03-23 17:44:32 · 2404 阅读 · 2 评论 -
Flutter开发IOS,上架AppStore的全部流程以及常遇到的坑
Flutter开发IOS,上架AppStore的全部流程以及常遇到的坑本次开发采用的Flutter技术进行开发,没想到会这么快,昨天提交的,今天便已上架appstroe,所以这次来做一次总结,总结从开发完毕app之后上架的全部过程。一、准备工作(如果准备工作中,没有和您APP相匹配的功能点,可以跳过这一段)( 1 ) 多语言申请权限问题因为我的app是涉及到多语言以及自定义申请权限内容,所以在申请权限方面,虽然Flutter拥有申请权限的插件:permission_handler,但还是不能自定义文原创 2021-03-17 11:50:54 · 13134 阅读 · 13 评论 -
Flutter在initState()初始化方法时使用包含context的Widget导致报错问题
先上报错信息dependOnInheritedWidgetOfExactType<_InheritedTheme>() or dependOnInheritedElement() was called before _AddArticleState.initState() completed. When an inherited widget changes, for example if the value of Theme.of() changes, its dependent wi原创 2021-03-16 10:45:22 · 4222 阅读 · 0 评论 -
Flutter 开发 一个 字母+数字的随机数图片验证码
Flutter 一个 字母+数字的随机数图片验证码废话不多说,首先上效果图使用方法: @override void initState() { super.initState(); _getCode(); }// 调用随机数方法 _getCode(){ code = ''; String alphabet = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; for (var i原创 2021-02-23 17:38:52 · 1998 阅读 · 0 评论 -
Flutter实现文字渐变色
Flutter实现渐变色Container( child: Text('等级', style: TextStyle( fontSize: ScreenAdapter.size(25), foreground: Paint() ..shader = ui.Gradient.linear( const Offset(0, 0), const Offset(110, 20), <Color>[原创 2021-01-25 14:55:35 · 1769 阅读 · 6 评论 -
记录一次手撸Flutter开发环境的经过
纪录手动配置Flutter开发环境时遇到的问题(不使用AndroidStudio配置)其实早在之前的时候,我就发布过去一次手动配置Flutter开发环境,具体详细步骤,请查看本篇文章:利用VScode配置Flutter环境开发今天是来和大家聊聊我再一次手动配置环境时出现的问题先来说一下步骤1、Flutter SDK下载(配置Widnows环境、配置pub以及flutter国内镜像,这些百度都能搜到,我就不详细说了)2、JavaSDK(一路install安装)3、AndroidSDK(一路inst原创 2020-10-15 23:02:25 · 198 阅读 · 0 评论 -
Flutter初始化路由页面时自动弹出提示框
Flutter 进入路由页面自动弹出提示框需求:刚一进入页面,检测用户是否认证了,如果没有认证则弹出提示框问题原因:由于Flutter的Alert提示框是需要页面内容Build完毕后,并且有了父级页面内容的时候,才可以进行正常的弹出,所以在一开始 initState的时候,就调用弹出方法,便会报错出现问题。解决办法:使用一个定时器去解决,在页面加载后延时调用,这个办法就解决了,我使用的是秒,延迟了1秒,用户体验上感觉不到什么,完美解决这个问题。附代码↓注:AlertMsg.alerDialog是原创 2020-06-26 11:37:31 · 3587 阅读 · 0 评论 -
Flutter 1.17运行报错
最近Flutter1.17刚更新后, 准备拿到项目中整一整,结果一上来就给我个错误,真开心!!!解决办法找到你的FlutterSDK这个路径下面的这些文件,都是用编辑器打开全局搜索:https://storage.googleapis.com/download.flutter.io,替换为http://download.flutter.io...原创 2020-05-25 14:51:25 · 867 阅读 · 0 评论 -
彻底解决Flutter_downloader中出现的问题
解决Flutter_downloader中出现的问题由于之前已经发布过一篇文章Flutter内部更新遗留了一些问题就是关于Flutter_downloader报错的问题,错误原因是一开始挺摸不着头脑的,最近新的项目又涉及到了FlutterAPP内部更新问题,因为上次的失败,所以这次决定一定要解决掉,虽然又是和上次一样报了'package:flutter_downloader/src/downloader.dart': Failed assertion: line 388 pos 12: 'callb原创 2020-05-17 16:38:05 · 10099 阅读 · 16 评论 -
Flutter Socket实战
FlutterSocket实战,跟着走下来,保证你也会写一个简单的聊天欢迎加入Flutter技术交流群:723609732前言首先上面的功能特点读者可以看到了,由于我还没有解决如何裁剪视频第一帧这个问题,所以有点小瑕疵,但是其他功能是可以的。其中包含了:文字聊天图片发送(查看)选取图片录视频选取视频发送语音接下来就步入正题开始从头给读者介绍一下整个流程,由于本文章主要介...原创 2020-03-13 20:20:44 · 11328 阅读 · 32 评论 -
Flutter之文字环绕控件效果
使用WidgetSpan能够存放不是TextSpan格式的WidgetRow( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Expanded( flex: 1, child: Text.rich( ...原创 2020-03-07 21:15:07 · 1358 阅读 · 0 评论 -
Flutter Socket出现的问题
1、网络出现断开后,再次连接网络,需要重连socket2、退出之后,需要断开socket,从新登录后,再次重连socket,所以在连接socket之前,要有个判断,需要确定本地是否有登录token信息3、发送socket心跳前需要有个判断是否本地有token...原创 2020-03-06 16:43:42 · 2731 阅读 · 0 评论 -
Flutter_Swiper修改小圆点控制器(分页指示器)的大小和颜色
官网并没有把里面的方法指明出来,还需要我们看源码,在源码当中我发现了swiper分页指示器是继承自SwiperPlugin这个类的,同时发现,小圆点控制器是dots,这个属性随后翻了一下源码,发现了单个的dots类型的builder类,将SwiperPagination的builder构造器和这个构造类结合一下,就可以修改控制器的样式了 pagination: SwiperPaginat...原创 2020-03-05 09:12:04 · 6514 阅读 · 0 评论 -
Flutter之StreamBuilder的封装,让你的项目更加工程化
本文章就不对StreamBuilder过多的介绍了,如果不了解的可以去这篇文章中先行了解一下https://www.jianshu.com/p/889ea7f9734a关于StreamBuilder,我们常用来做的就是异步加载WidgetUI,为了使整个项目做到统一的规范化,我们将封装一个统一的StreamBuilder,用来全局使用。大体分为以下几个文件他们分别的作用是GlobalS...原创 2020-02-20 11:27:00 · 4701 阅读 · 0 评论 -
Flutter吸顶效果
前言:关于吸顶效果,在Flutter当中,已经提供了这么一个控件,但是由于太复杂,所以网上的资料有些少,本文章主要利用Flutter自带的这种吸顶动画控件,配合着动画完成的一个用户中心的页面。import 'package:flutter/material.dart';class UserPage extends StatelessWidget { @override Wid...原创 2020-02-17 22:26:31 · 4759 阅读 · 1 评论 -
Flutter关于简单的吸顶通讯录制作
一个简单的关于吸顶效果的列表其实大体挺简单的,核心是使用了一个吸顶插件实现的,在这里把代码贴出来只是有页面效果,搜索并没有完善,如果后续我完善了,会再来完善一下这篇文章。关于其中的数据问题,我是随便写了一些数据,如果真正要使用的话,需要造一个完善的数据,一个数组当中要有吸顶标志数据,在吸顶标志数据下面再有的就是我们展示的list数据示范数据List<dynamic> for...原创 2020-02-16 18:29:30 · 2186 阅读 · 0 评论 -
Flutter劫富济贫计划(五)——flutter布局实战
高仿商城详情布局商品页为模仿京东商城布局,详情页为京东商城的WebView这是我自己封装的屏幕适配插件,可忽略不计import 'package:project/plugins/ScreenAdapter.dart';主要代码import 'dart:convert';import 'package:flutter/material.dart';import 'package:p...原创 2020-01-05 12:54:11 · 532 阅读 · 0 评论 -
Flutter中WebView下面弹出内容布局
import 'package:flutter/material.dart';import 'package:flutter_inappwebview/flutter_inappwebview.dart';class TranformWebViewBottom extends StatefulWidget { @override _TranformWebViewBottomStat...原创 2020-01-04 15:46:22 · 830 阅读 · 0 评论 -
最新FlutterAPP内部更新并且安装的功能
前言:介绍一下APP更新的流程1 、Android App 升级执行流程1、获取本地版本号2、请求服务器获取服务器版本号3、本地版本和服务器版本不一致提示升级,弹窗提示用户是否更新4、用户确定升级,调用文件传输方法下载 apk 文件5、监听下载进度6、下载完成打开 Apk 进行安装注意:在 Ios 中没法直接下载安装,如果版本不一致直接跳转到 Ios 应用对应的应用市场就可以了...原创 2020-01-04 13:44:43 · 4721 阅读 · 20 评论 -
Flutter按钮集合
苹果弹框void _showTips(String title, String content) { showCupertinoDialog( context: context, builder: (BuildContext context) { return CupertinoAlertDialog( title: Text...原创 2019-12-25 19:15:57 · 156 阅读 · 0 评论 -
Flutter常用布局插件
https://pub.dev/packages/fab_circular_menuhttps://pub.dev/packages/gzx_dropdown_menu原创 2019-12-24 14:43:06 · 539 阅读 · 0 评论 -
Flutter关于圆角头像的问题,如何做到在任何屏幕下的1/1等比例宽高
正常情况下,我们做头像的圆角的问题,常用的有两种方案ClipRRect以及设置Container的borderRadius属性,虽然这两种方法解决了很大一部分屏幕下的圆角图片问题,但是在遇到屏幕分辨率较小的手机时,这两个都会出现无法做到真正的1/1问题在这里我们可以使用AspectRatio来达到真正的1/1的情况AspectRatio( aspectRatio: 1/1, ch...原创 2019-12-13 13:26:52 · 390 阅读 · 0 评论 -
Flutter 用户拍照+用户选择图片,并且裁剪后传给后台
前言虽然现在Flutter关于裁剪图片的插件挺多,在经过一下午的踩坑后,发现了其中很多问题,在Pub上排名靠前的两个插件均有问题image_crop问题是在于如果不嵌套在MaterilaApp当中,选择图片后,无法正常裁剪,而且会将原图片损坏,导致原图片也无法使用,真的恶心simple_image_crop是因为由于近期刚更新了版本,我在下载了示例代码后,运行时直接报错,希望作者在之后能够...原创 2019-12-12 18:55:48 · 3208 阅读 · 10 评论 -
Flutter常用控件:日历选择器
日历选择器是开发当中经常用到的,在这里记录一下// Android日历选择 Future<DateTime> _showDatePicker1() { var date = DateTime.now(); return showDatePicker( context: context, initialDate: date, fi...原创 2019-12-06 14:15:03 · 1846 阅读 · 0 评论 -
Flutter关于汉化App的问题
前言由于我们在使用Flutter中的控件的时候,默认展示的是英文的控件,举个例子当我们想要长按输入框弹出(粘贴、赋值、全选)等选择按钮时,如果没有汉化的话,弹出的就是英文的选择按钮,所以这里就需要我们来汉化一下这个APP了第一步配置语言包,直接在pubspec.yaml中配置即可flutter: sdk: flutterflutter_localizations: sdk...原创 2019-12-06 14:12:18 · 500 阅读 · 0 评论 -
Flutter 中关于 DateTime 时间计算的问题
跳转地址:https://www.cnblogs.com/wyhlightstar/p/11059942.html原创 2019-12-05 17:06:21 · 3401 阅读 · 0 评论 -
关于Flutter的EventBus事件总线
前文其实在有状态管理的情况下,使用EventBus总线的机会还是很少的,但是不排除要使用到的情况。所以今天来介绍一下这个EventBus的插件。首先引入 event_bus: ^1.1.0创建EventBus类,并且初始化import 'package:event_bus/event_bus.dart';// Bus初始化EventBus eventBus = EventBus(...原创 2019-12-04 14:21:09 · 783 阅读 · 0 评论 -
Flutter小知识
Container组件margin和padding属性的区别:Container( margin: EdgeInsets.all(20.0), //容器外补白 color: Colors.orange, child: Text("Hello world!"),),Container( padding: EdgeInsets.all(20.0), //容器内补白 color...原创 2019-11-24 14:03:08 · 188 阅读 · 0 评论 -
Flutter劫富济贫计划(四)——flutter布局实战
不会置顶的Tab标签页切换参考地址:传送门正常的tab标签页都是置顶的,放到Scaffold当中的,但是我们有的项目需求是需要在中间有个标签页切换栏的import 'package:flutter/material.dart';import './fix_tabbar_view.dart';class TestTab extends StatefulWidget { @over...原创 2019-11-20 14:40:12 · 229 阅读 · 0 评论 -
Flutter劫富济贫计划(三)——flutter布局实战
地图导航搜索页面布局整个页面共使用的插件有amap_location_fluttify: 高德定位控件amap_search_fluttify: 高德搜索控件permission_handler: 权限请求azlistview: 城市列表选择shared_preferences: 保...原创 2019-11-19 23:30:43 · 461 阅读 · 0 评论 -
Mac笔记本配置Flutter开发环境
在开发Flutter的过程中,由于我们需要开发苹果APP,所以,我们就需要配置一下苹果的Flutter环境,接下来,就一步步的给大家展示 Mac本如何配置Flutter一、准备工作升级MacOS到最新的系统(建议是最新的系统)安装最新的Xcode电脑上面安装brew https://brew.sh/二、下载 Flutter、配置 Flutter 环境变量、配 置 Flutter 镜像...原创 2019-11-18 00:08:57 · 512 阅读 · 0 评论 -
Flutter 地图插件——Fluttify
Flutter在正常开发的时候 我们需要用到的地图地位有很多,寻找一个好的插件真的太难了,在这里就给大家推荐一个亲测好用的地图插件,作者每天12小时更新回答问题,并且包含高德地图以及百度地图Fluttifygit地址:https://github.com/fluttify-projectpub地址:https://pub.dev/packages?q=Fluttify交流群:9388425...原创 2019-11-13 11:07:12 · 3843 阅读 · 6 评论 -
Flutter劫富济贫计划(二)——flutter页面布局实战
消息列表页面这里提供两种方法完成的该消息列表Card控件布局完成自定义消息列表下图只是Card布局展示,可以自己更换一下控件代码import 'package:flutter/material.dart';import 'package:project/plugins/ScreenAdapter.dart';class ChatPage extends StatelessWi...原创 2019-11-11 13:31:33 · 274 阅读 · 0 评论 -
Flutter 状态管理provide与shared_preferences本地存储的配合使用
本文章是基于状态管理已经配置完毕的基础上,而完成的工作,如果没有配置provide,请看我的另一篇文章:传送门首先来认识一下shared_preferences包装NSUserDefaults(在iOS上)和SharedPreferences(在Android上),为简单数据提供持久存储数据以异步方式持久化到磁盘这两个平台都不能保证在返回后写操作将被持久化到磁盘,并且这个插件不能用于存储关键...原创 2019-11-07 18:24:45 · 1299 阅读 · 0 评论