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.
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 the package at the top of the dart file.
This is the entire widget used for creating the instagram story circle animation in Flutter. The animation has 3 Animations:
- base - To rotate the dashed border
- reverse - To keep the image stable without rotating along the dashes. Basically this gives a counter rotation cancelling the rottion created by base.
- 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.
How to Make Glowing Play Button Animation in Flutter?
This widget can be used in a UI as play button for a music player, start button for games or even as loading indicator.
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter
How to do hero animation in Flutter?
Step by step guide on how to do hero animation in Flutter