FLUTTER

How to Create Instagram like Story Circle Animation in Flutter?

This browser does not support the video element.

Image shows implementation of the animated story circle

Animation always adds an extra value to the UX. In this tutorial we are doing a Flutter UI challenge recreating the story circle animation of Instagram using Flutter.

Install

For implementing the animation, we will be using the dashed_circle package for creating the dashed lines around the image. The first step is to add the package to pubspec.yaml as shown below.

Import

Import the package at the top of the dart file.

Widget

This is the entire widget used for creating the instagram story circle animation in Flutter. The animation has 3 Animations:

1. base - To rotate the dashed border
2. reverse - To keep the image stable without rotating along the dashes. Basically this gives a counter rotation cancelling the rottion created by base.
3. gap - Reduces the gap between dashes

You can adjust the number of dashes, color of the dashed border, stroke-width and image size by changing the corresponding attributes inside the DashedCircle widget.