플러터(Flutter)는 다양한 위젯을 조합하여 유연하고 멋진 UI를 구현할 수 있는 프레임워크입니다. 이 중에서도 Stack 위젯과 ClipPath 위젯은 UI 요소의 배치와 모양을 다루는 데 유용하게 사용됩니다. 이번 예시에서는 Stack 위젯과 ClipPath 위젯을 함께 사용하여 원 모양의 이미지를 만들어보겠습니다.

1. Stack 위젯과 ClipPath 위젯 이해하기

Stack 위젯이란?

Stack 위젯은 여러 위젯을 겹쳐서 배치할 수 있게 해주는 위젯입니다. 자식 위젯들은 겹칠 때에는 가장 위에 있는 위젯이 제일 먼저 그려집니다.

ClipPath 위젯이란?

ClipPath 위젯은 자식 위젯을 특정한 모양으로 자르는 역할을 합니다. 사용자가 원하는 모양의 패스를 지정하여 자식 위젯을 자를 수 있습니다.

2. Stack 위젯과 ClipPath 위젯 조합 예시

import 'package:flutter/material.dart';

class CircleImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipPath(
          clipper: CircleClipper(),
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/sample_image.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class CircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.addOval(Rect.fromCircle(
      center: Offset(size.width / 2, size.height / 2),
      radius: size.width / 2,
    ));
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

위의 예시 코드는 CircleImage 클래스를 정의하고, Stack 위젯과 ClipPath 위젯을 사용하여 원 모양의 이미지를 만드는 예시입니다.

먼저, Stack 위젯 안에 ClipPath 위젯을 배치하고, CircleClipper 클래스를 사용하여 클리핑을 수행합니다. CircleClipper 클래스는 CustomClipper<Path> 클래스를 상속하며, getClip 메서드에서 원 모양의 클리핑 패스를 생성합니다.

이후, ClipPath 위젯의 child 속성으로 Container 위젯을 사용하여 이미지를 넣고, decoration 속성에서 이미지를 설정합니다. 이미지는 AssetImage를 사용하여 로컬에 있는 이미지 파일을 가져옵니다.

3. 결과 확인하기

위의 예시 코드를 실행하면, 원 모양의 이미지가 화면에 표시됩니다. Stack 위젯과 ClipPath 위젯을 조합하여 이미지를 다양한 모양으로 클리핑할 수 있으므로, 원하는 UI를 구현하는 데 활용할 수 있습니다.

4. 결론

위의 예시를 통해 플러터에서 Stack 위젯과 ClipPath 위젯을 조합하여 다양한 모양의 UI를 만드는 방법을 살펴보았습니다. Stack 위젯과 ClipPath 위젯은 플러터에서 UI를 구성하는 데 유용하게 사용될 수 있으니, 다양한 예시를 통해 응용할 수 있도록 해보세요!

참고 자료

• Flutter - Stack class
• Flutter - ClipPath class