Search code examples
performanceflutterdartanimationflutter-showmodalbottomsheet

Flutter/Dart How to adjust Modalbottomsheet animation speed?


I read this reference

https://api.flutter.dev/flutter/material/showModalBottomSheet.html

it says "transitionAnimationController parameters can be passed in to customize the appearance and behavior of modal bottom sheets. The transitionAnimationController controls the bottom sheet's entrance and exit animations if provided."

but, I couldn't find any reference of transitionAnimationController,

so my question is, How can I adjust ModalBottomSheet Animation(entrance and exit speed that I want to adjust) with transitionAnimationController?

thank you.


Solution

  • If you are using a StatefulWidget add with TickerProviderStateMixin and create an AnimationController with BottomSheet.createAnimationController(this). You can then set the duration on the AnimationController. In this example I've set the duration to 3 seconds.

    Make sure you dispose the AnimationController in void dispose ()

    class MyModalBottomButton extends StatefulWidget {
      @override
      _MyModalBottomButtonState createState() => _MyModalBottomButtonState();
    }
    
    class _MyModalBottomButtonState extends State<MyModalBottomButton>
        with TickerProviderStateMixin {
      AnimationController controller;
    
      @override
      initState() {
        super.initState();
        controller =
            BottomSheet.createAnimationController(this);
        controller.duration = Duration(seconds: 3);
      }
    
      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return TextButton(
          child: Text("Show bottom sheet"),
          onPressed: () => showModalBottomSheet(
            context: context,
            transitionAnimationController: controller,
            builder: (context) {
              return Container(
                child: Text("Your bottom sheet"),
              );
            },
          ),
        );
      }
    }