Flutter 项目的一些问题记录

While there is life,there is hope.
一息若存,希望不灭。

前言

基于flutter每个版本可能会出现语法或者底层变动导致的项目的不正确性,记录的问题可能因版本不会出现同类问题,因此记录一下当前项目的版本flutter为1.17.1,dart为2.8.2。

记录

一:flutter中关于手势事件onTap刚进build就会调用

GestureDetector中的onTap用的是方法时,会在build时直接调用一次,在(){}里调用即可
onTap: () {
     // 不会出现问题
     _xxxfunc();
},
// 会直接调用
onTap: _xxxfunc  

二:flutter Android的webview会受到iOS的info.plist的io.flutter的缺失导致加载不出来

// 在info.plist里加入
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

三:flutter中关于软键盘弹起导致Android页面闪动的问题

原因:
1. 当布局高度写死时,例如设置为屏幕高度,这时候键盘弹起页面上会出现布局overflow的提示
2. 软键盘弹起后遮挡输入框
在flutter中,键盘弹起时系统会缩小Scaffold的高度并重建界面导致Android的闪动,iOS不会因为键盘重绘界面

方法1:
overflow提示的两种办法:
1)把Scaffold的resizeToAvoidBottomInset属性设置为false,这样在键盘弹出时将不会resize
2)把写死的高度改为 原高度 - MediaQuery.of(context).viewInsets.bottom,键盘弹出时布局将重建,
而这个MediaQuery.of(context).viewInsets.bottom变量在键盘弹出前是0,键盘弹起后的就是键盘的高度

方法2:
将输入框放进可滚动的Widget中即可,当输入框获取焦点后,系统会自动将它滑动到可视区域

四:flutter中double转成int

如果是使用 num 声明的变量,可以随意的转换类型,
但是如果是使用了int 或者 double 明确的声明,那么就只能通过截取手段了,所以一般情况使用num去接收;
// 截取方法:
String str = double.toStringAsFixed(0);
int value = int.tryParse(str);

五:flutter tabBarView切换页面 页面会重绘

方法1:
1).被重绘的tab页要 混入AutomaticKeepAliveClientMixin
// with 混入
class DevicePageLayout extends  WidgetState<DevicePage>  with AutomaticKeepAliveClientMixin

2).实现wantKeepAlive方法 ,返回值改成true
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;

3).build中加入 super.build(context);
@override
Widget build(BuildContext context) {
    super.build(context);
}

方法2:
使用IndexedStack来保证页面不会被重绘。

六:flutter Text带黄线

decoration: TextDecoration.none,

七:flutter text overflow 总是会超出布局

今天使用横向布局row 并且在里面添加了一个图标和一行文字,但是总是会超出布局,即使设置了overflow再调试时也会出现如下的情况

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
       Image.asset(
           "images/list_icon.png",
           width: 10,
           height: 10,
           fit: BoxFit.fill,
       ),
       Text(
           "  "+hotService[index]['servicename'],
           maxLines: 1,
           overflow: TextOverflow.ellipsis,
       )
   ],
),

解决方法:
在Text外面包一层Expanded

八:iOS和Android打出的release包太大

1、删除无用代码和无用资源
2、压缩资源图片或者使用svg格式图片
3、服务端下发插件或者资源
如果上面方法不理想的话,通过iOS和Android各自减少cpu架构可以极大的减少app体积

Android方案:

1、so优化:Flutter打包Apk会包含三种CPU架构信息以适配不同架构的设备(x86_64,arm64-v8a,armeabi-v7a),目前大部分手机都是armeabi-v7a这个架构,所以我们可以分架构分别打包,包体减小较明显,但是需要舍弃小部分机型

打包命令:flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi

  • 首先 flutter build apk 表示当前构建 release 包;
  • 后面 android-arm,android-arm64,android-x64则是指定生成对应架构的release包;
  • 最后的 --split-per-abi则表示告知需要按照我们指定的类型分别打包,如果移除则直接构建包含所有 CPU 架构的 Apk 包。

2、混淆:可以增加逆向难度还有减少Apk大小

混淆打包命令():flutter build apk --obfuscate --split-debug-info=xx

  • --obfuscate:开启混淆操作;
  • --split-debug-info=:将因混淆生成的 map 符号表缓存到此位置

so优化和混淆同时使用打包命令:flutter build apk --obfuscate --split-debug-info=debugInfo --target-platform android-arm,android-arm64,android-x64 --split-per-abi

PS:经过测试android原debug包 104.9MB ,release包 73.5MB ,如果仅仅使用v7a架构包大小为 29.1MB

iOS方案:

1、配置编译选项

Build Settings->Generate Debug Symbols 设置为NO,这个配置选项应该会让你减去小半的体积。

2、舍弃架构armv7

Build Settings->Valid Architectures 删除armv7 cpu架构

3、编译器优化级别

Build Settings->Optimization Level有几个编译优化选项,release版选择Fastest, Smalllest[-Os],这个选项会开启那些不增加代码大小的全部优化,并让可执行文件尽可能小

4、去除符号信息

Strip Debug Symbols During Copy 和 Symbols Hidden by Default 在 release 版本设为YES,可以去除不必要的调试符号。

5、release缩减 product

Build Settings->Strip Linked Product:debug下设为NO,release下设为YES,用于release模式下缩减app的大小.

九:flutter判断iOS机型

// 在SafaArea中获取不到
if (Platform.isIOS) {
  final double bottomPadding = MediaQuery.of(context).viewPadding.bottom;
  top = bottomPadding >= 34 ? 40 : 0;
  height = bottomPadding >= 34 ? 680 : 580;
  rechargeHeight = bottomPadding >= 34 ? 280 : 260;
}

十:升级flutter为1.20.0,运行项目报错

解决过程:
修改项目目录android/build.gradle里的maven仓库 无效!!!

flutter的issue搜索问题: Could not resolve the package ‘characters’ in ‘package:characters/characters.dart’.

解决方法,运行如下命令:
flutter pub cache repair
flutter clean

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269