[Flutter] Gradient 를 사용해서 게이지바 만들기

게이지바를 사용해서

0~69까지는 빨간색

70~85까진 노란색

85~100까진 초록색을 나타내는 게이지바를 만들어야 했다.

RxList<Color> colorList = <Color>[].obs;
@override
  void onInit() {
    for (int i = 0; i < 240; i++) {
      colorList.insert(0, Color.fromRGBO(255, (i * 255) ~/ 699, 0, 1.0));
    }

    // TODO: implement onInit

    super.onInit();
  }

시작화면에서 24%로 시작하기에 24%까지 해당 값을 먼저 지정해주었다.

RxDouble percent = 24.0.obs; /// 퍼센트
	
	///시작
  start() async {
    startColorchange();
    while (percent.value < 100) {
      // await Duration(milliseconds: 1579).delay();
      await Duration(milliseconds: 150).delay();

      percent.value += 1;
      if (percent.value >= 100) {
        break;
      }
    }
  }

  startColorchange() async {
    for (int i = 240; i < 1000; i++) {
      await Duration(milliseconds: 15).delay();
      if (i < 700) {
        // Red to Yellow gradient
        colorList.insert(0, Color.fromRGBO(255, (i * 255) ~/ 699, 0, 1.0));
      } else if (i < 850) {
        // Yellow to Green gradient
        colorList.insert(
            0,
            Color.fromRGBO(
                255 * (849 - i) ~/ 150, 255, 255 * (i - 699) ~/ 150, 1.0));

        colorList.removeLast();
        colorList.removeLast();
        colorList.removeLast();
      } else {
        // Green
        colorList.insert(0, Color.fromRGBO(0, 255, 0, 1.0));
        colorList.removeLast();
        colorList.removeLast();
        colorList.removeLast();
        colorList.removeLast();
      }
    }
  }

100%까지 기준을 1000으로 나누어 해당값에 맞춰 Color값을 지정해주었다.

그후 70% 이후일때부터는 기존(red / 85% 이상일때는 red,yellow) 를 제거 하기위해 removeLast를 사용했다.

다만 마지막 90퍼 후반대에서는 뭔가 너무 찐한 초록색이 나온점이 맘에 안든다..

조금더 만지면 자연스럽게 나올거같은데 귀찮다