Creating a fill animation in flutter-CodePudding

I need find a way to create an animation that will fill and dispense a liquid inside a tube. I will need some kind of variables, such as percentages where as the percentage goes up and down the liquid rises and falls. I'm not quite sure how to do such an animation in flutter, so any help is appreciated.

I have a few pictures posted below for when the tube is empty and when it is at 180 micro liters.

CodePudding user response：

Check this

LinearProgressIndicator, Timer, ClipPath

class _MyHomePageState extends State<MyHomePage> {
  Timer? _timer;
  int _start = 10000;

  void startTimer() {
    _start = 10000;
    _timer = Timer.periodic(
        const Duration(milliseconds: 1),
        (Timer timer) =>
            setState(() => (_start == 0 ? timer.cancel() : _start--)));
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
            Text('$_start'),
            RotatedBox(
                quarterTurns: 3,
                child: ClipPath(
                    clipper: MyClipper(),
                    child: Container(
                        width: 500,
                        height: 100,
                        child: LinearProgressIndicator(
                          color: Colors.blue,
                          value: (_start / 10000),
                        ))))
          ])),
      floatingActionButton: FloatingActionButton(
        onPressed: () => startTimer(),
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width * 0.2, 0);
    path.lineTo(0, size.height / 2);
    path.lineTo(size.width * 0.2, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

CodePudding user response：

I had some time so I made this implementation of it:

https://dartpad.dev/?id=4e595e1950c21582dd33b4d55427a561