如何在百分比指示器中添加带有进度文本的矩形框 flutter

Question

我想在 LinearPercentIndicator 的顶部添加一个百分比文本（请看图片）。 我正在使用https://pub.dev/packages/percent_indicator插件。

Answer 1

经过一番努力，我找到了解决方案。

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,

          ),
        ],
      )
    );
  }
}

Answer 2

我在堆栈中添加了加载指示器，并用LayoutBuilder包装了整个小部件，这将为您提供当前小部件的 BoxConstraints。 您可以使用它来计算百分比指示器的 position 并在其上方放置一个小部件（文本）。

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,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}