dart 在SVG图像之前加载图标加载

vh0rcniy  于 2023-05-04  发布在  其他
关注(0)|答案(3)|浏览(168)

我创建了一个SVG图像作为背景,但它在一段时间后加载,问题是:当它还没有被加载时,所有窗口小部件随机出现。我只需要一个加载器后,图像加载它页面部件出现。验证码为:

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(),
            ),
    );
5kgi1eie

5kgi1eie1#

好吧,如果我很好地理解你,只要你的SVG是从设备“资产”加载,首先不应该有延迟。
我认为问题是你的模拟器或物理设备太慢,你可能会面临这个问题,在调试只
尝试运行flutter build APK并在您的手机中安装生成的APK,并检查问题是否仍然存在。
但是你也可以这样做

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

wztqucjr2#

你可以把它放在一个容器里,它会工作的。
例如:

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

whlutmcx3#

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

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

如果您需要符合特定的大小,您还可以使用SizedBox Package Icon,或者使用您希望的任何其他小部件替换它。
有关您正在使用的小部件的更多信息可以在它的API docs中找到。

相关问题