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

· 3 min read
How to Create a Sliding Animation to Bottom In Flutter
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

CircularProgressIndicator
CircularProgressIndicator

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 GuideFlutter ProjectsCode libs and etc.

Leave a Reply