I Jae Sol

2025-10-02

원형 게이지 구현 아이디어

  • Flutter에서 원형 게이지 화면 구현하기

사용할 위젯

  • CircularProgressIndicator
    • 원형 게이지 표현에 사용
    • 주로 로딩 애니메이션에 사용되지만, value 속성(0~1)을 지정하면 특정 값에서 멈춘 상태의 게이지로도 활용 가능

구현 방법

  • Stack 위젯을 활용해 여러 위젯을 겹쳐 배치한다
    1. 바탕에 100% 채워진 회색 CircularProgressIndicator를 배치한다
    2. 그 위에 실제 BMI 점수 비율을 보여줄 CircularProgressIndicator를 올린다
    3. 맨 위에 Text 위젯을 배치해 퍼센트나 수치를 중앙에 표시한다


회고

  Stack을 통해 겹쳐 배치하면 커스텀 게이지를 쉽게 구현할 수 있다는 걸 알았다. 앞으로 비슷한 UI가 필요할 때 재사용할 수 있을 것 같다.

참고