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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。