如何像这张图片那样在 flutter 中创建堆叠条/进度条

Question

I want to display

i dont know the name of this kind of visualization.

Right now, I have 3 data here(sum,.net, cancel)

The right side will display is cancel number, the left side display is.net number inside the stacked bar

with this bar, user will immediately know the sum number by .net + cancel)

is there some kind of package that can help me to display this bar

Answer 1

Here is the widget builder that you want. Maybe the MediaQuery is a bad choice. But you can use any other sizing options.

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