flutterchartsbar-charttargetgauge

is there a way to implement a target line in a horizontal bar chart in flutter?


I want to do like this chart enter image description here

I have searched in different packages trying to find a bar chart with properties that support this but I didn't find yet.


Solution

  • Try to play with Stack widget

    class BCw extends StatefulWidget {
      const BCw({super.key});
    
      @override
      State<BCw> createState() => _BCwState();
    }
    
    class _BCwState extends State<BCw> {
      double value = .3;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: LayoutBuilder(
            builder: (p0, constraints) => Column(
              children: [
                Slider(
                  value: value,
                  onChanged: (v) {
                    setState(() {
                      value = v;
                    });
                  },
                ),
                SizedBox(
                  height: 64,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child: Stack(
                          children: [
                            Positioned(
                              top: 8,
                              bottom: 8,
                              left: 0,
                              right: constraints.maxWidth / 2,
                              child: Container(
                                height: 40,
                                color: Colors.green,
                              ),
                            ),
                            Positioned(
                              top: 0,
                              bottom: 0,
                              left: constraints.maxWidth * value,
                              child: VerticalDivider(
                                color: Colors.grey,
                                thickness: 5,
                              ),
                            )
                          ],
                        ),
                      ),
                      Text("${value.toStringAsFixed(2)}"),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }