如何在 percent_indicator Flutter 中刪除進度指示器下方不必要的填充/空格

Question

Flutter 插件：percent_indicator ：^3.4.0

Github-問題

預習

我想實現	我有的	下面不必要的空間

我想刪除圖像下方不必要的空間，如第 3 列所示。

代碼

 CircularPercentIndicator(
                    radius: getProportionateScreenWidth(200),
                    lineWidth: 10,
                    animation: true,
                    arcType: ArcType.HALF,
                    percent: 0.5,
                    arcBackgroundColor: Colors.grey.withOpacity(0.3),
                    startAngle: 270,
                    circularStrokeCap: CircularStrokeCap.round,
                    progressColor: Theme.of(context).primaryColor,
                    footer: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text(
                          '78',
                        ),
                        Text(
                          'Dropped ~ 4 kg',
                        ),
                        Text(
                          '72', 
                        ),
                      ],
                    ),
                    center: Column(
                      children: [
                        Text(
                          'now',
                        ),
                        Text(
                          '74.5 Kg',
                          style: kTextStyle,),
                      ],
                    ),
                  ),

注意：為簡單起見，已從代碼中刪除樣式 -此處提供完整代碼

替代解決方案

• 它可以通過使用堆棧內的定位小部件來實現，但我想要更好的解決方案來消除這個空間。

Answer 1

這有點像黑客，但它應該表現得很好：

所以首先制作一個高度有限的大小框（例如你的圓的半徑），在里面放一個singlechildscrollview，這樣flutter就不會給出溢出錯誤。 但我們不想讓它可滾動，所以只需添加physics: NeverScrollableScrollPhysics() 。 然后，您可以在此小部件內放置 CircularPercentIndicator。

這是一個基本示例：

SizedBox(
          height: 100,
          width: 200,
          child: SingleChildScrollView(
            physics: NeverScrollableScrollPhysics(),
            child: Container( //use CircularPercentIndicator widget here
              height: 200,
              width: 200,
              color: Colors.grey,
              child: Column(
                children: [
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                  Text('Placeholder'),
                ],
              ),
            ),
          ),
        ),

所以你的代碼應該是這樣的：

Column(
      children: [
        SizedBox(
          height: getProportionateScreenWidth(200),
          width: 2 * getProportionateScreenWidth(200),
          child: SingleChildScrollView(
            physics: NeverScrollableScrollPhysics(),
            child: CircularPercentIndicator(
              radius: getProportionateScreenWidth(200),
              lineWidth: 10,
              animation: true,
              arcType: ArcType.HALF,
              percent: 0.5,
              arcBackgroundColor: Colors.grey.withOpacity(0.3),
              startAngle: 270,
              circularStrokeCap: CircularStrokeCap.round,
              progressColor: Theme.of(context).primaryColor,
              center: Column(
                children: [
                  Text(
                    'now',
                  ),
                  Text(
                    '74.5 Kg',
                    style: kTextStyle,),
                ],
              ),
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text(
              '78',
            ),
            Text(
              'Dropped ~ 4 kg',
            ),
            Text(
              '72',
            ),
          ],
        ),
      ],
    )

注意：我將 Row 小部件從 CircularPercentIndicator 小部件中移出，並將其放在 SizedBox 的正下方，否則 Row 將不可見