Question 127547 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Creating a fill animation in flutter

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.

enter image description here

enter image description here

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search