Flutter Custom Loader

Here we will see how to create a custom loader in flutter. It’s easy to create one. We just create a stateless class and inside this we may use CircularProgressIndicator.

class CustomLoader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Container(
      height: 100, width: 100,
      decoration: BoxDecoration(color: Theme.of(context).cardColor, 
          borderRadius: BorderRadius.circular(Dimensions.RADIUS_SMALL)),
      alignment: Alignment.center,
      child: CircularProgressIndicator(),
    ));
  }
}

CircularProgressIndicator is inside a Container(). So, we would be able to style as we want. The radius could be anything based on your needs.

The BoxDecoration makes it more interesting with card color.

If you want to know how to use LinearProgressIndicator press here