I need to implement something like this.
It is basically a bar with multiple color and each color has a length. Additionally a text might be added on each color.
How can I implement this in flutter?
I need to implement something like this.
It is basically a bar with multiple color and each color has a length. Additionally a text might be added on each color.
How can I implement this in flutter?
The easy way is to use a chart library which supports horizontal stacked bar charts.
The somewhat harder way is to create your own widget with rows and Expanded widgets. Something like this:
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.amber,
height: 100,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.red,
height: 100,
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
height: 100,
),
),
],
),
You'd want to use a
Flexible
widget:Here's what that looks like: