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

lindi_sticker_widget 封面
套件詳情v1.1.0

lindi_sticker_widget

Lindi Sticker Widget 是一個 Flutter 外掛程式,可用於翻轉、旋轉、調整大小、移動、刪除和編輯任何小部件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
1560
喜歡數
54
Pub 分數
150

安裝套件

flutter pub add lindi_sticker_widget

套件介紹

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

Lindi Sticker Widget 是一個 Flutter 插件,可實現對任何 widget 的互動式操作,允許使用者動態地翻轉、旋轉、調整大小、移動、刪除和編輯 widget。此插件專為直覺的使用者互動設計,透過將 widget 轉變為可拖曳、可變形的元素,提升 UI 的彈性。適用於需要動態內容置放的應用程式,例如數位白板、設計工具或互動式學習應用。該插件支援 Android、iOS、Web、macOS、Windows 及 Linux 多個平台,確保跨平台的一致性。

適用情境

  • 互動式白板應用程式
  • 數位設計和註釋工具
  • 帶有可移動元素的教育類應用程式
  • 使用者產生內容介面
  • 協作編輯平台

主要特色

  • 拖曳和放置小部件移動
  • 即時旋轉和縮放
  • 翻轉並編輯小部件內容
  • 互動式刪除或移除小部件
  • 跨平台支援所有主要作業系統

適合對象

  • 開發互動式 UI 的開發者
  • 設計工具創作者
  • 教育類應用開發者
  • 協作式應用建構工具
  • UI 原型設計愛好者

使用建議

  • 可能需要對複雜佈局進行效能優化
  • 可用文件有限
  • 管理多個 widget 狀態時可能出現的複雜性
  • 不適合靜態或唯讀介面
  • 需要謹慎處理手勢衝突

原始 README

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

lindi_sticker_widget

Features

  Rotate
  Resize
  Move
  Layer Update (Change Stack position)
  Edit
  Delete
  Flip
  Lock

Getting started

pub package

Add this to dependencies in your app's pubspec.yaml

lindi_sticker_widget : latest_version

Usage

Sample code to integrate can be found in example/lib/main.dart.

LindiController

Customize the controller as you like!

LindiController controller = LindiController(
  borderColor: Colors.white,
  icons: [
    LindiStickerIcon(
        icon: Icons.done,
        alignment: Alignment.topRight,
        onTap: () {
          controller.selectedWidget!.done();
        }),
    LindiStickerIcon(
        icon: Icons.lock_open,
        lockedIcon: Icons.lock,
        alignment: Alignment.topCenter,
        type: IconType.lock,
        onTap: () {
          controller.selectedWidget!.lock();
        }),
    LindiStickerIcon(
        icon: Icons.close,
        alignment: Alignment.topLeft,
        onTap: () {
          controller.selectedWidget!.delete();
        }),
    LindiStickerIcon(
        icon: Icons.edit,
        alignment: Alignment.centerLeft,
        onTap: () {
          controller.selectedWidget!
              .edit(const Icon(Icons.star, size: 50, color: Colors.yellow));
        }),
    LindiStickerIcon(
        icon: Icons.layers,
        alignment: Alignment.centerRight,
        onTap: () {
          controller.selectedWidget!.stack();
        }),
    LindiStickerIcon(
        icon: Icons.flip,
        alignment: Alignment.bottomLeft,
        onTap: () {
          controller.selectedWidget!.flip();
        }),
    LindiStickerIcon(
        icon: Icons.crop_free,
        alignment: Alignment.bottomRight,
        type: IconType.resize
    ),
  ],
);
Integrate LindiStickerWidget
LindiStickerWidget(
    controller: controller,
    child: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Image.network('https://picsum.photos/200/300', fit: BoxFit.cover)
    ),
)
Add Widget to LindiStickerWidget
controller.add(
    Text('Hello World')
);
Get index of selected widget
controller.onPositionChange((index) {
  print("widgets size: ${controller.widgets.length}, current index: $index");
});
Save LindiStickerWidget as Uint8List
Uint8List? image = await controller.saveAsUint8List();

Screenshots

Image Image

:heart: Found this project useful?

If you found this project useful, then please consider giving it a :star: on Github and sharing it with your friends via social media.

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。