A new Flutter widget animator inspired by this lottie animation. [https://lottiefiles.com/3619-profile]
Dynamic Animation
The widget helps to animate any widget you have such as a profile or an image or anything else with a simple modern animation to help you build a better UI in your next app.
Configurable Widget
you can customize anything in this widget, inner and outer colors, icons size and animation duration to suits your applications use-case.
Supports all flutter curves animations
Now you can change the circles animations type, you can see all the supported animations here curves-animation
Change animation direction
Choose the animation direction, reverse or same direction
Add this to your package's pubspec.yaml file:
dependencies:
widget_circular_animator: _latest_versionNow in your Dart code, you can use:
import 'package:widget_circular_animator/widget_circular_animator.dart';Details see pub.dev.
The widget_circular_animator package itself is very simple to use, just like a common statefulWidget:
Center(
child: WidgetCircularAnimator(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.grey[200]),
child: Icon(
Icons.person_outline,
color: Colors.deepOrange[200],
size: 60,
),
),
)),
See the full example circular_animator_example.
This widget supports all flutter curve animations. You can see all the supported animations here https://api.flutter.dev/flutter/animation/Curves-class.html.
child
Widget
( required )
widget_circular_animator is mainly configured by passing a widget value to be the widget that we will surround with our animations.
innerIconsSize
double
Change the icons size for the inner circle
outerIconsSize
double
Change the icons size for the outer circle
innerAnimation
Curve
Please use the animations class in the current library for example
innerAnimation: Curves.bounceIn,outerAnimation
Curve
Please use the animations class in the current library for example.
outerAnimation: Curves.linear,
innerColor
Color
Change the inner circle stroke color
outerColor
Color
Change the outer circle stroke color
innerAnimationSeconds
int
Change the inter circle animation duration
outerAnimationSeconds
int
Change the outer circle animation duration
size
double
The whole widget width and height.
reverse
double
The animation direction.
widget_circular_animator_medium
If you have any suggestions or requests, please open an issue.