Flutter Animation Is Not Working Correctly

Issue

I am trying to make height animation for Container in bottomSheet. After a swipe up a Container must change its height.
After I swipe up the panel, I call the method dragPanelUp() which changes the height of the container to panelAnimation.value, but the height changes without an animation

I will appreciate any help!

Here is a code:

    class BottomMenu extends StatefulWidget {
  @override
  _BottomMenuState createState() => _BottomMenuState();
}
class _BottomMenuState extends State<BottomMenu> with SingleTickerProviderStateMixin {
  List<BottomPannel> panel;
  bool isPannelAdded;
  bool isPannelAddedUpper;
  AnimationController controller;
  Animation curve;
  Animation<double> panelAnimation;
  Animation<double> panelAnimation2;
  double height;
  dragPanelUp(){
    if (isPannelAdded == false){
      setState(() {
        height = panelAnimation.value;
        isPannelAdded = true;
        panel.add(BottomPannel());
      });
    } else if (isPannelAdded == true && isPannelAddedUpper == false){
      setState(() {
        height = panelAnimation2.value;
        isPannelAddedUpper = true;
        panel.add(BottomPannel());
      });
    }
  }
@override
  void initState(){
    super.initState();
    controller =
        AnimationController(duration: Duration(seconds: 3), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
    panelAnimation = Tween<double>(begin: 40, end: 370).animate(curve)
      ..addListener(() {
        setState(() {// The state that has changed here is the animation object’s value.
        });
      });
    panelAnimation2 = Tween<double>(begin: 370, end: 660).animate(curve)
      ..addListener(() {
        setState(() {// The state that has changed here is the animation object’s value.
        });
      });
 
    controller.forward();
    panel = <BottomPannel>[];
    isPannelAdded = false;
    isPannelAddedUpper = false;
    height = 40;
  }
Widget build(BuildContext context) {
    return Scaffold(
      bottomSheet: Container(
        height: height,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.all(Radius.circular(25.0)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                //offset: Offset(0, 3),
              )
            ]
        ),
        padding: const EdgeInsets.only(bottom: 15.0, left: 15, right: 15),
        child: Container(
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Container(
              child: Column(
                children: [
                  SwipeDetector(
                    onSwipeUp: (){
                      dragPanelUp();
                    },
                    child: Container(
                      child: Container(
                        margin: EdgeInsets.only(top: 15),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              child: Icon(Icons.brightness_1_rounded, size: 6, color: Colors.blueGrey[700],),
                              margin: const EdgeInsets.only(left: 2.0),
                            ),
                            Container(
                              child: Icon(Icons.brightness_1_rounded, size: 6, color: Colors.blueGrey[700]),
                              margin: const EdgeInsets.only(left: 2.0),
                            ),
                            Container(
                              child: Icon(Icons.brightness_1_rounded, size: 6, color: Colors.blueGrey[700]),
                              margin: const EdgeInsets.only(left: 2.0),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  Column(
                    children:
                    panel.map((BottomPannel panel) {
                      return panel;
                    }).toList(),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          height: 900,
          color: Colors.red,
        ),
      ),
    );
  }
}

Please tell me if I am going something wrong!

Solution

Wrap your Bottom sheet container with AnimatedBuilder widget and pass the animation instances to it instead of calling setState method in the listener.

Refer here for documentation:
https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html

Answered By – Dineshkumar Kovalan

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *