animated_image_list

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

파라럭스 효과와 전체 화면에서 이미지를 볼 수 있는 라이트박스 기능을 제공하는 애니메이션 이미지 목록을 제공하는 플러터 패키지입니다. 파라럭스를 통해 깊이감 있는 부드러운 상호작용 스크롤을 제공하여 사용자 경험을 향상시키며, 이미지 갤러리나 포트폴리오를 전시하는 데 이상적입니다. 라이트박스 기능은 이미지를 탭하여 자세한 보기로 전환할 수 있으며, 이미지 간의 원활한 탐색을 지원합니다. 크로스플랫폼으로 설계되어 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스에서 모두 작동합니다.

사용 사례

이미지 갤러리
포트폴리오 표시
제품 쇼케이스
인터랙티브 스토리텔링
소셜 미디어 피드

주요 기능

패럴랙스 스크롤 효과
이미지 라이트박스 뷰어
크로스 플랫폼 호환성
부드러운 애니메이션
사용자 정의 가능한 전환
반응형 디자인

적합한 대상

시각적으로 집중적인 앱을 개발하는 개발자
매력적인 UI 컴포넌트를 찾는 디자이너
immersiv한 이미지 브라우징이 필요한 앱
제품 이미지가 있는 전자상거래 플랫폼
창의적인 디지털 포트폴리오

고려 사항

큰 이미지 세트와 함께 성능에 영향을 줄 수 있음
저사양 기기용으로 신중한 최적화가 필요합니다
애니메이션 타이밍에 대한 사용자 정의 옵션이 제한적입니다
중간 수준의 이미지 수에 가장 적합
텍스트가 많은 인터페이스에는 적합하지 않음
완전한 기능을 위해 외부 종속성에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Animated Image List for Flutter

Flutter Animated image list with parallax effect and image lightbox .

gif

Getting Started

Add the package to your pubspec.yaml:

animated_image_list: ^0.5.0

In your dart file, import the library:

import 'package:animated_image_list/AnimatedImageList.dart';

Instead of using a ListView create a AnimatedImageList Widget:

 AnimatedImageList(
               images: arr.map((e) => e.urls.small).toList(),
               builder: (context, index, progress) {
                 return Positioned.directional(
                     textDirection: TextDirection.ltr,
                     bottom: 15,
                     start: 25,
                     child: Opacity(
                       opacity: progress > 1 ? (2 - progress) : progress,
                       child: Text(
                         arr[index].user.username ?? 'Anonymous',
                         style: TextStyle(
                             color: Colors.white,
                             fontSize: 25,
                             fontWeight: FontWeight.w500),
                       ),
                     ));
               },
               scrollDirection: Axis.vertical,
               itemExtent: 100,
               maxExtent: 400,
             ),

Parameters:

Name	Description	Required	Default value
`images`	A list of images url to display in the list by default it accepts urls if custom image needed use provider paramter	required	-
`provider`	Function which maps an url or image string to an image provider	-	-
`itemExtent`	not selected item size required to calculate animations	required	150
`maxExtent`	selected item size required to calculate animations	required	400
`scrollDirection`	List scroll direction horizontal or vertical	-	Axis.vertical
`builder`	Builder function that returns a widget to display over the image / `progress` from 0...1 item selection progress from 1...2 item leaving view could be usefull if you want to animate something like text opacity above / `index` current item index	-	-
`placeHolder`	Optional function which returns default placeholder for lightbox and error widget if image fails to load	-	kTransparentImage

분류, 패키지 및 저장소 검색

패키지 설치