Widget Circular Animator: A Dynamic Animation Library for Flutter

Published on by Flutter News Hub

Widget Circular Animator: A Dynamic Animation Library for Flutter

The widget_circular_animator package provides a user-friendly widget that adds eye-catching circular animations to any widget in your Flutter app. Inspired by a captivating Lottie animation, this widget aims to enhance the user experience with modern and engaging UI elements.

Features

  • Dynamic Animation: Bring life to your widgets with seamless circle animations.
  • Configurable Widget: Customize colors, icon sizes, and animation duration to align with your specific use case.
  • Supported Flutter Curves: Leverage the built-in Flutter curve animations to create a variety of animation effects.
  • Animation Direction Control: Reverse or maintain the animation direction based on your preference.

Installation

To integrate the widget_circular_animator into your Flutter project, add the following to your pubspec.yaml file:

dependencies:
  widget_circular_animator: ^1.0.0

Usage

Using the widget_circular_animator is straightforward. Here's how you can implement it:

import 'package:widget_circular_animator/widget_circular_animator.dart';

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,
      ),
    ),
  ),
),

Supported Animations

The widget_circular_animator supports all Flutter curve animations. To access them, use the Curves class:

innerAnimation: Curves.bounceIn,
outerAnimation: Curves.linear,

Widget Properties

  • child: The widget you wish to animate.
  • innerIconsSize: Customizes the inner icons' size.
  • outerIconsSize: Customizes the outer icons' size.
  • innerAnimation: Defines the animation type for the inner circle.
  • outerAnimation: Defines the animation type for the outer circle.
  • innerColor: Sets the inner circle's stroke color.
  • outerColor: Sets the outer circle's stroke color.
  • innerAnimationSeconds: Adjusts the inner animation duration.
  • outerAnimationSeconds: Adjusts the outer animation duration.
  • size: Controls the width and height of the entire widget.
  • reverse: Toggles the animation direction (reverse or forward).

Conclusion

The widget_circular_animator empowers Flutter developers with a simple yet powerful tool to enhance their UI designs. Its dynamic animations, customization options, and extensive animation support make it an ideal choice for creating engaging and modern applications.

Flutter News Hub