有没有办法在 flutter 的水平条形图中实现目标线？

Question

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.

Answer 1

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)}"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}