如何像這張圖片那樣在 flutter 中創建堆疊條/進度條

Question

我要展示

我不知道這種可視化的名稱。

現在，我這里有 3 個數據（總和，.net，取消）

右邊顯示的是取消號，左邊顯示的是堆積條里面的.net號

有了這個欄，用戶將立即通過 .net + 取消知道總數）

有沒有什么 package 可以幫我顯示這個欄

Answer 1

這是您想要的小部件生成器。 也許 MediaQuery 是一個糟糕的選擇。 但您可以使用任何其他尺寸選項。

  Widget _buildProgress(BuildContext context, int progress, int limit) {
    return SizedBox(
      height: 30,
      width: double.infinity,
      child: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Container(
              decoration: const BoxDecoration(
                color: Color(0xFF038918),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              alignment: Alignment.centerRight,
              padding: const EdgeInsets.only(right: 20),
              child: Text(
                '$limit',
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width / limit * progress,
            decoration: const BoxDecoration(
              color: Color(0xFFe40808),
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
            alignment: Alignment.center,
            child: Text(
              '$progress',
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }