flutter: superellipse 모양을 활용한 플러터 앱의 프로그레스 바 디자인 방법

Introduction

플러터(Flutter)를 사용하여 다양한 디자인 요소를 구현하는 방법에 대해 알아봅니다. 이번에는 superellipse 모양을 활용하여 플러터 앱의 프로그레스 바를 디자인하는 방법에 대해 알아보겠습니다.

What is a superellipse?

Superellipse는 수학적으로 정의된 형태로, 사각형의 꼭지점을 둥글게 하는 효과를 가지고 있습니다. 이를 이용하여 프로그레스 바의 모양을 더욱 다채롭게 표현할 수 있습니다.

Designing a progress bar using superellipse in Flutter

우선, Flutter에서 기본적으로 제공하는 Container 위젯을 사용하여 프로그레스 바의 기본 형태를 만들고, 이후에 superellipse 모양을 적용할 것입니다.

Container(
  height: 20,
  width: _progress * _containerWidth,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15), // 일반적인 둥근 형태의 모서리
  ),
),

위의 예시 코드에서 BorderRadius.circular 대신 BorderRadius.superellipse를 사용하여 superellipse 모양을 적용할 수 있습니다.

Container(
  height: 20,
  width: _progress * _containerWidth,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.superellipse(all: 15), // superellipse 모양의 모서리
  ),
),

위와 같이 superellipse를 적용하여 프로그레스 바의 디자인을 더욱 다채롭게 만들 수 있습니다.

Conclusion

Flutter에서 superellipse를 활용하여 프로그레스 바를 디자인하는 방법에 대해 알아보았습니다. superellipse를 이용하면 기본적인 동그란 형태의 프로그레스 바와는 다른 느낌의 디자인을 쉽게 구현할 수 있습니다.

참고문헌:

• https://api.flutter.dev/flutter/painting/BorderRadius/superellipse.html ```