Flutter - Navigation to Next Screen using GetX Library Function

Last Updated : 23 Mar, 2022

When we want to navigate between the screens in flutter then we use Navigator in Flutter. It uses context and builders for navigation. Sometimes, we pass the data to the next screen and fetch data on the next screen. When we use Navigator in flutter then its syntax is very large and it's not a good practice every time when we navigate to other screens. To simply our work, we have GetX library that provides so many functionalities. With GetX, we can navigate to the next screen using Get.to() and can return to the previous screen using Get.back(). We can also pass or retrieve data between screens.

Syntax:

Get.to()

Implementation:

Follow the steps to implement Get.to() :

Create a new Flutter application:

flutter create APPLICATION_NAME

Add get package in pubspec.yaml file under dependencies:

Import the package in main.dart:

 import 'package:get/get.dart';

Write some code to create two screens. Remember to use GetMaterialApp instead of MaterialApp when building an app.

Example 1:

Dart

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


void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("This is first screen", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () { 
                  Get.to(SecondScreen());
                }
              ),
            ),
          ],
        ),
      ),
    );
  }
}


class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text("This is second screen", textScaleFactor: 2,),
          
         ],
       ),
      ),
    );
  }
}

Output: We will navigate to the next screen using Get.to() without passing data.

Example 2:

Dart

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


void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("This is first screen", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () { 
                  Get.to(SecondScreen(), arguments: "Data received from first screen");
                }
              ),
            ),
          ],
        ),
      ),
    );
  }
}


class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks GFG"),
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text("This is second screen", textScaleFactor: 2,),
           // Data received is shown using Get.arguments.toString()
           Text(Get.arguments.toString())
          
         ],
       ),
      ),
    );
  }
}

Output: We are passing data using Get.to(SecondScreen(), arguments: "Data received from first screen").And receiving in next screen using Text(Get.arguments.toString()).

Flutter - Navigate From One Screen to Another

singh_teekam

Improve

Article Tags :

Flutter - Navigation to Next Screen using GetX Library Function

Implementation:

Similar Reads

Thank You!

What kind of Experience do you want to share?