loading icon before SVG image Loading

Question

i am created an SVG image for background, but it is loaded after some time, the issue is: when it is not loaded yet all widgets appears randomly. i just need a loader after the image loaded it page widget appears. the code is:

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

Solution 1

You can wrap it in a Container, and it will work.

For eg:

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

Solution 2

well if I understands you well and as long as your SVG is loading from the device "asset", there should not be delay in first place.

I think the problem is you emulator or physical device is too slow , And you may face this problem in debug only

try to run flutter build APK and install that generated APK in your phone and check if problem remains.

however you can achieve that also like this

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

Comments

[Aman Verma]

wrapping it in a container , will work .

[Admin]

make it as a solution to accept it @AmanVerma

[Aman Verma]

Sure , posted as answer

[SugaR256]

Sometimes loading images from assets takes a visible amount of time. It's always good to provide a placeholder for that time.

[Admin]

the same problem i warped it by a container with width and height it works!

[Admin]

the same problem i warped it by a container with width and height it works! thanks a lot