Flutter Circular Progress Indicator Using Image-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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