4

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.

Hajime
  • 212
  • 3
  • 13

1 Answers1

11

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"),
          );
        },
      ),
    );
  }
}
kohjakob
  • 668
  • 6
  • 10
  • thank you so much, it solved my problem. you are the best! – Hajime Mar 17 '21 at 04:52
  • 1
    it solves the problem but after you close it it wont let you reopen it for some assertion error – Lidor Eliyahu Shelef May 31 '21 at 20:45
  • 1
    Exception caught by gesture ══════════════════════════════════════════════ The following assertion was thrown while handling a gesture: AnimationController.forward() called after AnimationController.dispose() AnimationController methods should not be used after calling dispose. 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 455 pos 7: '_ticker != null' – Angelica Jun 03 '21 at 07:22
  • 3
    @Angelica I got the same issue. temporary solution is to add listener again in onComplete ```showModalBottomSheet().whenComplete(() {controller =BottomSheet.createAnimationController(this);});``` – lokesh-coder Jul 01 '21 at 16:09
  • 2
    how can I change the closing animation of bottomSheet! – makri aymen abderraouf Dec 12 '21 at 19:16
  • 2
    For changing the closing animation, you have to use reverse duration `controller = BottomSheet.createAnimationController(this); controller.duration = Duration(seconds: 3); controller.reverseDuration = Duration(seconds: 3);` – Moh. Absar Rahman Feb 05 '22 at 06:53