パッケージ、リポジトリ、アプリカテゴリを検索

ducafecatFlutter エコシステムナビ
パッケージ詳細v0.1.0

image_ink_well

Image InkWell Flutterプラグイン。このプラグインは、長方形、ラウンド長方形、円形のInkWellを提供します。

pub.dev API ドキュメント ソースコード
30日間ダウンロード
27
いいね数
15
Pub ポイント
25

パッケージをインストール

flutter pub add image_ink_well

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Image InkWell は、InkWell の機能を拡張して画像と連携できるようにする Flutter プラグインであり、長方形、ラウンド長方形、円などのカスタマイズ可能なタップターゲットを提供します。タッチ時に視覚フィードバックを提供することで、画像ベースのインターフェースにおけるユーザー体験を向上させます。このパッケージは Flutter アプリにスムーズに統合でき、シンプルな設定でさまざまな画像スタイルオプションをサポートしています。応答性のあるフィードバックを持つインタラクティブな画像カード、ボタン、サムネイルを作成するのに最適です。

用途

  • インタラクティブな画像ボタンの作成
  • タップフィードバックを使用して画像ギャラリーを構築する
  • カスタム画像カードのデザイン
  • 円形画像セレクタの実装
  • タッチセンシティブな画像コンポーネントの開発

主な機能

  • 長方形、ラウンドされた長方形、および円形のタップ対象をサポートしています
  • タッチ時の視覚フィードバックを提供します
  • 既存のFlutterプロジェクトとの簡単な統合
  • カスタマイズ可能なボーダーと形状スタイル
  • 任意の Image ウィジェットと互換性があります

適している対象

  • 画像中心のUIを開発する開発者
  • インタラクティブな画像要素を必要とする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,
)

カテゴリー

画像

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。