Flutter: navegación a la siguiente pantalla usando la función de biblioteca GetX

Cuando queremos navegar entre las pantallas en flutter, usamos Navigator en Flutter. Utiliza contexto y constructores para la navegación. A veces, pasamos los datos a la siguiente pantalla y los recuperamos en la siguiente pantalla. Cuando usamos Navigator en flutter, su sintaxis es muy grande y no es una buena práctica cada vez que navegamos a otras pantallas. Para simplificar nuestro trabajo, tenemos la biblioteca GetX que proporciona muchas funcionalidades. Con GetX , podemos navegar a la siguiente pantalla usando Get.to() y podemos regresar a la pantalla anterior usando Get.back() . También podemos pasar o recuperar datos entre pantallas.

Sintaxis : 

Get.to()

Implementación:

Siga los pasos para implementar Get.to() :

• Cree una nueva aplicación de Flutter:

flutter create APPLICATION_NAME

• Agregue el paquete get en el archivo pubspec.yaml bajo las dependencias:

• Importe el paquete en main.dart:

 import 'package:get/get.dart';

• Escriba algo de código para crear dos pantallas. Recuerde usar GetMaterialApp en lugar de MaterialApp al crear una aplicación.

Ejemplo 1:

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

Salida: Navegaremos a la siguiente pantalla usando Get.to() sin pasar datos.

Ejemplo 2:

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

Salida: Estamos pasando datos usando Get.to(SecondScreen(), argumentos: «Datos recibidos de la primera pantalla») . Y recibimos en la siguiente pantalla usando Text(Get.arguments.toString()).