线性进度指示器颤动

Question

在 flutter 中，是否可以实现类似 google 的线性进度指示器样式，如附图所示？ 这是我的代码

LinearProgressIndicator(
  borderRadius: const BorderRadius.only(topRight: Radius.circular(4), bottomLeft: Radius.circular(4)),
  value: percentage,
  backgroundColor: Colors.white,
  color: Colors.black,
),

其中百分比是根据屏幕高度计算的。 主线（左）和副线（右）之间的空间；和停止指示器。

Answer 1

import 'package:flutter/material.dart';

class GoogleStyleProgressIndicator extends StatelessWidget {
  final double percentage;

  GoogleStyleProgressIndicator({required this.percentage});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 10,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(4),
      ),
      child: Stack(
        children: [
          Container(
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(4),
            ),
          ),
          FractionallySizedBox(
            widthFactor: percentage,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(4),
                  bottomLeft: Radius.circular(4),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在此示例中：

容器提供背景和边框半径。 堆栈允许对背景和进度条进行分层。 FractionallySizedBox 根据百分比调整进度条的宽度。 您可以调整高度、颜色和边框半径以匹配您想要的确切样式。这种方法使您可以更灵活地自定义进度指示器的外观。

我希望这可以帮助你。