how to create stacked bar/progress bar in flutter like this image

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