[Flutter/Dart] Progress bar로 진행률 % 나타내기/ 비율로 위젯 위치시키기

위처럼 사용자의 목표에 따라 달성률을 나타내는 progress bar를 만들고, 그 위에 진행률 아이콘도 넣고 싶었다.

먼저 percent_indicator 패키지를 yaml에 추가하고 pub get 한다.
https://pub.dev/packages/percent_indicator
위 패키지에는 여러 모양의 progress bar가 있으니 원하는걸 골라 사용하면 된다.

사용은 간단하다. LinearPercentIndicator를 선언해주고, percent에 값을 넣으면 된다

하지만 포인트는 아이콘과 같은 선상에 있는 것..!
비율로 위젯을 위치시키기 위해서는 FractionallySizedBox를 사용하면 된다고 한다.

전체 코드

Widget lastRidingProgress() {
    double percent = records?.last.distance ?? 3 / 10;
    return Column(
      children: [
        Container(
          alignment: FractionalOffset(percent, 1 - percent),
          child: FractionallySizedBox(
              child: Image.asset('assets/icons/cycling_person.png',
                  width: 30, height: 30, fit: BoxFit.cover)),
        ),
        LinearPercentIndicator(
          padding: EdgeInsets.zero,
          percent: percent,
          lineHeight: 10,
          backgroundColor: Colors.black38,
          progressColor: Colors.indigo.shade900,
          width: MediaQuery.of(context).size.width,
        )
      ],
    );
  }