搜索插件、代码仓与 APP 分类

circular_rotation 封面
插件详情v0.0.2

circular_rotation

这是一个完全可定制的包,允许您以圆形方式设置自定义小部件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
50
喜欢数
39
Pub 分数
150

安装插件

flutter pub add circular_rotation

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

CircularRotation 是一个可定制的 Flutter 包,使开发者能够以圆形布局排列小部件,并完全控制其外观和行为。它支持动态自定义,允许用户定义自定义小部件、旋转角度、间距和动画效果。非常适合创建交互式圆形菜单、导航中心或视觉上引人注目的 UI 组件。该包可在所有主要平台(包括 Android、iOS、Web、macOS、Windows 和 Linux)上运行,确保一致的性能和设计。通过直观的 API 和流畅的动画,它通过优雅的圆形布局提升了用户体验。

适合场景

  • 创建圆形导航菜单
  • 设计交互式控件环
  • 构建动画圆形滑块
  • 实现径向选择界面
  • 开发仪表板小部件
  • 显示圆形图像画廊

主要特点

  • 完全可自定义的圆形布局
  • 对自定义组件的支持
  • 平滑的旋转动画
  • 跨平台兼容性
  • 可配置的间距和角度
  • 通过 pub.dev 实现轻松集成

适合对象

  • 寻求独特布局的UI设计师
  • 开发交互式仪表板的开发者
  • 需要径向导航的应用
  • 专注于视觉吸引力的项目
  • 使用 Flutter 开发多平台应用的团队

使用建议

  • 大量小部件可能影响性能
  • 需要仔细调整以获得最佳动画流畅度
  • 除了基本用法外,文档有限
  • 最适合中等数量的 widget
  • 不适合复杂的层级结构

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。