Flutter는 모든 종류의 앱을 개발하기 위한 도구로 인기가 높아지고 있습니다. 이미지 뷰어를 만들 때, 사용자 경험을 향상시키기 위해 모션 블러 효과를 적용하고 싶을 수 있습니다. 이때, photo_view 패키지를 사용하면 쉽게 이미지 모션 블러 효과를 구현할 수 있습니다.
photo_view 패키지 가져오기
먼저, 프로젝트의 pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 추가합니다.
dependencies:
flutter:
sdk: flutter
photo_view: ^0.12.0
그리고 패키지를 가져오기 위해 다음 명령어를 실행합니다.
$ flutter pub get
이미지 모션 블러 효과 구현하기
photo_view 패키지를 사용하여 이미지 모션 블러 효과를 구현하는 방법은 다음과 같습니다.
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class BlurredImageScreen extends StatelessWidget {
final String imageUrl;
BlurredImageScreen({required this.imageUrl});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Blurred Image'),
),
body: Container(
child: Stack(
children: [
PhotoView(
imageProvider: NetworkImage(imageUrl),
backgroundDecoration: BoxDecoration(
color: Colors.black.withOpacity(0.5),
),
loadingBuilder: (context, event) => Center(
child: CircularProgressIndicator(),
),
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
color: Colors.transparent,
),
),
],
),
),
);
}
}
위의 코드에서 BlurredImageScreen은 이미지 모션 블러 효과를 가진 위젯을 나타내며, imageUrl 매개변수를 통해 표시할 이미지의 URL을 받습니다. PhotoView 위젯은 photo_view 패키지에서 제공되는 이미지 뷰어입니다. backgroundDecoration 속성을 사용하여 배경에 어두운 효과를 적용하고, loadingBuilder 속성을 사용하여 이미지 로딩 중에는 로딩 아이콘을 표시할 수 있습니다. 마지막으로 BackdropFilter 위젯을 사용하여 이미지에 블러 효과를 적용합니다.
실행 결과
위의 코드를 실행하면, BlurredImageScreen 위젯이 나타나며 imageUrl에 지정된 이미지가 모션 블러 효과와 함께 표시됩니다.
이제 photo_view 패키지를 사용하여 이미지 모션 블러 효과를 구현하는 방법을 알게 되었습니다. 여러분의 앱에 이 효과를 추가하여 사용자들에게 더욱 멋진 경험을 제공해보세요!