Show modal bottom sheet with custom animation

Question

I was playing around with showModalBottomSheet() in Flutter and I was thinking about changing the default slide from bottom animation. Looking throught flutter documentation I saw that there is in fact a BottomSheet class that accept animation as parameters but, accordingly to the page, showModalBottomSheet() is preferrable.

Is possible to control the animation in some way? I just need to change the default curve and duration.

Thanks

Answer 1

You can use the AnimationController drive method to modify the animation curve, and duration and reverseDuration to set how long the animation will go on. These can be declared on your initState() if you're using a StatefulWidget.

late AnimationController controller;

@override
initState() {
  super.initState();

  controller = BottomSheet.createAnimationController(this);
  
  // Animation duration for displaying the BottomSheet
  controller.duration = const Duration(seconds: 1);
  
  // Animation duration for retracting the BottomSheet
  controller.reverseDuration = const Duration(seconds: 1);
  // Set animation curve duration for the BottomSheet
  controller.drive(CurveTween(curve: Curves.easeIn));
}

Then configure the BottomSheet transtionAnimationController

showModalBottomSheet(
  transitionAnimationController: controller,
  builder: (BuildContext context) {
    return ...
  }
)

Here's a sample that you can try out.

import 'package:flutter/material.dart';

class BottomSheetAnimation extends StatefulWidget {
  const BottomSheetAnimation({Key? key}) : super(key: key);

  @override
  _BottomSheetAnimationState createState() => _BottomSheetAnimationState();
}

class _BottomSheetAnimationState extends State<BottomSheetAnimation>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  initState() {
    super.initState();
    controller = BottomSheet.createAnimationController(this);
    // Animation duration for displaying the BottomSheet
    controller.duration = const Duration(seconds: 1);
    // Animation duration for retracting the BottomSheet
    controller.reverseDuration = const Duration(seconds: 1);
    // Set animation curve duration for the BottomSheet
    controller.drive(CurveTween(curve: Curves.easeIn));
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('BottomSheet'),
        ),
        body: Center(
          child: TextButton(
            child: const Text("Show bottom sheet"),
            onPressed: () {
              showModalBottomSheet(
                context: context,
                transitionAnimationController: controller,
                builder: (BuildContext context) {
                  return const SizedBox(
                    height: 64,
                    child: Text('Your bottom sheet'),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

Demo