跳到主要内容

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