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