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 GetX 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.

 

 

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 depicts the usage of getx state management concept.

 

If you have any query’s in this tutorial on GetX Route Management do let us know in the comment section below.If you like this tutorial do like share for more interesting updates.