Design this custom slider using flutter - flutter

Question

I need a custom slider widget which should look like the image attached.
I tried with the flutter slider widget and couldn't find any similar designs.

Answer 1

checkout this:
class Test2 extends StatelessWidget {
const Test2({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 80,
child: Column(
children: [
SizedBox(
height: 15,
child: Row(
children: [
Expanded(
flex: 40 - withOffset(19),
child: const SizedBox(),
),
const Icon(
Icons.arrow_drop_down_rounded,
size: 30,
color: Colors.red,
),
Expanded(
flex: withOffset(19) - 11,
child: const SizedBox(),
)
],
),
),
const SizedBox(
height: 5,
),
SizedBox(
height: 40,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const [
_TestContainer(
flex: 15,
color: Colors.red,
),
SizedBox(
width: 2,
),
_TestContainer(
flex: 10,
color: Colors.yellow,
),
SizedBox(
width: 2,
),
_TestContainer(
flex: 13,
color: Colors.green,
),
SizedBox(
width: 2,
),
_TestContainer(
flex: 10,
color: Colors.blue,
),
],
),
),
],
),
),
),
);
}
}
_TestContainer:
class _TestContainer extends StatelessWidget {
const _TestContainer({
Key? key,
required this.flex,
required this.color,
}) : super(key: key);
final int flex;
final Color color;
#override
Widget build(BuildContext context) {
return Expanded(
flex: flex,
child: Column(
children: [
Container(
height: 5,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10),
),
),
],
),
);
}
}
withOffset:
int withOffset(double bmi) {
final off = bmi;
return off.toInt();
}