跳到主要内容

Flutter FAQ

图标修改和生成

  • 图标位于 ios/Runner/Assets.xcassets/AppIcon.appiconset
  • 生成脚本依赖 imagemagic
    • svg 需要编译的时候添加了 librsvg 支持
# macOS 安装 imagemagick
brew install imagemagick --with-librsvg

# 使用指定的图像和目录
# 默认会使用 logo.svg 并输出到当前目录
mkdir out
./gen.sh logo.png out

gen.sh

#!/bin/sh

SIZES=${SIZES:-"20x1 20x2 20x3 29x1 29x2 29x3 40x1 40x2 40x3 60x2 60x3 76x1 76x2 83.5x2 1024x1"}
PREFIX=${PREFIX:-"Icon-App"}
source=${1:-logo.svg}
dst=${2:-.}
for s in $SIZES;do
size=${s%x*}
scale=${s##*x}
resize=$(bc <<< ${size}*${scale} )
out=$dst/"$PREFIX-${size}x${size}@${scale}x.png"
echo Generate $out
convert $CONVERT_EXTRA "$source" -resize ${resize}x${resize} -unsharp 1x4 $out
done

闪屏修改

  • 闪屏图片位于 ios/Runner/Assets.xcassets/LaunchImage.imageset
  • 可以直接替代图片
  • 可以打开 ios/Runner.xcworkspace 在 xcode 中选择 Runner/Assets.xcassets 进行替换
  • 闪屏不做全屏可以选择一个合适大小的白色或透明背景即可
# 通过 logo 生成闪屏资源
# -background none 暴露 svg 的透明
CONVERT_EXTRA="-background none" PREFIX=LaunchImage SIZES="120x1 120x2 120x3" ./gen.sh logo2.svg out/
# 拷贝生成的 LaunchImage*.png 到 ios/Runner/Assets.xcassets/LaunchImage.imageset
# 并修改 Contents.json 指向正确的文件

闪屏尺寸

类型尺寸
1x320 x 480
2x640 x 960
Retina 4640 x 1136
Retina HD 5.51242 x 2208
Retina HD 4.7750 x 1334
Retina HD 5.52208 x 1242 (landscape)
iPad 1x768 x 1024
iPad 2x1536 x 2048
iPad 1x1024 x 768 (landscape)
iPad 2x2048 x 1536 (landscape)

制作 Gif

https://github.com/flutter/flutter/wiki/Making-animated-GIFs-of-Flutter-apps

TabBarView 内容图片会闪烁

  • 可以考虑预加载图片
var localImageConfiguration = createLocalImageConfiguration(context);
new AssetImage('assets/slides/2.png').resolve(localImageConfiguration);
new AssetImage('assets/slides/3.png').resolve(localImageConfiguration);

滚动监听

  1. 从 ScrollController 监听 ScrollPosition 来做这样的事, 或者直接监听 ScrollController 再获取 position 即可
  2. 通过 ScrollNotification 监听来进行布局调整会导致延迟, 因为接收到通知时已经渲染完毕.

嵌入 Web

添加到现有应用

Flutter 可以在网页上运行么

可以

不能, 并且也不打算

Tips

// unfocus
// https://github.com/flutter/flutter/issues/7247
FocusScope.of(context).requestFocus(new FocusNode());

// 不滚动
ListView(
physics: const NeverScrollableScrollPhysics()
)

onLongPress 不会释放

  • #17072
    • onTapUp 不会被触发
  • onPointerUp 会触发
Listener(
onPointerUp: (e) {
print("onPointerUp");
},
child: GestureDetector(
onTap: _onTap,
onLongPress: _onLongPress,
child: CircleAvatar(
radius: 30.0,
backgroundColor: Colors.white,
),
),
);

裁剪居中

https://stackoverflow.com/a/49523770/1870054

修改状态栏颜色

Request: API for changing the color of status bar

多个手势动作同时发生

https://stackoverflow.com/questions/50824208

ImportError: cannot import name _remove_dead_weakref

Traceback (most recent call last):
File "<input>", line 1, in <module>
File "/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/copy.py", line 52, in <module>
import weakref
File "/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/weakref.py", line 14, in <module>
from _weakref import (
ImportError: cannot import name _remove_dead_weakref

https://github.com/flutter/flutter/issues/17803

暂时只能通过卸载 python@2 解决

brew uninstall --ignore-dependencies python@2

手动指定 simulator

/usr/bin/xcrun simctl list --json devices | grep state