Flutter 评级栏包选中和未选中的容器

我所拥有的:

我想要的是:

我使用的是flutter_rating_bar个包，我想让它显示未选中的容器，而不是默认的灰色，并且只想更改选中容器的 colored颜色 .

如上图所示，我想要在所选容器之前显示剩余的未选中容器，而不是灰色框，如第二张图片所示.

代码:

RatingBar.builder(
  initialRating: initialRatings,
  itemCount: 5,
  itemSize: 50,
  itemPadding: EdgeInsets.symmetric(horizontal: containerWidth * 0.0077),
  itemBuilder: (context, index) {
    switch (index) {
      case 0:
        return Container(
          width: ratingContainerWidth,
          height: ratingContainerHeight,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
              bottomLeft: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
            color: knowledgeRating == 1
                ? const Color.fromRGBO(109, 44, 237, 1)
                : const Color.fromRGBO(226, 243, 255, 1),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
          child: Text(
            '1',
            textAlign: TextAlign.left,
            style: TextStyle(
              color: knowledgeRating == 1
                  ? const Color.fromRGBO(255, 255, 255, 1)
                  : const Color.fromRGBO(0, 0, 0, 1),
              fontFamily: 'Inter',
              fontSize: 16,
              letterSpacing: 0.20000000298023224,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      case 1:
        return Container(
          width: ratingContainerWidth,
          height: ratingContainerHeight,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
              bottomLeft: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
            color: knowledgeRating == 2
                ? const Color.fromRGBO(109, 44, 237, 1)
                : const Color.fromRGBO(226, 243, 255, 1),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
          child: Text(
            '2',
            textAlign: TextAlign.left,
            style: TextStyle(
              color: knowledgeRating == 2
                  ? const Color.fromRGBO(255, 255, 255, 1)
                  : const Color.fromRGBO(0, 0, 0, 1),
              fontFamily: 'Inter',
              fontSize: 16,
              letterSpacing: 0.20000000298023224,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      case 2:
        return Container(
          width: ratingContainerWidth,
          height: ratingContainerHeight,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
              bottomLeft: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
            color: knowledgeRating == 3
                ? const Color.fromRGBO(109, 44, 237, 1)
                : const Color.fromRGBO(226, 243, 255, 1),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
          child: Text(
            '3',
            textAlign: TextAlign.left,
            style: TextStyle(
              color: knowledgeRating == 3
                  ? const Color.fromRGBO(255, 255, 255, 1)
                  : const Color.fromRGBO(0, 0, 0, 1),
              fontFamily: 'Inter',
              fontSize: 16,
              letterSpacing: 0.20000000298023224,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      case 3:
        return Container(
          width: ratingContainerWidth,
          height: ratingContainerHeight,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
              bottomLeft: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
            color: knowledgeRating == 4
                ? const Color.fromRGBO(109, 44, 237, 1)
                : const Color.fromRGBO(226, 243, 255, 1),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
          child: Text(
            '4',
            textAlign: TextAlign.left,
            style: TextStyle(
              color: knowledgeRating == 4
                  ? const Color.fromRGBO(255, 255, 255, 1)
                  : const Color.fromRGBO(0, 0, 0, 1),
              fontFamily: 'Inter',
              fontSize: 16,
              letterSpacing: 0.20000000298023224,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      case 4:
        return Container(
          width: ratingContainerWidth,
          height: ratingContainerHeight,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
              bottomLeft: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
            color: knowledgeRating == 5
                ? const Color.fromRGBO(109, 44, 237, 1)
                : const Color.fromRGBO(226, 243, 255, 1),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
          child: Text(
            '5',
            textAlign: TextAlign.left,
            style: TextStyle(
              color: knowledgeRating == 5
                  ? const Color.fromRGBO(255, 255, 255, 1)
                  : const Color.fromRGBO(0, 0, 0, 1),
              fontFamily: 'Inter',
              fontSize: 16,
              letterSpacing: 0.20000000298023224,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      default:
        return Container();
    }
  },
  onRatingUpdate: (rating) => setState(() {
    knowledgeRating = rating;
  }),
),