GetX Route Management | Flutter GetX Routes

GetX Route Management :

GetX Route Management concept is used to navigate from one screen to another in flutter programming.This makes the navigation much simpler than default way of dealing it.

Almost every app has a need to navigate from one screen to another so to make it as simple as possible we can make use of Route Management and achieve the required output.

You can customize the way a page loads using GetX Route Management by providing transitions with different effects and also make the screen appear as dialog box with a close option.

You can create a routes page using which you can navigate using named routes even just like you do using flutter default scenario.

This routes page will also help us in deep linking our app with the dynamic url’s.

Provide binding, elevations, and also pass data from one screen to another using routing mechanism and fetch them easily on the other side.

Using GetX we have seen various examples <– have a look here for more information on this library usage and implementation.

GetX Route Management Video Tutorial :

Feel free to explore the tutorial below for a wealth of fascinating updates and insights. Dive deeper into the content to uncover new and exciting information that can enhance your understanding and skills in the subject matter.

Happy learning

pubspec.yaml :

Add the dependency ‘get’ to the pubspec file to make use of GetX library also make sure you provide the latest version of dependency to avoid code level issues.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

profile.dart :

We are creating a profile screen to navigate from home page, similarly you can add multiple screens and provide the same in routes class file.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Profile extends StatelessWidget {
  const Profile({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Profile"),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            Get.back();
          },
          child: Text("Back to Home"),
        ),
      ),
    );
  }
}

routes.dart :

We are declaring routes so that we can make easy navigation throughout the app.

import 'package:flutter_getx_tutorial/home.dart';
import 'package:flutter_getx_tutorial/profile.dart';
import 'package:get/get.dart';

class Routes {
  static final routes = [
    GetPage(name: '/', page: () => Home()),
    GetPage(name: '/profile', page: () => Profile())
  ];
}

home.dart :

This is the initial screen of the app i.e., the home screen through which we navigate to different screens using GetX Route Management.

import 'package:flutter/material.dart';
import 'package:flutter_getx_tutorial/profile.dart';
import 'package:get/get.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            Get.to(
              Profile(),
              transition: Transition.rightToLeft,
              duration: Duration(seconds: 5),
            );
            // Get.toNamed('/profile');
          },
          child: Text("Move to Profile"),
        ),
      ),
    );
  }
}

Transfer Data between screens :

In GetX Route Management we also have a option to pass data from one screen to another using arguments

Get.to(
  Home(),
  transition: Transition.rightToLeft,
  duration: Duration(seconds: 1),
  arguments: ['Abhishek', 'abhi@email.com', 98765431],
  preventDuplicates: true,
);

And now in another screen we will try to accept the data into a variable and store it as below.

var data = Get.arguments;

main.dart :

We are declaring GetMaterialApp and making the initial level configurations for the GetX Route Management to be used throughout the app.

import 'package:flutter/material.dart';
import 'package:flutter_getx_tutorial/routes.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: Routes.routes,
    );
  }
}

GetX Route Management Output :

This screen illustrates the implementation of the GetX state management concept, showcasing how it effectively manages the state within the application.

By utilizing GetX, developers can efficiently handle the application’s state, leading to improved performance, enhanced user experience, and simplified code maintenance.

If you have any questions about Route Management in this tutorial, please don’t hesitate to ask in the comments below. If you found this tutorial helpful, be sure to like and share for future updates on interesting topics.