How to remove unnecessary padding/space below the progress indicator in percent_indicator Flutter

Question

Flutter Plugin: percent_indicator: ^3.4.0

Github-Issue

Preview

I want to achieve	What I have	Unnecessary space below

I want to remove the unnecessary space below image as shown in 3rd column.

Code

 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

Alternative Solution

• It can be achieved by using a positioned widget inside a stack but i want more better solution which removes this space.

Answer 1

It's a bit of a hack, but it should act just fine:

So first make a sizedbox with limited height (eg the radius of your circle), put a singlechildscrollview in it, so flutter does not give an overflow error. But we don't want to have it scrollable, so just add physics: NeverScrollableScrollPhysics() . Inside this widget, you can then put your CircularPercentIndicator.

Here is a basic example:

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'),
                ],
              ),
            ),
          ),
        ),

So your code should look like this:

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',
            ),
          ],
        ),
      ],
    )

Note: I moved the Row widget out of the CircularPercentIndicator widget and placed it right under the SizedBox, else the Row woudn't be visible