Flutter Circular Progress Indicator Using Image

Question

I Want to use my App icon during the loading. How it can be implemented. Currently I am using Circular Progress Indicator.

return Center(
       child: CircularProgressIndicator(
               strokeWidth: 2));

Answer 1

If all you want is simple progress indicator you can use this

class ProgressWithIcon extends StatelessWidget {
  const ProgressWithIcon({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 50,
      height: 50,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Image.network(
            // you can replace this with Image.asset
            'https://avatars.githubusercontent.com/u/1393171?s=50&v=4',
            fit: BoxFit.cover,
            height: 30,
            width: 30,
          ),
          // you can replace
          const CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.orange),
            strokeWidth: 0.7,
          ),
        ],
      ),
    );
  }
}

But if you are looking for something complex I will suggest you to go with

• rive package
• lottie package

Answer 2

There various ways of implementing custom loaders. If your loader is animated then know the extension format of your loader. In my experience using a json animated loader like one with https://lottiefiles.com/ is using a package called lottie dependencies: lottie: ^1.2.1 If your loader is a plain image then you have an option to use a timer to display the image before an action is taken for instance await for some data from the internet. Let me know if you need more assistance