SVG 图像加载前的加载图标

Question

我创建了一个用于背景的SVG图像，但它需要一些时间才能加载。问题是：当它尚未加载时，所有小部件都会随机出现。我只需要在图像加载完成后使用loader来显示页面小部件。 代码如下：

Scaffold(
      appBar: const _CustomNotificationAppBar(),
      body: isFinished
          ? SingleChildScrollView(
              child: Stack(
                children: [
                  //notification background
                  Opacity(
                    opacity: 0.42,
                    child: SvgPicture.asset(
                      'assets/images/notification_background.svg',
                    ),
                  ),
                    IconButton(
                      icon: const Icon(
                      Icons.notifications_active_outlined,
                      ),
                    onPressed: () {})),
                ],
              ),
            )
          : const Center(
              child: CircularProgressIndicator(),
            ),
    );

- user15543853

---

将其放入容器中，就可以运行。 - Aman Verma

请接受此解决方案 @AmanVerma - user15543853

当然，作为答案发布。 - Aman Verma

Answer 1

如果我理解得好，并且只要你的SVG从设备“asset”加载，首先就不应该有延迟。

我认为问题在于你的模拟器或物理设备太慢了，而且你可能只在调试时遇到这个问题。

尝试运行flutter build APK并安装生成的APK到你的手机上，检查问题是否仍然存在。

但是你也可以通过以下方式实现。

SvgPicture.asset(
  'assets/images/notification_background.svg',
  placeholderBuilder: (context) => Text("I am Loading"),
), 

- Moaid ALRazhy

---

有时从资源中加载图像需要可见的时间。为此提供一个占位符总是很好的选择。 - SugaR256

同样的问题，我通过一个具有宽度和高度的容器来解决了它！ - user15543853

Answer 2

您可以像这样将placeholderBuilder传递给您的SvgPicture.asset：

SvgPicture.asset(
  'assets/images/notification_background.svg',
  placeholderBuilder: (context) => Icon(Icons.your_desired_icon),
),

如果需要符合特定大小，您也可以使用 SizedBox 包装 Icon，或将其替换为其他任何小部件。

有关您正在使用的小部件的更多信息，请查看其API文档。

- SugaR256

---

同样的问题，我通过一个具有宽度和高度的容器来解决了它！非常感谢。 - user15543853

Answer 3

你可以将它包裹在一个容器中，它就会起作用。

例如：

Container(
        //height :desired height,
        //width  : desired width
        child: Opacity(
      opacity: 0.42,
      child: SvgPicture.asset(
        'assets/images/notification_background.svg',
      ),
    ))

- Aman Verma