[Flutter::Package] gafa_indicator 제작

https://pub.dev/packages/gafa_indicator

gafa_indicator | Flutter package

https://github.com/Chun-Bae/gafa_indicator

GitHub - Chun-Bae/gafa_indicator: A Flutter gradient flow arc indicator with customizable animations.

 

---

앱 개발 중 리니어한 컬러 + 동그란 인디케이터가 필요했는데 찾아도 너무 안보여서 사용하다가, "어 만들만하겠는데?" 해서 간단하게 만들었다.

 

많은 시간은 들이지 않아서 오류가 날진 아직 잘 모르겠지만 누군가 발견해주겠지..

설명에 나와있는 디자인을 그대로 사용하면 웬만한 버그는 없을 것 같다.

 

어제(2024.11.15) 밤에 6~8시간 작업하고 오늘 4시간 정도 다듬어서 꽤나 빠르게 내놨다.

원래는 percent_indicator 패키지에서 SharderMask와 Transform을 어거지로 변형해서 쓰고 있었다.

하지만 너무 마음에 안들고 흠도 잡혀서 바꾸는 게 좋겠다고 생각했다.

아래는 같은 디자인이 바뀌고 난 후 코드이다.

 

사용하던 코드

Transform(
  alignment: Alignment.center,
  transform: Matrix4.rotationY(3.14159),
  child: ShaderMask(
    shaderCallback: (Rect bounds) {
      return LinearGradient(
        colors: [Colors.lime.shade100, Colors.lightGreen],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
      ).createShader(bounds);
    },
    child: CircularPercentIndicator(
      radius: 25.0,
      lineWidth: 6.3,
      percent: 1 - 0.54,
      center: Transform(
        alignment: Alignment.center,
        transform: Matrix4.rotationY(3.14159),
        child: Text("54%"),
      ),
      backgroundColor: Colors.white,
      progressColor: Colors
          .black,
    ),
  ),
),

 

내 패키지 코드

GradientAniFlowArcIndicator(
  innerRadius: 19.7,
  outerRadius: 26,
  percentage: 77,
  colors: [Colors.lime.shade100, Colors.lightGreen],
),

 

 

그리고 애니메이션도 적용시켰는데 퍼센티지가 채워질 때 채워지지 않은 부분과 어떤 모션 작용을 하는지도 4가지 형태로 구분해봤다. 네이밍 센스가 좋지 않아서 해당 열거형 변수의 변수명이 좋은지는 잘 모르겠어서, README 파일 마지막에 사용자분들의 의견을 적극적으로 반영하겠다고 적어놓았다.

 

여기서 gafa_indicator의 gafa는 gradient animation flow arc의 줄임말이다. 약간 이상하지만 줄임 표현이 재밌고 이름 생각해내는 게 너무 귀찮아서 그냥 이렇게 한 것도 있다.