full_screen_image_null_safe

패키지 개요

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

사용자가 세로로 스크롤할 때 자동으로 닫히는 Flutter용 전체 화면 이미지 뷰어 패키지입니다. 이미지 간의 부드러운 전환을 위해 Hero 위젯과 원활하게 통합됩니다. null 안전하고 Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼에서 호환됩니다. 직관적인 제스처 기반 탐색이 필요한 몰입형 사진 보기 경험을 필요로 하는 앱에 적합합니다.

사용 사례

전체 화면에서 고해상도 이미지 보기
부드러운 전환 효과를 갖춘 이미지 갤러리 만들기
이미지 공유를 위한 히어로 애니메이션 통합
모바일 및 웹에서 사진 브라우징 향상
스와이프하여 제거하는 동작 구현
전체 화면 모달에서 이미지 표시

주요 기능

수직 스크롤 시 자동 숨기기
널 안전한 Dart 구현
Hero widget 호환성
크로스 플랫폼 지원 (Android, iOS, Web, macOS, Windows, Linux)
제스처 기반 탐색
경량이며 통합이 쉬움

적합한 대상

모바일 및 웹 사진 갤러리 앱
이미지 중심 애플리케이션
히어로 전환을 사용하는 앱
간단한 전체 화면 이미지 뷰어를 찾는 개발자
플랫폼에 관계없이 이미지 표시가 필요한 프로젝트
직관적인 이미지 탐색을 원하는 사용자

고려 사항

수평 스크롤 종료를 지원하지 않을 수 있습니다
제스처에 대한 사용자 정의 옵션이 제한적
부모 스크롤 컨텍스트에 따라 종료됨
복잡한 레이아웃보다는 단일 이미지 보기용으로 가장 적합
중첩 스크롤 뷰에서 신중한 조작이 필요합니다
비디오 또는 애니메이션 콘텐츠용으로 설계되지 않음

원본 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_null_safe as a dependency in your pubspec.yaml file.

full_screen_image_null_safe: 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

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

패키지 설치