搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。