如何在 percent_indicator Flutter 中删除进度指示器下方不必要的 padding/space

Question

颤振插件：percent_indicator: ^3.4.0

Github-Issue

预览

I want to achieve	What I have	Unnecessary space below

我想删除下图中不必要的 space，如第 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,),
                      ],
                    ),
                  ),

Note : Stylings are removed from code for simplicity - full code is available here

备选方案

• 它可以通过在堆栈中使用定位小部件来实现，但我想要更好的解决方案来删除这个 space。

Answer 1

这有点乱七八糟，但应该没问题：

所以先做一个限定高度（比如你的圆的半径）的sizedbox，在里面放一个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 将不可见