widget_circular_animator 1.0.0 copy "widget_circular_animator: ^1.0.0" to clipboard
widget_circular_animator: ^1.0.0 copied to clipboard

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]

pub

person clock person

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.

190
likes
160
pub points
88%
popularity

Publisher

verified publisherezaldeensahb.link

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, meta

More

Packages that depend on widget_circular_animator