photo_view 패키지는 Flutter에서 이미지를 확대/축소하고 스와이프하여 보여주는 기능을 제공하는 유용한 패키지입니다. 하지만 기본 설정에서는 화면 상단에 휴대폰의 상태표시줄이 보여지게 됩니다.
이번 글에서는 photo_view 패키지에서 휴대폰의 상태표시줄을 제거하는 방법을 알아보겠습니다.
1. 패키지 추가하기
photo_view 패키지를 사용하기 위해서는 먼저 pubspec.yaml 파일에 패키지를 추가해야 합니다. 다음의 코드를 dependencies 섹션에 추가해주세요.
dependencies:
photo_view: ^0.12.0
이후 터미널에서 flutter packages get 명령어를 실행하여 패키지를 업데이트해주세요.
2. 상태표시줄 제거하기
photo_view 패키지에서는 이미지를 표시하는 PhotoView 위젯을 사용합니다. PhotoView 위젯을 사용할 때 builder 속성을 사용하여 UI를 구성할 수 있습니다. 이를 활용하여 상태표시줄을 제거할 수 있습니다.
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class ImageViewer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: PhotoView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return PhotoView(
imageProvider: AssetImage('assets/images/image.jpg'),
loadingBuilder: (context, event) => Center(
child: CircularProgressIndicator(),
),
backgroundDecoration: BoxDecoration(
color: Colors.black,
),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 2,
);
},
),
),
);
}
}
위 코드에서 Container 내부에 PhotoView.builder 위젯을 사용하고 있습니다. itemCount를 1로 설정하여 1개의 이미지를 보여주도록 설정하였으며, itemBuilder에서 PhotoView 위젯을 반환하도록 설정했습니다.
상태표시줄을 제거하기 위해서는 PhotoView 위젯의 backgroundDecoration 속성을 사용하여 배경색을 검은색으로 설정해야 합니다.
3. 실행하기
이제 ImageViewer 위젯을 실행하면 photo_view 패키지를 사용하여 이미지를 표시하고 상태표시줄이 제거된 화면을 확인할 수 있습니다.
void main() {
runApp(MaterialApp(
home: ImageViewer(),
));
}
결론
photo_view 패키지를 사용하여 이미지를 표시할 때 상태표시줄을 제거하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 조금 더 깔끔한 화면을 제공할 수 있습니다.