Блог

Я хочу добавить текст в процентах в верхней части LinearPercentIndicator (см. Изображение). Я использую https://pub.dev/packages/percent_indicator плагин.

После больших усилий я нашел решение для этого.

 class LinearProgressWithTextWidget extends StatelessWidget {
  final Color color;
  final double progress;
  LinearProgressWithTextWidget({Key key,@required this.color, @required this.progress}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    double totalWidth = ((MediaQuery.of(context).size.width/2)-padding);
    return Container(
      child: Column(
        children: [
          Transform.translate(
            offset: Offset((totalWidth * 2 * progress) - totalWidth, -5),
            child: Container(
              padding: EdgeInsets.only(left: 4, right: 4, top: 4, bottom: 4),

              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(2.0),
                color: color,
              ),
              child: Text(
                "${progress * 100}%",
                style: TextStyle(
                    fontSize: 12.0,
                    fontFamily: 'Kanit-Medium',
                    color: Colors.white,
                    height: 0.8
                ),
              ),
            ),
          ),
          LinearPercentIndicator(
            padding: EdgeInsets.zero,
            lineHeight: 15,
            backgroundColor: HexColor("#F8F8F8"),
            percent: progress,
            progressColor: color,

          ),
        ],
      )
    );
  }
}
  

Я добавил индикатор загрузки внутри стека и обернул весь виджет символом a LayoutBuilder , который даст вам BoxConstraints текущего виджета. Вы можете использовать это для вычисления положения индикатора процента и размещения виджета (текста) над ним.

 class MyProgressIndicator extends StatelessWidget {
  const MyProgressIndicator({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double percent = .5;

    return LayoutBuilder(
      builder: (context, constraints) {
        return Container(
          child: Stack(
            fit: StackFit.expand,
            overflow: Overflow.visible,
            children: [
              Positioned(
                top: 0, // you can adjust this through negatives to raise your child widget
                left: (constraints.maxWidth * percent) - (50 / 2), // child width / 2 (this is to get the center of the widget),
                child: Center(
                  child: Container(
                    width: 50,
                    alignment: Alignment.topCenter,
                    child: Text('${percent * 100}%'),
                  ),
                ),
              ),
              Positioned(
                top: 0,
                right: 0,
                left: 0,
                bottom: 0,
                child: LinearPercentIndicator(
                  padding: EdgeInsets.zero,
                  lineHeight: 15,
                  width: constraints.maxWidth,
                  backgroundColor: Colors.black,
                  percent: percent,
                  progressColor: Colors.yellow,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}