'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