enter image description here

Hello, im creating an app it has story part like instagram. Im searching package for it. Loading circle animation. can anyone tell me any package for this? Thanks.

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.