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

Cuando estamos usando cualquier aplicación entonces hacemos navegación para navegar entre pantallas . A veces queremos volver a la pantalla anterior, por lo que normalmente usamos Navigator.pop(context) . Esto es usar contexto y, a veces, encontramos atajos para hacer la tarea fácilmente. Para eso, tenemos Get.back() en flutter. Podemos enviar el resultado a la ruta anterior y hacer las operaciones.

Sintaxis

Get.back()

Implementación:

  • Cree una nueva aplicación flutter.
flutter create APPNAME
  • Agregue obtener dependencia en el archivo pubspec.yaml en la sección de dependencia.

  • Importe el paquete en main.dart.
import 'package:get/get.dart';
  • Ahora, escribe código para implementar Get.back(). Para eso, deberíamos tener dos pantallas y primero, navegamos a una nueva pantalla y volvemos a la pantalla anterior con algunos datos.

Ejemplo 1:

Dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
  
void main() {
  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: Page1(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Page1 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("Page 1", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () { 
                  Get.to(Page2());
                }
              ),
            ),
          ],
        ),
      ),
    );
  }
}
  
  
class Page2 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("Page 2", textScaleFactor: 2,),
           Container(
              child: ElevatedButton(
                child: Text("Navigate to previous screen"),
                onPressed: ()=> Get.back()
              ),
            ),
         ],
       ),
      ),
    );
  }
}

Salida: en esto, no estamos enviando ningún estado obtenido después de la devolución. Simplemente estamos regresando usando Get.back().

Ejemplo 2:

Dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
  
void main() {
    
  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: Page1(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}
  
class _Page1State extends State<Page1> {
  String? x;
  
  @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("Page 1", textScaleFactor: 2,),
            Container(
              child: ElevatedButton(
                child: Text("Navigate to next screen"),
                onPressed: () async{ 
                 x= await  Get.to(Page2());
                 setState(() {
                     
                 });
                }
              ),
            ),
            Text(x?? x.toString(), textScaleFactor: 2,),
          ],
        ),
      ),
    );
  }
}
  
  
class Page2 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("Page 2", textScaleFactor: 2,),
           Container(
              child: ElevatedButton(
                child: Text("Navigate to previous screen"),
                onPressed: ()=> Get.back( result: "Data after returning to first page")
              ),
            ),
         ],
       ),
      ),
    );
  }
}

Salida : en esto, enviamos los resultados a la página de inicio usando Get.back (resultado: «Datos después de regresar a la primera página»). Y recibir el resultado usando x= await Get.to(Page2()); en Primera página.

Publicación traducida automáticamente

Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *