ayyoub-coder / flutter_circular_animator

A pre-built Flutter circular animator can suit your new profile view or your any other widgets

widget_circular_animator

A new Flutter widget animator inspired by this lottie animation. [https://lottiefiles.com/3619-profile]

Features

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

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  widget_circular_animator: _latest_version

Now in your Dart code, you can use:

import 'package:widget_circular_animator/widget_circular_animator.dart';

Details see pub.dev.

Usage

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.

Supported animations

This widget supports all flutter curve animations. You can see all the supported animations here https://api.flutter.dev/flutter/animation/Curves-class.html.

Widget Properties

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.

Blog

widget_circular_animator_medium

---

If you have any suggestions or requests, please open an issue.