搜索插件、代码仓与 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 项

源码仓库

使用此插件的项目

暂无相关数据。