How to Add Transition Animation on Flutter Navigations [Easy Way]

In this example, we are going to show you the easiest way to apply transitions animation on navigation while going from one screen page to another. We are using GetX package to apply transitions. see the example below:

First, you need to Add Get Flutter Package in your project by adding following lines on pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8

Import GetX in your script:

import 'package:get/get.dart';

Wrap your widget with GetMaterialApp() widget from GetX at root:

void main() {
  runApp(
    GetMaterialApp(
      home: MyApp(),
    )
  );
}

Get.to(NextScreen());

Get.to(
  PageOne(), //next page class
  duration: Duration(seconds: 1), //duration of transitions, default 1 sec
  transition: Transition.leftToRight //transition effect
);

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
        GetPage(
          name: '/third',
          page: () => Third(),
          transition: Transition.zoom  
        ),
      ],
    )
  );
}

Go to the /third route with zoom transition:

Get.toNamed("/third");

cupertino
cupertinoDialog
downToUp
fade
fadeIn
leftToRight
leftToRightWithFade
native
noTransition
rightToLeft
rightToLeftWithFade
size
topLevel
upToDown
zoom

import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
  runApp(
    GetMaterialApp(
      home: MyApp(),
    )
  );
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Navigation Using GetX"),
              backgroundColor: Colors.purple,
          ),
          body: Container( 
              alignment: Alignment.center,
              child: Column(
                children: [
                    ElevatedButton(
                      onPressed:(){
                          Get.to(
                            PageOne(),
                            duration: Duration(seconds: 1),
                            transition: Transition.leftToRight
                          );
                      }, 
                      child: Text("Go to Page One with Slide")
                    ),

                    ElevatedButton(
                      onPressed:(){
                          Get.to(
                            PageOne(),
                            duration: Duration(seconds: 1),
                            transition: Transition.zoom
                          );
                      }, 
                      child: Text("Go to Page Two with Zoom")
                    ),
                ],
              ),     
          )
      );
  }
}

//Screen One, you can create another file for this class
class PageOne extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title:Text("Page One")),
         body: Container(
           alignment: Alignment.center,
            child: ElevatedButton(
               onPressed:(){
                   Get.back();
                   //go to previous page
               }, 
               child: Text("Go Back")
              ),
         ),
      );
  }
}

//Screen One, you can create another file for this class
class PageTwo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title:Text("Page One")),
         body: Container(
           alignment: Alignment.center,
            child: ElevatedButton(
               onPressed:(){
                   Get.back();
                   //go to previous page
               }, 
               child: Text("Go Back")
              ),
         ),
      );
  }

}