https://index.zshipu.com/geek/categories/flutter/ Recent content in Flutter on 知识铺的博客 Hugo -- gohugo.io zh-CN Wed, 27 Jan 2021 09:03:11 +0000 https://index.zshipu.com/geek/post/flutter/rongcloud-cannot-receive-message-ios/ Wed, 27 Jan 2021 09:03:11 +0000 https://index.zshipu.com/geek/post/flutter/rongcloud-cannot-receive-message-ios/ 安卓（李某测试）拨打 苹果（李朴2），进入对话界面， 弹出键盘，弹出报错,在chat_room.dart文件中 1 2 3 4 5 6 7 8 9 10 11 [VERBOSE-2:ui_dart_state.cc(177)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 112 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views. #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) #2 ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:112:12) #3 _ChatRoomState.didChangeMetrics (package:polars_app/pages/chat/chat_room.dart:708:27) #4 WidgetsBinding.handleMetricsChanged (package:flutter/src/widgets/binding.dart:571:16) #5 _rootRun (dart:async/zone.dart:1190:13) #6 _CustomZone.run (dart:async/zone.dart:1093:19) #7 _CustomZone.runGuarded (dart:async/zone.dart:997:7) #8 _invoke (dart:ui/hooks.dart:251:10) #9 _updateWindowMetrics (dart:ui/hooks.dart:53:3) 解决：在访问maxScrollExtent属性前一定要判 https://index.zshipu.com/geek/post/flutter/flutter-websocket/ Tue, 05 Jan 2021 11:44:00 +0000 https://index.zshipu.com/geek/post/flutter/flutter-websocket/ 目的：实现客户端与服务端的实时通讯，基于TCP协议 与keep-alive区别：keep-alive机制会连接一小段时间，最终会断开，ws协议不会断开 原理：通过一条特殊的http协议请求进行握手后，服务端支持ws协议，则进行协议升级，利用http创建的tcp连接，实现长连接。 步骤分 https://index.zshipu.com/geek/post/flutter/flutter-book/ Tue, 05 Jan 2021 11:15:43 +0000 https://index.zshipu.com/geek/post/flutter/flutter-book/ 国内第一本开源的电子书，也有实体书，特此记录 在线编辑步骤 npm i -g gitbook-cli gitbook install #安装本书构建所要依赖的插件 gitbook serve 来源：https://github.com/flutterchina/flutter-in-action https://index.zshipu.com/geek/post/flutter/flutter-dio-net/ Tue, 05 Jan 2021 10:54:40 +0000 https://index.zshipu.com/geek/post/flutter/flutter-dio-net/ 在给app的网络请求添加loading过程中，发现一个封装更加完善的网络三方库，里面有很多值得借鉴的细节，特此记录 优点： 默认自带loading，如果单个请求不想要loading，可以传递参不显示，自己封装的目前全部显示loading 更加友好的控制台json打印 封装了公共参数 响应拦 https://index.zshipu.com/geek/post/flutter/flutter-padding/ Tue, 05 Jan 2021 10:43:56 +0000 https://index.zshipu.com/geek/post/flutter/flutter-padding/ 如果一个组件没有调整内边距的属性，那么可以在它的外层加一层Padding，达到调整位置的效果，效果等同于放到Container里，比Container更轻量级 1 2 3 4 Padding( padding: EdgeInsets.all(10), child: Text('这是一段测试文字'), ) https://index.zshipu.com/geek/post/flutter/flutter-list-title/ Tue, 05 Jan 2021 10:34:14 +0000 https://index.zshipu.com/geek/post/flutter/flutter-list-title/ 该组件可以用在container和card组件里，默认有大标题和小标题属性，无需再进行text上下排列组合 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ ListTile( title: Text("张三",style: TextStyle(fontSize: 28)), subtitle: Text("董事长"), ), Divider(), ListTile( title: Text("电 https://index.zshipu.com/geek/post/flutter/flutter-card-widget/ Tue, 05 Jan 2021 10:27:30 +0000 https://index.zshipu.com/geek/post/flutter/flutter-card-widget/ 在开发过程中，Container组件使用多了，会有一些重复的代码，比如矩形边框和圆角，需要额外加decoration,使用card已经默认加上了边框和阴影 1 2 3 4 Card( margin: EdgeInsets.all(10), child: ... ) https://index.zshipu.com/geek/post/flutter/flutter-radio/ Tue, 05 Jan 2021 10:10:26 +0000 https://index.zshipu.com/geek/post/flutter/flutter-radio/ 在一个数组容器里放置两个及其以上radio，当radio的group value和自己value相等时，便是选中状态 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 int groupValue = 1; _onChange(value){ if(mounted) setState(() { groupValue = value; }); } Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Radio( value: 1, groupValue: groupValue, onChanged: (T) => _onChange(T), ), Radio( value: 2, groupValue: groupValue, onChanged: (T) => _onChange(T), ), Radio( value: 3, groupValue: groupValue, onChanged: (T) => _onChange(T), ), ], ) 参考：h https://index.zshipu.com/geek/post/flutter/flutter-only-border/ Tue, 05 Jan 2021 10:06:41 +0000 https://index.zshipu.com/geek/post/flutter/flutter-only-border/ 取用圆角类的only属性，左上，右上，左下，右下，此处圆角半径也是一个类 1 2 3 4 BorderRadius.only( topLeft: Radius.circular(8.w), topRight: Radius.circular(8.w), ) 全部圆角则取all 1 2 3 BorderRadius.all( Radius.circular(8.w) ) https://index.zshipu.com/geek/post/flutter/flutter-random-color/ Tue, 05 Jan 2021 10:00:03 +0000 https://index.zshipu.com/geek/post/flutter/flutter-random-color/ 在listview或gridview中，用index去获颜色，挨个取一遍 1 Colors.primaries[index % Colors.primaries.length] https://index.zshipu.com/geek/post/flutter/generate-gdart-file/ Fri, 25 Dec 2020 13:17:10 +0000 https://index.zshipu.com/geek/post/flutter/generate-gdart-file/ 首先自己写好模型类模板代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import 'package:json_annotation/json_annotation.dart'; part 'buy_record_data.g.dart'; ///标志class需要实现json序列化功能 @JsonSerializable() class BuyRecordData { ///属性 List<BuyRecordEntity> entities; /// 构造函数 BuyRecordData(this.entities); /// 这个函数在.g.dart中，命名就是类名+FromJson /// 直接写就行 报错也没关系 生成.g.dart文件之后就好了 factory BuyRecordData.fromJson(Map<String, dynamic> json) => _$BuyRecordDataFromJson(json); Map<String, dynamic> toJson() https://index.zshipu.com/geek/post/flutter/flutter-render-theory/ Wed, 02 Dec 2020 23:35:58 +0000 https://index.zshipu.com/geek/post/flutter/flutter-render-theory/ 渲染过程会生成三棵树 widget树 element树 render object树 提高buid效率，在build方法中尽量少做事，层级越简单越好 setState方法尽量下放到底层节点 尽量减少重绘区域，使用repaint boundry 减少离屏渲染 比如save layer，clip path， 减少透明度使用，因为每 https://index.zshipu.com/geek/post/flutter/dart-enum/ Wed, 02 Dec 2020 08:03:53 +0000 https://index.zshipu.com/geek/post/flutter/dart-enum/ 1 2 3 4 5 6 7 8 enum MediaType { movie, //0 shortVideo, //1 other, //2 } var videoType = MediaType.values[0]; // videoType == movie 定义枚举和OC差别不大，取值的时候不可以直接和int比较，需要从枚举数组中根据index拿出来，比OC多了一步 https://index.zshipu.com/geek/post/flutter/flutter-components/ Fri, 27 Nov 2020 11:14:54 +0000 https://index.zshipu.com/geek/post/flutter/flutter-components/ sliverList A sliver that places multiple box children in a linear array along the main axis. Each child is forced to have the SliverConstraints.crossAxisExtent in the cross axis but determines its own main axis extent. SliverList determines its scroll offset by “dead reckoning” because children outside the visible part of the sliver are not materialized, which means SliverList cannot learn their main axis extent.Instead,newly materialized children are placed adjacent to existing children. https://index.zshipu.com/geek/post/flutter/flutter-action-sheet/ Thu, 26 Nov 2020 18:51:55 +0000 https://index.zshipu.com/geek/post/flutter/flutter-action-sheet/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 //函数 _showCupertinoActionSheet() async{ var result = await showCupertinoModalPopup( context: context, builder: (context) { return CupertinoActionSheet( title: Text('标题'), message: Text('内容'), actions: <Widget>[ CupertinoActionSheetAction( child: Text( '标题一', style: TextStyle( color: Color(0xFF00C599) ), ), onPressed: () { Navigator.of(context).pop('delete'); }, isDefaultAction: true, ), CupertinoActionSheetAction( child: T https://index.zshipu.com/geek/post/flutter/fijkplayer-off/ Wed, 25 Nov 2020 23:49:43 +0000 https://index.zshipu.com/geek/post/flutter/fijkplayer-off/ 两种方案 1.借用第三方插件，让当前页面保持常量，别的页面跟随系统 wakelock: ^0.1.4+2 Wakelock.enable(); Wakelock.disable(); 2.调用fijkplayer自身的常量参数 二选一 await player.setOption(FijkOption.hostCategory, "request-screen-on", 1); FijkPlugin.keepScreenOn ; 参考：https://www.jianshu.com/p/8750de450850 https://fijkplayer.befovy.com/docs/zh/host-option.html#gsc.tab=0 https://index.zshipu.com/geek/post/flutter/pubspec-error/ Wed, 25 Nov 2020 09:27:09 +0000 https://index.zshipu.com/geek/post/flutter/pubspec-error/ 昨天以为pubspec.lock文件和cocoapods的profile.lock文件性质一样，可以生成，所以删除，结果遇见了编译报错，即使在执行了 flutter pub get 命令重新生成后，经过一番研究和队友协助，找到是这个问题，把老的恢复回来工程编译正常，下面是报错的关键字 Execution failed for task ':app:processDebugManifest'. > Manifest merger failed : Attribute provider... https://index.zshipu.com/geek/post/flutter/flutter-tips/ Tue, 24 Nov 2020 11:50:49 +0000 https://index.zshipu.com/geek/post/flutter/flutter-tips/ 在工程文件夹内，git管理，忽略pubspec.lock文件 ，运行 flutter pub get /ios文件夹里，忽略Pods文件夹，Podfile.lock文件，*.xcworkspace文件,运行 pod install https://index.zshipu.com/geek/post/flutter/listview-headerview/ Fri, 20 Nov 2020 23:24:35 +0000 https://index.zshipu.com/geek/post/flutter/listview-headerview/ body: CustomScrollView( slivers: <Widget>[ SliverGrid.count( //具体的配置 ), //列表 SliverFixedExtentList( delegate: SliverChildBuilderDelegate( (context, index) => ConversationListItem( delegate: this, conversation: conList[index] ), childCount: conList.length, ), itemExtent: 100, ), ], ), 解析：大的容器叫做custom scroll view,子控件叫做slivers，是一个数组，在数组里面从上到下排布sliver控件，有sliver grid，有sliver fixed extent list 效果大概长这样 https://index.zshipu.com/geek/post/flutter/flutter-btn-delegate/ Thu, 19 Nov 2020 22:43:34 +0000 https://index.zshipu.com/geek/post/flutter/flutter-btn-delegate/ 在ios中，通常用block或者代理去实现，在flutter中，外部实现一个方法，把这个方法传给按钮，按钮内部用callback接受，ontap方法调用即可，实现如下 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; //定义函数类型 typedef StringValue = void Function(String); class ImageBtn extends StatelessWidget { //作为属性 StringValue callback; ImageBtn({Key key,this.callback}) : super(key: key); @override Widget build(BuildContext context) { return new GestureDetector( onTap: () { print('MyButton was tappedq!'); //调用 this.callback("testString"); }, child: ... https://index.zshipu.com/geek/post/flutter/flutter-expanded/ Thu, 19 Nov 2020 22:30:23 +0000 https://index.zshipu.com/geek/post/flutter/flutter-expanded/ Column( children: <Widget>[ Expanded(child: Image.asset('assets/images/$imageName.png') ), Text( this.model.title, style: TextStyle( fontSize: 15, color: Colors.white, ), ), ], ), 注解： column是一个垂直的容器，子控件放在children里面 要想让图片居中，需要放在expanded容器里面,官方定义：expanded is a widget that expands a child of a row,column,or flex so that the child fills the available space. https://index.zshipu.com/geek/post/flutter/flutter-page-is-current/ Thu, 19 Nov 2020 22:18:51 +0000 https://index.zshipu.com/geek/post/flutter/flutter-page-is-current/ ModalRoute.of(context).isCurrent 解析：由于页面的组合都是由路由管理的，所以把当前的context传给路由，让路由去判断是否在最顶端，这个路由叫做模态路由 https://index.zshipu.com/geek/post/flutter/flutter-tabbar-click-bug/ Wed, 18 Nov 2020 16:14:48 +0000 https://index.zshipu.com/geek/post/flutter/flutter-tabbar-click-bug/ 原因：点击本身出发一次监听，随之产生的动画效果再次出发监听，如果是滑动，仅触发一次监听 解决：看下点击的索引和动画值对不对，过滤掉点击的listen，只显示动画的listen _tabController.addListener(() { if(_tabController.index == _tabController.animation.value){ int index = _tabController.index; print("====================当前点击了$index=== https://index.zshipu.com/geek/post/flutter/flutter-thread-delay/ Wed, 18 Nov 2020 12:21:12 +0000 https://index.zshipu.com/geek/post/flutter/flutter-thread-delay/ 延迟加载 //延迟1秒加载 Future.delayed(Duration(seconds: 1), (){ //do sth }); 使用场景： 同时执行toast和导航栏页面切换，会导致卡顿，可用延迟其中一个方法，避免同时执行 https://index.zshipu.com/geek/post/flutter/flutter-gradient/ Wed, 18 Nov 2020 12:20:54 +0000 https://index.zshipu.com/geek/post/flutter/flutter-gradient/ 线性渐变 开始位置 结束位置 开始结束点 颜色 LinearGradient( //渐变位置 begin: Alignment.topLeft, //左上 end: Alignment.bottomRight, //右下 stops: [0.0, 1.0], //[渐变起始点, 渐变结束点] //渐变颜色[始点颜色, 结束颜色] colors: [Color.fromRGBO(253, 1, 129, 1), Color.fromRGBO(206, 21, 240, 1)] ) https://index.zshipu.com/geek/post/flutter/flutter-layout/ Tue, 17 Nov 2020 17:38:24 +0000 https://index.zshipu.com/geek/post/flutter/flutter-layout/ 基本上由widget组成，widget有stateless和stateful两种，常用的基础widget有 container：矩形元素，可以设置背景边框阴影 row，column：让子控件水平和垂直布局，flex布局原理 stack：可以堆砌widget，用上下左右来定位 text：一 https://index.zshipu.com/geek/post/flutter/fluter-source/ Thu, 12 Nov 2020 21:31:18 +0000 https://index.zshipu.com/geek/post/flutter/fluter-source/ 咸鱼flutter技术文章集合：https://www.yuque.com/xytech/flutter 关于ffmpeg一位老师的博客：https://blog.csdn.net/leixiaohua1020 b站老师视频相关https://yinwenjie.blog.csdn. https://index.zshipu.com/geek/post/flutter/flutter-points/ Thu, 12 Nov 2020 21:05:29 +0000 https://index.zshipu.com/geek/post/flutter/flutter-points/ 下载过来，一定要把pod和workspace删掉重新安装，否则会出现奇奇怪怪的问题，比如目标系统不对应，不适配arm64架构等： The iOS deployment target ‘IPHONEOS_DEPLOYMENT_TARGET’ is set to 8.0 | undefined symbols for architecture arm | https://index.zshipu.com/geek/post/flutter/pub-get-is-slow/ Thu, 12 Nov 2020 19:30:00 +0000 https://index.zshipu.com/geek/post/flutter/pub-get-is-slow/ 分析：从开发者仓库网站下载依赖比较慢，网络问题 解决： 更换数据源地址 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 最后翻墙运行 参考：https://www.askmaclean.com/archives/flutter-pub-get-slow.html https://index.zshipu.com/geek/post/flutter/flutter-pod-nil-class/ Mon, 01 Jan 0001 00:00:00 +0000 https://index.zshipu.com/geek/post/flutter/flutter-pod-nil-class/ 错误描述: pod install时发生错误 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 ### Error ​``` NoMethodError - undefined method `size' for nil:NilClass /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/macho_file.rb:455:in `populate_mach_header' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/macho_file.rb:233:in `populate_fields' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/macho_file.rb:55:in `initialize_from_bin' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/macho_file.rb:33:in `new_from_bin' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/fat_file.rb:365:in `block in populate_machos' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/fat_file.rb:364:in `each' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/fat_file.rb:364:in `populate_machos' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/fat_file.rb:156:in `populate_fields' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho/fat_file.rb:95:in `initialize' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho.rb:31:in `new' /Library/Ruby/Gems/2.6.0/gems/ruby-macho-1.4.0/lib/macho.rb:31:in `open' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/xcode/linkage_analyzer.rb:16:in `dynamic_binary?' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/sandbox/file_accessor.rb:171:in `block in vendored_dynamic_frameworks' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/sandbox/file_accessor.rb:170:in `select' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/sandbox/file_accessor.rb:170:in `vendored_dynamic_frameworks' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/sandbox/file_accessor.rb:179:in `vendored_static_frameworks' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/sandbox/file_accessor.rb:292:in `vendored_static_artifacts' /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.0/lib/cocoapods/installer/xcode/target_validator.rb:82:in `each'