'How to add moving indicator on multicoloured horzontal bar in flutter
Need a moving indicator to show the value of particular color in horizontal bar
when i move the indicator it should show the respectedcoloured value. Any one help me out.
Here is the code:
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
body: Center(
child: MyAssetsBar(
width: width * .9,
background: colorFromHex("CFD8DC"),
//height: 50,
//radius: 10,
assetsLimit: 250,
//order: OrderType.Descending,
assets: [
MyAsset(size: 30, color: colorFromHex("29B6F6")),
MyAsset(size: 25, color: colorFromHex("E53935")),
MyAsset(size: 70, color: colorFromHex("4CAF50")),
MyAsset(size: 50, color: colorFromHex("8E24AA")),
MyAsset(size: 20, color: colorFromHex("FBC02D"))
],
),
),
);
}
}
/*Utils*/
Color colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
return Color(int.parse('FF$hexCode', radix: 16));
}
const double _kHeight = 25;
enum OrderType { Ascending, Descending, None }
/*Utils*/
class MyAsset {
final double size;
final Color color;
MyAsset({this.size, this.color});
}
class MyAssetsBar extends StatelessWidget {
MyAssetsBar(
{Key key,
@required this.width,
this.height = _kHeight,
this.radius,
this.assets,
this.assetsLimit,
this.order,
this.background = Colors.grey})
: assert(width != null),
assert(assets != null),
super(key: key);
final double width;
final double height;
final double radius;
final List<MyAsset> assets;
final double assetsLimit;
final OrderType order;
final Color background;
double _getValuesSum() {
double sum = 0;
assets.forEach((single) => sum += single.size);
return sum;
}
void orderMyAssetsList() {
switch (order) {
case OrderType.Ascending:
{
//From the smallest to the largest
assets.sort((a, b) {
return a.size.compareTo(b.size);
});
break;
}
case OrderType.Descending:
{
//From largest to smallest
assets.sort((a, b) {
return b.size.compareTo(a.size);
});
break;
}
case OrderType.None:
default:
{
break;
}
}
}
//single.size : assetsSum = x : width
Widget _createSingle(MyAsset singleAsset) {
return SizedBox(
width: (singleAsset.size * width) / (assetsLimit ?? _getValuesSum()),
child: Container(color: singleAsset.color),
);
}
@override
Widget build(BuildContext context) {
if (assetsLimit != null && assetsLimit < _getValuesSum()) {
print("assetsSum < _getValuesSum() - Check your values!");
return Container();
}
//Order assetsList
orderMyAssetsList();
final double rad = radius ?? (height / 2);
return ClipRRect(
child: Container(
decoration: new BoxDecoration(
color: background,
),
width: width,
height: height,
child: Row(
children: assets
.map(([![enter image description here][2]][2]singleAsset) => _createSingle(singleAsset))
.toList()),
),
);
}`
`
}
- List item
actual result :
[1]: https://i.stack.imgur.com/Z6VGN.png
expected result: [2]: https://i.stack.imgur.com/qQbRB.png
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|