搜尋套件、儲存庫與 APP 分類

flexiges 封面
套件詳情v1.0.2

flexiges

Flexi 是一個動態且全面的 Flutter 套件,旨在為開發者提供輕鬆精確地拖曳、縮放、旋轉和調整其組件大小的能力。Flexi 讓這一切變得簡單高效。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
35
喜歡數
4
Pub 分數
135

安裝套件

flutter pub add flexiges

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Flexiges 是一個 Flutter 套件,讓開發者能輕鬆實作動態觸控互動,例如拖曳、縮放、旋轉和縮放元件。專為精確度與簡潔性設計,透過直覺的手勢控制提升使用者體驗。此套件支援多個平台,包含 Android、iOS、Web、macOS、Windows 與 Linux,適用於跨平台應用程式。設定簡單,Flexiges 可無縫整合至現有專案,賦予開發者創造互動性強且反應迅速的使用者介面的能力。

適用情境

  • 互動式 UI 組件
  • 拖曳式介面
  • 可縮放的圖像檢視器
  • 可旋轉的 2D 元素
  • 基於手勢的動畫
  • 具有互動內容的教育類應用

主要特色

  • 拖曳、縮放、旋轉和調整小部件大小
  • 高精度觸控手勢處理
  • 跨平台相容性
  • 所需設定最少
  • 平滑的動畫過渡
  • 支援多個觸點

適合對象

  • 開發互動式應用的開發者
  • UI/UX 設計師實作手勢
  • 教育類或遊戲類應用
  • 需要動態 widget 操作的應用程式
  • 專注於快速原型設計的團隊

使用建議

  • 可能影響複雜嵌套組件的效能
  • 需要謹慎處理變換狀態
  • 不適合靜態版面
  • 最適合觸控設備
  • 對進階變換的自訂功能有限

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Flexi

Flexi is a Flutter package that provides a flexible widget for zooming, panning, and rotating child widgets.

Alt Text

Features

  • Zoom in and out of a widget.
  • Pan the widget by dragging it.
  • Rotate the widget using gestures.
  • Double-tap to reset the widget to its original state.
  • Configurable minimum and maximum scale limits.
  • Configurable maximum translation limits along the X and Y axes.
  • Enable/disable rotation, scaling, and translation individually.
  • Support for custom callbacks on scale start, update, and end events.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  flexi: ^1.0.0

Usage

Import the package in your Dart file:

import 'package:flexi/flexi.dart';

Wrap your widget with the Flexi widget:

FlexiGes(
  child: YourWidget(),
  minScale: 0.8, // Set the minimum scale limit (optional)
  maxScale: 2.5, // Set the maximum scale limit (optional)
  onScaleUpdate: (offset, scale, rotation) {
    // Handle scale update event
  },
  onScaleEnd: (details) {
    // Handle scale end event
  },
)

Parameters

  1. child: The child widget that you want to apply zoom, pan, and rotate features to. (required)
  2. minScale: The minimum scale factor for scaling the widget. Defaults to 0.8. (optional)
  3. maxScale: The maximum scale factor for scaling the widget. Defaults to 2.5. (optional)
  4. onScaleUpdate: A callback function that is triggered during the scale update event. It provides the current offset, scale factor, and rotation angle as parameters. (optional)
  5. onScaleEnd: A callback function that is triggered when the scale event ends. It provides the scale end details as a parameter. (optional)
  6. canRotate: Flag to enable/disable rotation. Defaults to true. (optional)
  7. canScale: Flag to enable/disable scaling. Defaults to true. (optional)
  8. canTranslate: Flag to enable/disable translation. Defaults to true. (optional)
  9. returnToOrigin: Flag to enable/disable returning to the original state on double-tap. Defaults to true. (optional)
  10. enabled: Flag to enable/disable the Flexi widget. Defaults to true. (optional)
  11. maxTranslationX: The maximum translation value along the X-axis. Defaults to 100. (optional)
  12. maxTranslationY: The maximum translation value along the Y-axis. Defaults to 100. (optional)

Example

Check out the example directory for a working example of using the Flexi widget.

Running Tests

To run the tests for the Flexi package, use the following command: flutter test flexi_test.dart

Contributing

Contributions are welcome! Please submit any issues or pull requests via the GitHub repository.

License

This project is licensed under the MIT License.

Feel free to customize the content further based on your package's specific details and testing instructions.

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。