Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Add Transition on Flutter Navigations [Easy Way]

In this example, we are going to show you the easiest way to apply transitions 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(),
    )
  );
}

Normal Navigation to Next Page:

Get.to(NextScreen());

Navigation to Next Page with Transition:

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

or alternatively, you can do same with Named Routes:

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");

Some ready-made transition on GetX:

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

Full Code Example:

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")
              ),
         ),
      );
  }

}

Output Screenshot:

LeftToRight Transition Zoom Transition

No any Comments on this Article


Please Wait...