Search code examples
flutterflutter-animation

I'm not able to center the 'widgetIndicator:' of the percent_indicator: ^4.2.2 package using the LinearPercentIndicator class


I noticed that the package uses a 'Positioned' to position the widget, is there any way around this?

enter image description here The code:

 LinearPercentIndicator(
          animateFromLastPercent: true,
          width: MediaQuery.of(context).size.width,
          animation: true,
          lineHeight: 20.0,
          animationDuration: 600,
          percent: valueIndicator == 0
              ? 1 / allCards!.length * (indexCard + 1)
              : valueIndicator,
          widgetIndicator: Text(
            '${indexCard + 1}',
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          barRadius: const Radius.circular(10),
          curve: Curves.decelerate,
          progressColor: AppTheme.darkP3,
          backgroundColor: AppTheme.darkP2,
        ),

Solution

  • Wrap the text with a container and add margin as required

    widgetIndicator: Container(
    margin : EdgeInsets.only(top: 7),
    child : Text(
                '${indexCard + 1}',
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
    )