[flutter] superellipse 모양을 활용한 버튼 디자인 방법

15 Dec 2023

flutter

Flutter는 강력한 UI 디자인을 제공하며, superellipse 모양을 활용한 버튼을 만들어 보고 싶을 때가 있습니다. 이 글에서는 Flutter에서 superellipse 모양의 버튼을 만드는 방법에 대해 알아보겠습니다.

1. Superellipse 모양의 버튼 디자인

Superellipse 모양은 일반적인 사각형과는 다르게 더 부드럽고 둥근 형태를 가지고 있습니다. 이러한 모양을 버튼에 적용하여 더 매끈한 디자인을 만들어볼 수 있습니다.

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    color: Colors.blue,
  ),
  child: Text('Superellipse Button'),
)

위의 예제에서 BorderRadius의 Radius.circular 속성을 사용하여 superellipse 모양의 버튼을 만들 수 있습니다.

2. Superellipse 버튼에 그림자 추가

버튼에 그림자를 추가하여 더 생동감있는 디자인을 만들어볼 수 있습니다.

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    color: Colors.blue,
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5.0,
        spreadRadius: 2.0,
        offset: Offset(0, 2),
      ),
    ],
  ),
  child: Text('Superellipse Button with Shadow'),
)

BoxShadow를 사용하여 그림자의 색상, 흐림 반경, 퍼짐 정도, 그림자의 위치 등을 설정할 수 있습니다.

3. Superellipse 버튼을 누를 때 효과 추가

버튼을 누를 때 변하는 효과를 주어 더욱 동적인 UI를 만들어볼 수 있습니다.

ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(20.0)),
    ),
    elevation: 5.0,
  ),
  onPressed: () {},
  child: Text('Elevated Superellipse Button'),
)

elevation 속성을 사용하여 버튼을 누를 때 그림자와 함께 버튼이 떠오르는 효과를 줄 수 있습니다.

이제 여러분도 Flutter에서 superellipse 버튼을 만드는 방법을 알게 되었습니다. 다양한 스타일링과 효과를 추가하여 UI를 더욱 다채롭게 만들어보세요!

참고 자료

Flutter를 사용하여 애플리케이션을 개발할 때는 다양한 디자인 요소를 활용하여 사용자 경험을 향상시킬 수 있습니다. Superellipse 모양의 버튼을 활용하여 더 매끄러운 디자인을 구현해 보세요!