loading icon before SVG image Loading

Admin 1
Viewed 621

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(),
            ),
    );
dart flutter svg
3 Answers

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"),
),
user_148180330

You can pass a placeholderBuilder to your SvgPicture.asset like this:

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

You can also wrap the Icon with a SizedBox if you need to comply with a certain size, or replace it by any other widget that you wish.

More info about the widget you're using is available in its API docs.

user_83118580

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',
      ),
    ))
user_131895220
Related