Opposite direction progress bar

Question

In Flutter for mobile app i'm trying to implement progress bar is such a way it compares two scores.

Suggest me some package to give me some sample code.

Answer 1

I hope this is what you need...

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              side(Colors.red, 2450),
              const SizedBox(width: 3),
              side(Colors.green, 4085)
            ],
          ),
        ),
      ),
    );
  }

  Widget side(Color color, int scrore) {
    return Expanded(
      flex: scrore,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(3),
          color: color,
        ),
        height: 5,
      ),
    );
  }
}