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

套件詳情v0.1.0

image_ink_well

Image InkWell Flutter 插件。此提供矩形、圓角矩形、圓形類型的 InkWell。

近 30 天下載
27
喜歡數
15
Pub 分數
25

安裝套件

flutter pub add image_ink_well

套件介紹

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

Image InkWell 是一個 Flutter 插件,擴展了 InkWell 的功能,使其能與影像搭配使用,提供可自訂的點擊目標,例如矩形、圓角矩形和圓形。它讓影像元素具備互動性,並在觸控時提供視覺反饋,提升影像介面的使用者體驗。此套件可順暢整合至 Flutter 應用程式中,並透過簡單設定支援多種影像樣式選項。非常適合建立帶有回應式反饋的互動式影像卡片、按鈕或縮圖。

適用情境

  • 建立互動式圖像按鈕
  • 使用點擊反饋建構影像畫廊
  • 設計自訂圖像卡片
  • 實現圓形圖像選擇器
  • 開發觸控敏感的圖像組件

主要特色

  • 支援矩形、圓角矩形和圓形點擊目標
  • 提供觸控時的視覺反饋
  • 與現有 Flutter 專案的輕鬆整合
  • 可自定義的邊框和形狀樣式
  • 適用於任何 Image 小部件

適合對象

  • 開發圖像密集型使用者介面的開發者
  • 需要互動式圖像元素的UI設計師
  • 需要圖像觸控反饋的應用程式
  • 使用自定形狀的互動區域的專案

使用建議

  • 僅限基本形狀(無複雜幾何)
  • 除了標準的 InkWell 效果外,沒有內建動畫
  • 需要手動處理圖像縮放和對齊
  • 未針對非常大的圖像集合進行優化
  • 依賴於 Flutter 的 InkWell 行為以實現觸覺反饋

原始 README

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

image_ink_well

Image InkWell Flutter plugin.

Getting Started

Dependency
dependencies:
  image_ink_well: ^0.1.0
Import
import 'package:image_ink_well/image_ink_well.dart';
Example
// rectangle image inkwell
ImageInkWell(
  onPressed: () {
    print('onPressed');
  },
  width: 300,
  height: 180,
  image: NetworkImage(
      'https://images.unsplash.com/photo-1547651196-4bd31258de69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'),
  splashColor: Color(0x32ff0000),
)

// rounded rectangle image inkwell
RoundedRectangleImageInkWell(
  onPressed: () {
    print('onPressed');
  },
  width: 300,
  height: 150,
  borderRadius: BorderRadius.only(
      topLeft: const Radius.circular(20),
      topRight: const Radius.circular(20),
      bottomLeft: const Radius.circular(20)),
  image: NetworkImage(
      'https://images.unsplash.com/photo-1547332184-070705bccbd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'),
)

// circle image inkwell
CircleImageInkWell(
  onPressed: () {
    print('onPressed');
  },
  size: 200,
  image: NetworkImage(
      'https://images.unsplash.com/photo-1547651619-238e04d07889?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'),
  splashColor: Colors.white24,
)

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。