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

Answer 1

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