How to Navigate to Different Pages and Routes using GetX in Flutter

In this example, we are going to show you the easiest way to navigate to different screens and pages with GetX Package. We will use both named and non named routes to navigate. GetX package makes Navigation on minimal code and very easy. 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(),
    )
  );
}

To go to new screen page:

Get.to(NextScreen());

To go back to previous screen:

Get.back();

To go to new screen and delete current route from the navigation history:

Get.off(NextScreen());

To go to new screen and delete all the previous routes from navigation history:

Get.offAll(NextScreen());

To get data from new screen:

var data = await Get.to(Payment());
//on current screen, get data

Get.back(result: 'success');
//send back data to previous screen.

Read this also: How to Add Transition Animation on Flutter Navigations

Define routes on GetMaterialApp():

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

To go to new named route page:

Get.toNamed("/NextScreen");

To go to new page with arguement:

Get.toNamed("/NextScreen", arguments: 'Get is the best');

get argument on next screen:

print(Get.arguments);
//print out: Get is the best

Go to new page with dynamic parameters on route names:

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

on new screen, get these parameters:

print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo

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());
                      }, 
                      child: Text("Go to Page One")
                    ),

                    ElevatedButton(
                      onPressed:(){
                          Get.off(PageTwo());
                      }, 
                      child: Text("Go to Page Two and Clear Previous Route")
                    ),

                    ElevatedButton(
                      onPressed:(){
                          Get.offAll(PageThree());
                      }, 
                      child: Text("Go to Page Three and Clear All Previous History")
                    ),
                ],
              ),     
          )
      );
  }
}

//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 Two, you can create another file for this class
class PageTwo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(title:Text("Page Two")),
         body: Container(
           alignment: Alignment.center,
            child: ElevatedButton(
               onPressed:(){
                   Get.back();
                   //app will be closed, because there is one previous route, and its cleared,
                   //if there were many previous routes, it will escape, one back route, because, 
                   //the route just before this page is cleared by Get.off().
               }, 
               child: Text("Go Back")
              ),
         ),
      );
  }
}

//Screen Three, you can create another file for this class
class PageThree extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(title:Text("Page Three")),
         body: Container(
            alignment: Alignment.center,
            child: ElevatedButton(
               onPressed:(){
                   Get.back();
                   //app will closed, because all previous route history are cleared
                   // by Get.offAll()
               }, 
               child: Text("Go Back")
              ),
         ),
      );
  }

}

You can add named routes and navigate like we have mentioned above.