Colin's Blog
[flutter] 플러터에서의 Stack 위젯과 ClipRRect 위젯의 조합 예시

이번 글에서는 Flutter 앱 개발에서 Stack 위젯과 ClipRRect 위젯을 함께 사용하는 예시를 살펴보도록 하겠습니다.

1. Stack 위젯

Stack 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. 즉, 여러 위젯을 한 공간에 겹치게 하거나, 위치를 지정하여 배치할 수 있습니다.

Stack 위젯의 중요한 속성으로는 alignment과 fit이 있습니다. alignment은 내부 위젯들의 정렬 방식을 설정하는 속성이며, fit은 Stack 위젯과 내부 위젯 사이의 공간을 어떻게 분배할지를 결정하는 속성입니다.

2. ClipRRect 위젯

ClipRRect 위젯은 자식 위젯을 특정한 모양으로 잘라낼 때 사용됩니다. 예를 들어, 사각형 모양으로 이미지를 자르거나, 원 형태의 프로필 이미지를 만들 때 사용할 수 있습니다.

ClipRRect 위젯의 중요한 속성은 borderRadius입니다. 이 속성은 자식 위젯을 어떤 모양으로 자를지 결정하는데 사용됩니다.

예시 코드

아래는 Stack 위젯과 ClipRRect 위젯을 조합하여 이미지 위에 텍스트를 배치하는 예시 코드입니다.

import 'package:flutter/material.dart';

class ImageWithText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 200,
          height: 200,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Image.network(
              'https://example.com/profile.jpg',
              fit: BoxFit.cover,
            ),
          ),
        ),
        Text(
          'John Doe',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

이 예시 코드에서는 Stack 위젯을 사용하여 이미지와 텍스트를 겹치게 배치하고, ClipRRect 위젯을 사용하여 이미지를 원 형태로 잘라냅니다.

참고 자료

© 2018 Colin. All rights reserved.