[flutter] 플러터 앱에서 다양한 클리퍼 스타일 적용하기

05 Dec 2023

flutter

플러터(Flutter)는 구글이 개발한 UI 프레임워크로, 하나의 코드베이스로 안드로이드와 iOS 앱을 개발할 수 있습니다. 이에 따라 플러터는 다양한 클리퍼 스타일을 적용할 수 있는 기능을 제공합니다. 클리퍼 스타일은 UI 요소의 모양을 변경하는 데 사용되며, 앱의 디자인과 사용자 경험을 향상시킬 수 있습니다.

1. 원형 클리퍼 스타일 적용하기

원형 클리퍼 스타일을 적용하려면 ClipOval 위젯을 사용하면 됩니다. 아래는 원형 클리퍼 스타일을 적용한 예시 코드입니다.

ClipOval(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

위 코드에서 ClipOval 위젯은 Container 위젯을 감싸고 있으며, Container의 크기가 원형으로 클립되어 보입니다. 이렇게 하면 Container의 모서리가 동그랗게 잘려 있는 클리퍼 스타일이 적용됩니다.

2. 사각형 클리퍼 스타일 적용하기

사각형 클리퍼 스타일을 적용하려면 ClipRect 위젯을 사용하면 됩니다. 아래는 사각형 클리퍼 스타일을 적용한 예시 코드입니다.

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
)

위 코드에서 ClipRect 위젯은 Container 위젯을 감싸고 있으며, Container의 모서리가 사각형으로 클립되어 보입니다. 이렇게 하면 Container의 모서리가 사각형으로 잘려 있는 클리퍼 스타일이 적용됩니다.

3. 다른 클리퍼 스타일 적용하기

플러터에서는 더 다양한 클리퍼 스타일을 적용할 수 있습니다. 일부 예시로는 ClipRRect, ClipPath 등이 있습니다. 핵심은 Clip을 접두사로 가진 위젯을 사용하고, 해당 위젯 안에 적용하고자 하는 클리퍼 스타일을 적용하는 것입니다.

더 자세한 클리퍼 스타일에 대한 정보는 플러터 공식 문서를 참조하시기 바랍니다.

결론

플러터 앱에서 다양한 클리퍼 스타일을 적용하여 UI 요소의 모양을 변경할 수 있습니다. 원형, 사각형, 그리고 다른 형태의 클리퍼 스타일을 적용하여 앱의 디자인과 사용자 경험을 향상시킬 수 있습니다.

참조

플러터 공식 문서 - 클리핑