I am creating an app, it has story parts like Instagram. I'm searching a package for it. Loading circle animation.

CodePudding user response：

You can you this package from pubdev

dashed_circle: ^0.0.1

class _MyPageState extends State<MyPage> with SingleTickerProviderStateMixin {
Variables
Animation gap;
Animation base;
Animation reverse;
AnimationController controller;

 @override
  void initState() {
   super.initState();
   controller = AnimationController(vsync: this, duration: Duration(seconds: 4));
   base = CurvedAnimation(parent: controller, curve: Curves.easeOut);
   reverse = Tween<double>(begin: 0.0, end: -1.0).animate(base);
   gap = Tween<double>(begin: 3.0, end: 0.0).animate(base)
        ..addListener(() {
          setState(() {});
        });
  controller.forward();
}


 @override
void dispose() {
 controller.dispose();
 super.dispose();
 }

@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: Container(
    alignment: Alignment.center,
    child: RotationTransition(
      turns: base,
      child: DashedCircle(
        gapSize: gap.value,
        dashes: 40,
        color: Color(0XFFED4634),
        child: RotationTransition(
          turns: reverse,
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: CircleAvatar(
              radius: 80.0,
              backgroundImage: NetworkImage(
                "https://images.unsplash.com/photo-1564564295391-7f24f26f568b"
              ),
            ),
          ),
        ),
      ),
    ),
  ),
 );
}
 }

CodePudding user response：

I think the best way would be to export the animation and use lottie package to render it on screen.