패키지, 저장소 및 앱 카테고리 검색

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,
)

카테고리

이미지

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.