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

stickereditor 封面
套件詳情v0.0.8

stickereditor

一個可讓你根據邊界修改和移動文字與影像的組件。

近 30 天下載
27
喜歡數
58
Pub 分數
60

安裝套件

flutter pub add stickereditor

套件介紹

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

StickerEditor 是一個 Flutter 小部件,旨在讓使用者自由修改、移動和定位文字與影像於定義的邊界內。它提供了一個互動式介面來編輯貼紙,非常適合需要動態內容疊加的應用程式。該套件支援直覺的拖曳與放置功能以及邊界限制,確保元件保持在期望區域內。以簡單性與效能為設計核心,能順暢整合至多媒體應用中,用於建立自訂貼紙或註解。

適用情境

  • 在社交媒體應用中創建自定義貼紙
  • 向影像添加可編輯的文字疊加層
  • 設計可移動元素的使用者產生內容
  • 建構互動式照片編輯工具
  • 在即時通訊應用中實現即時貼紙操作

主要特色

  • 拖放文字與影像定位
  • 邊界約束強制
  • 貼紙內容的互動式編輯
  • 與現有 Flutter 專案的簡單整合
  • 支援動態調整大小和重新定位

適合對象

  • 開發照片編輯功能的開發者
  • 需要用戶創建貼紙的應用程式
  • 帶有互動內容的社交媒體平台
  • 帶有視覺註釋的教育工具
  • 可自訂貼圖的通訊應用

使用建議

  • 僅限基本文字和影像操作
  • 沒有內建的匯出或儲存功能
  • 需要手動實現儲存邏輯
  • 未針對複雜的多層設計進行優化
  • 依賴外部庫進行高級圖像處理

原始 README

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

Sticker Editor

A flutter plugin for iOS, Android and Mac for Rotate, Scaling, Moving and Editing Text, Photo, Stickers


Sticker Editor


Only Text Only Photo

A flutter package Sticker Editor which will help you to create editable and scalable text or sticker widget that can be dragged around the area you given in screen.

License: MIT

Features 💚

  • Manually Control the position of the widget along with drags.
  • You can bound the dragarea of your widget using boundHeight and boundWidth parameters
  • onTap and onCancel function where user's can use there own function
  • You can resizes widget using scaling function
  • Highly customizable
  • You can use whole sticker view or particular widgets

Installation

First, add stickereditor as a dependency in your pubspec.yaml file.

MacOs

Fore NetworkImage, macOS needs you to request a specific entitlement in order to access the network. To do that open macos/Runner/DebugProfile.entitlements and add the following key-value pair.

<key>com.apple.security.network.client</key>
<true/>

How to use

  • Sticker View
StickerEditingView(
  isnetwork: false,
  height: 300,
  width: 300,
  imgUrl: backgroundImageUrl,
  fonts: fonts,
  palletColor: colorPallet,
  assetList: stickerList,
),
  • Text Editing Box
Container(
  height: 300,
  width: 300,
  color: Colors.blue,
  child: Stack(
    children: [
      TextEditingBox(
        fonts: fonts,
        boundHeight: 200,
        boundWidth: 100,
        isSelected: true,
        palletColor: colorPallet,
        newText: TextModel(
            name: 'Text EditingBox',
            textStyle:
                GoogleFonts.pacifico(fontSize: 25, color: Colwhite),
            top: top,
            isSelected: true,
            textAlign: TextAlign.center,
            scale: 1,
            left: left),
      ),
    ],
  ),
),
  • Picture Editing Box
Container(
  height: 300,
  width: 300,
  color: Colors.blue,
  child: Stack(
    children: [
      StickerEditingBox(
          boundHeight: 200,
          boundWidth: 200,
          pictureModel: PictureModel(
            isNetwork: true,
            isSelected: false,
            left: 50,
            top: 50,
            scale: 1,
            stringUrl:
                'https://raw.githubusercontent.com/Harsh-Radadiya/sticker_editor/master/assets/t-shirt.jpeg',
          )),
    ],
  ),
)

Run the example app in the exmaple folder to find out more about how to use it.

所屬分類

依賴

依賴清單 4 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。