Search packages, repositories and app categories

circular_rotation cover
Package detailsv0.0.2

circular_rotation

It is fully customizable package which allow you to set custom widget in circular manner.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
50
Likes
39
Pub points
150

Install package

flutter pub add circular_rotation

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

CircularRotation is a customizable Flutter package that enables developers to arrange widgets in a circular layout with full control over appearance and behavior. It supports dynamic customization, allowing users to define custom widgets, rotation angles, spacing, and animation effects. Ideal for creating interactive circular menus, navigation hubs, or visually engaging UI components. The package works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent performance and design. With intuitive APIs and smooth animations, it enhances user experience through elegant circular arrangements.

Use cases

  • Creating circular navigation menus
  • Designing interactive widget rings
  • Building animated circular sliders
  • Implementing radial selection interfaces
  • Developing dashboard widgets
  • Displaying circular image galleries

Key features

  • Fully customizable circular layouts
  • Support for custom widgets
  • Smooth rotational animations
  • Cross-platform compatibility
  • Configurable spacing and angles
  • Easy integration via pub.dev

Suitable for

  • UI designers seeking unique layouts
  • Developers building interactive dashboards
  • Apps requiring radial navigation
  • Projects focused on visual appeal
  • Teams using Flutter for multi-platform apps

Considerations

  • May impact performance with large numbers of widgets
  • Requires careful tuning for optimal animation smoothness
  • Limited documentation beyond basic usage
  • Best suited for moderate widget counts
  • Not ideal for complex hierarchical structures

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

circular_rotation

circular_rotation version circular_rotation Git Stars MIT License

Circular rotation, It is fully customizable package which allow you to set custom widget in circular manner. It has provision for moving like solar system. There is customizable properties like speed of each round, round color, position of circular widget etc.

Circular Rotation

Circular Rotation

Usage

Example
CircularRotation(
    defaultCircleStrokeWidth: 0.2,
    defaultCircleStrokeColor: Colors.white,
    startAnimation: true,
    repeatAnimation: true,
    firstCircleAnimationDuration: 5000,
    secondCircleAnimationDuration: 7000,
    thirdCircleAnimationDuration: 10000,
    centerWidget: Image.asset(
        CENTER_IMAGE,
        width: 96,
        height: 96,
    ),
    firstCircleWidgets: [],
    secondCircleWidgets: [],
    thirdCircleWidgets: [],
)
Parameters
visibleFirstCircle:
  • Visibility of first circle.
  • It contains bool value.
  • true = visible,
  • false = invisible.
visibleSecondCircle:
  • Visibility of second circle.
  • It contains bool value.
  • true = visible,
  • false = invisible.
visibleThirdCircle:
  • Visibility of third circle.
  • It contains bool value.
  • true = visible,
  • false = invisible.
firstCircleRadius:
  • Displays the first circle based on radius.
  • Radius starts from center.
  • It contains the double value.
secondCircleRadius:
  • Displays the second circle based on radius.
  • Radius starts from center.
  • It contains the double value.
thirdCircleRadius:
  • Displays the third circle based on radius.
  • Radius starts from center.
  • It contains the double value.
firstCircleRadians:
  • Displays the first circle widgets based on radians calculation.
  • It contains the double value.
secondCircleRadians:
  • Displays the second circle widgets based on radians calculation.
  • It contains the double value.
thirdCircleRadians:
  • Displays the third circle widgets based on radians calculation.
  • It contains the double value.
firstCircleWidgets:
  • Displays the first circle widgets.
  • It contains the List of Widgets.
secondCircleWidgets:
  • Displays the second circle widgets.
  • It contains the List of Widgets.
thirdCircleWidgets:
  • Displays the third circle widgets.
  • It contains the List of Widgets.
centerWidget:
  • Displays the widget at center of circle.
  • It contains the Widget.
defaultCircleStrokeColor:
  • Change the all circles stroke(line) color.
  • It contains Color value.
  • Default value is Colors.black
firstCircleStrokeColor:
  • Change the first circle stroke(line) color.
  • It contains Color value.
  • Default value is Colors.black
secondCircleStrokeColor:
  • Change the second circle stroke(line) color.
  • It contains Color value.
  • Default value is Colors.black
thirdCircleStrokeColor:
  • Change the third circle stroke(line) color.
  • It contains Color value.
  • Default value is Colors.black
defaultCircleStrokeWidth:
  • Change the all circles stroke(line) width.
  • It contains double value.
  • Default value is 1.0
firstCircleStrokeWidth:
  • Change the first circle stroke(line) width.
  • It contains double value.
  • Default value is 1.0
secondCircleStrokeWidth:
  • Change the second circle stroke(line) width.
  • It contains double value.
  • Default value is 1.0
thirdCircleStrokeWidth:
  • Change the third circle stroke(line) width.
  • It contains double value.
  • Default value is 1.0
startAnimation:
  • Create the animation in Circular Rotation.
  • It contains bool value:
  • true = display the circular widgets with animation
  • false = display the circular widgets without animation
repeatAnimation:
  • Repeat the animation in Circular Rotation.
  • This parameter affects when [startAnimation] is true.
  • It contains bool value.
  • true = repeat the animation.
  • false = show animation only for one time.
defaultCircleAnimationDuration:
  • Set the animation duration in milliseconds for all circles.
  • This parameter affects when [startAnimation] is true.
  • It contains int value.
firstCircleAnimationDuration:
  • Set the animation duration in milliseconds for the first circle.
  • This parameter affects when [startAnimation] is true.
  • It contains int value.
secondCircleAnimationDuration:
  • Set the animation duration in milliseconds for the second circle.
  • This parameter affects when [startAnimation] is true.
  • It contains int value.
thirdCircleAnimationDuration:
  • Set the animation duration in milliseconds for the third circle.
  • This parameter affects when [startAnimation] is true.
  • It contains int value.
curve:
  • [Curves], a collection of common animation easing curves.
  • [CurveTween], which can be used to apply a [Curve] to an [Animation].
  • Default value is Curves.linear

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue

LICENSE!

Circular Rotation is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.

Categories

Source repository

Projects using this package

No data available yet.