How to Create a Sliding Animation to Bottom In Flutter?

Bottom Navigation Bar?always stays at the bottom of your mobile application and provides navigation between the views of the mobile application.?Each?Bottom Navigation Bar?item denotes a different sub screen or feature of an application So in this article we will go through how to create a sliding animation to bottom in Flutter ??

How to Create a Sliding Animation to Bottom In Flutter ??

To create sliding animation for your indicator we would simply suggest using the?SlideTransition Widget. It should not require much work to integrate it into your existing code.

The code below shows a minimal example of the?SlideTransition. If you’d like to keep displaying it during the navigation from one screen to another, you’d have to draw it in a layer above your Navigator.

Consider a code snippet like the below:

 createState() => HomeState();
}

class HomeState extends State with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation offset;

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

    controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));

    offset = Tween(begin: Offset.zero, end: const Offset(0.0, 1.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Animation Example")),
      body: Stack(
        children: [
          Center(
            child: RaisedButton(
              child: const Text('Show / Hide'),
              onPressed: () {
                switch (controller.status) {
                  case AnimationStatus.completed:
                    controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    controller.forward();
                    break;
                  default:
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: SlideTransition(
              position: offset,
              child: const Padding(
                padding: EdgeInsets.all(70.0),
                child: CircularProgressIndicator(),
              ),
            ),
          )
        ],
      ),
    );
  }
}        

The above code will give us output like the below:

Output

Conclusion:

Kindly drop us your suggestion/feedback to serve you much better.

FlutterAgency.com?is our portal Platform dedicated to?Flutter Technology?and?Flutter Developers. The portal is full of cool resources from Flutter like?Flutter Widget?Guide,?Flutter Projects,?Code libs?and etc.

Article source: https://flutteragency.com/how-to-create-a-sliding-animation-to-bottom-in-flutter/