带有抖动图像的自定义启动画面

Question

我正在开发一个需要在我的主屏幕出现之前进行异步加载的应用程序。 它初始化了一些提供程序类，因此我没有在main() 中进行初始化并使用本机启动画面（我无法获得提供程序所需的BuildContext），而是决定创建自己的启动画面作为小部件。

在我使用 Image.asset() 添加徽标之前，这种方法效果很好。

图像加载太慢，通常比我最初的初始化慢，这意味着我的启动屏幕保持空白。

仅供参考，这是我的初始屏幕布局：

Container(
  alignment: Alignment.center,
  color: Theme.of(context).scaffoldBackgroundColor,
  child: Center(
    child: Image.asset("logo.png"),
  )
);

我遇到了precacheImage()这个函数，但是这也需要BuildContext，所以在闪屏出现之前不能使用。

有没有更好的方法来解决这个问题？提前致谢。

Answer 1

我的初始屏幕构建是相似的。您的徽标的文件大小是多少？

更新：我的徽标是 512x512 和 32k。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: UniqueKey(),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  decoration: null,
                  margin: EdgeInsets.symmetric(horizontal: _margin),
                  child: Image.asset("assets/meds.png"),
              ),
              SizedBox(
                height: 10,
              ),
              SpinKitDoubleBounce(
                color: Theme.of(context).primaryColor,
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 2

在应用启动和 Flutter 首次绘制之间总是存在延迟，通过原生实现启动画面，您将获得更好的性能。

https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52

Answer 3

我将跳过明显的解决方案，例如减小图像大小.. 你确定你在正确的地方使用precacheImage吗？

正确的用法是这样的：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    precacheImage(AssetImage("assets/images/logo.png"), context);
    return MaterialApp(
      title: 'MyApp',
      theme: myTheme,
      home: MySplashScreen(),
    );
  }
}

然后在 MySplashScreen 中执行以下操作：

ImageProvider logo = AssetImage("assets/images/logo.png");

另外，这听起来可能很奇怪，但如果您没有看到改进，请尝试使用 jpg 而不是 png。

附：如果你在调试模式下运行它可能会很慢，因为在这种模式下如何处理 Flutter，生产速度要快很多倍，请在真实设备上尝试flutter run --release