full_screen_image

패키지 개요

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

전체 화면에서 이미지를 부드럽고 제스처 기반 인터페이스로 표시하기 위한 플러터 패키지입니다. 사용자가 수직으로 스크롤하면 자동으로 닫혀 직관적인 탐색을 보장합니다. Hero 위젯과의 통합을 지원하여 화면 간 전환을 원활하게 합니다. 다양한 플랫폼에서 단순성과 성능을 고려해 설계되었으며, 시각 콘텐츠를 중시하는 앱에서 이미지 보기 경험을 향상시킵니다. 갤러리, 사진 공유 또는 임베디드 이미지 표시가 필요한 모든 앱에 적합합니다.

사용 사례

갤러리에서 고해상도 사진 보기
몰입형 이미지 브라우징 경험 만들기
이미지를 사용하여 히어로 전환 구현
사진 공유 애플리케이션 구축
앱에서 시각적 스토리텔링 향상
전체 화면 제품 이미지 표시

주요 기능

수직 스크롤 시 자동 숨기기
Hero widget 호환성
크로스 플랫폼 지원 (Android, iOS, Web, macOS, Windows, Linux)
기존 UI와의 간단한 통합
내비게이션을 위한 부드러운 터치 제스처
성능과 반응성에 최적화됨

적합한 대상

이미지 갤러리 앱
사진 공유 플랫폼
전자상거래 제품 전시
시각 콘텐츠 중심 애플리케이션
간단한 전체 화면 이미지 뷰어를 찾는 개발자
부드러운 이미지 전환을 필요로 하는 앱

고려 사항

기본 동작 외에 사용자 지정 옵션이 제한적입니다
복잡한 탐색을 위해 추가 처리가 필요할 수 있습니다
다중 이미지 스와이프 인터페이스용으로 설계되지 않음
단일 이미지 보기 시나리오에 가장 적합
내장된 이미지 캐싱을 포함하지 않음
전환 중 상태를 수동으로 관리해야 합니다

원본 README

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

Full Screen image

Full screen photo viewer. It shuts off when scrolling vertically. Can work with Hero widget

Installation

To use this plugin, add full_screen_image as a dependency in your pubspec.yaml file.

full_screen_image: any

Getting Started

Check out the example app using full_screen_image.

Flutter

Full screen image:

  FullScreenWidget(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.asset(
            "assets/image1.jpg",
            fit: BoxFit.cover,
          ),
        ),
      )

Full screen with hero:

FullScreenWidget(
        child: Hero(
          tag: "customTag",
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.asset(
              "assets/image2.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
      );

Small image:

if you don't want widget full screen then use center widget

 FullScreenWidget(
        child: Center(
          child: Hero(
            tag: "smallImage",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

Custom background color:

FullScreenWidget(
        backgroundColor: Colors.purple,
        child: Center(
          child: Hero(
            tag: "customBackground",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

Non transparent widget:

FullScreenWidget(
        backgroundColor: Colors.purple,
        backgroundIsTransparent: false,
        child: Center(
          child: Hero(
            tag: "nonTransparent",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

Custom widget:

  FullScreenWidget(
        child: SafeArea(
          child: Card(
            elevation: 4,
            child: Container(
              height: 350,
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Hero(
                    tag: "customWidget",
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.asset(
                        "assets/image3.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 16,
                  ),
                  Text('Lorem text',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold),),
                  SizedBox(
                    height: 16,
                  ),
                  Expanded(
                    child: Text(
                      lorem,
                    ),
                  ),

                ],
              ),
            ),
          ),
        ),
      );

License

Apache

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

패키지 설치