[flutter] 겹치는 프로그래스바 - 값이 여러개인 프로그래스바 만들기

 

값이 여러개가 존재하는 프로그래스 바를 만들어야 했습니다. 

다만 가장 작은 값이 가장 상단에 위치하여야 했고 

패키지를 사용할 수 없는 상황이었기 때문에 아래와 같이 구현하였습니다. 

 

Container(
  height: 10,
  width: double.infinity,
  child: Stack(
    children: [
      // 기본 배경
      Container(
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(5),
        ),
      ),
      ..._buildSortedProgressIndicators(count), // 전체 값
    ],
  ),
),

 

  List<Widget> _buildSortedProgressIndicators(int count) {
    final progressItems = [
      (10, Colors.blue),
      (8, Colors.green),
      (3, Colors.orange),
      (5, Colors.red),
    ];

    // value 값이 큰 순서대로 정렬 (큰 값이 아래에 위치하도록)
    progressItems.sort((a, b) =>
        (b.$1 / count).compareTo(a.$1 / count));

    return progressItems.map((item) {
      final value = math.min(1.0, item.$1 / count);
      return ClipRRect(
        borderRadius: BorderRadius.circular(5),
        child: LinearProgressIndicator(
          value: value,
          backgroundColor: Colors.transparent,
          valueColor: AlwaysStoppedAnimation<Color>(item.$2),
          minHeight: 30,
        ),
      );
    }).toList();
  }

 

디자인적 요소를 딱히 추가 하지 않았고 

기본적인 디자인이기 때문에 수정하여 사용해야합니다. 

 

여러 상태의 값이 동시에 진행되는 경우

해당 프로그래스바를 직접 구현하여 사용하는 것이 훨씬 편합니다. 

 

패키지,, 쓰다가 반나절 날렸읍니다 ^^