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

Navigation to Different Pages without Named Routes:

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.

Navigation to Different Pages with named routes:

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

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

Output Screen:

In this way, you can navigate yo different pages using GetX package.

No any Comments on this Article


Please Wait...