[flutter] photo_view 패키지로 이미지 모서리 둥글게 처리하기

04 Dec 2023

flutter

Flutter의 photo_view 패키지는 이미지를 확대 및 축소하고 드래그하는 기능을 제공하는 강력한 패키지입니다. 이 패키지를 사용하여 이미지를 보여줄 때 모서리를 둥글게 처리하는 방법에 대해 알아보겠습니다.

먼저, photo_view 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에서 dependencies 섹션에 아래와 같이 패키지를 추가하세요.

dependencies:
  photo_view: ^0.10.2

패키지를 추가한 후, 다음과 같이 코드를 작성하여 이미지를 둥글게 처리할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';

class RoundedImage extends StatelessWidget {
  final String imageUrl;

  RoundedImage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: PhotoView(
        imageProvider: NetworkImage(imageUrl),
      ),
    );
  }
}

위 코드에서 RoundedImage 위젯은 imageUrl을 인자로 받아 클립된 이미지를 보여주는 역할을 합니다. borderRadius 속성을 사용하여 이미지의 모서리를 둥글게 처리하고, PhotoView 위젯을 사용하여 이미지를 보여줍니다.

이제 RoundedImage 위젯을 사용하여 이미지를 화면에 추가할 수 있습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Image'),
      ),
      body: Center(
        child: RoundedImage('https://example.com/image.jpg'),
      ),
    );
  }
}

이렇게 하면 photo_view 패키지를 사용하여 이미지의 모서리를 둥글게 처리하는 기능을 구현할 수 있습니다.

photo_view 패키지에 대한 더 자세한 내용은 공식 문서를 확인하십시오.