Duplicate GlobalKey detected in widget tree - GetX Navigation

Question

I am using GetX plugin to navigate between the pages. And when I navigate back to the page which has Text input field I get 'Duplicate GlobalKey detected in widget tree'

Main Page

import 'package:flutter/material.dart';
import 'package:flutter_application_1/binding.dart';
import 'package:flutter_application_1/controller.dart';
import 'package:flutter_application_1/next.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Kids Game',
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      initialBinding: HomeBinding(),
      builder: EasyLoading.init(),
    );
  }
}

class HomePage extends GetView<HomeController> {
  const HomePage({Key? key}) : super(key: key);
  static final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Form(
              key: formKey,
              child: TextFormField(
                textAlign: TextAlign.center,
                autocorrect: false,
                controller: controller.editCtrl,
              )),
          InkWell(
            onTap: () {
              Get.to(() => NextPage())
            },
            child: Text("Next"),
          )
        ],
      ),
    );
  }
}

NextPage Widget

import 'package:flutter/material.dart';
import 'package:flutter_application_1/controller.dart';
import 'package:flutter_application_1/main.dart';
import 'package:get/get.dart';

class NextPage extends StatelessWidget {
  final homeCtrl = Get.find<HomeController>();
  NextPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text("this is next page"),
            InkWell(
              onTap: () {
                Get.offAll(() => HomePage(), transition: Transition.downToUp);
              },
              child: const Text("Go Back"),
            ),
          ],
        ),
      ),
    );
  }
}

Controller.dart

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

class HomeController extends GetxController {
  //GlobalKey<FormState> formKey = GlobalKey<FormState>();
  final editCtrl = TextEditingController();
}

Binding

import 'package:flutter_application_1/controller.dart';
import 'package:get/get.dart';

class HomeBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut(
      () => HomeController(),
    );
  }
}

When I navigate to NextPage, and then back to HomePage I get the error

Duplicate GlobalKey detected in widget tree.

I read a few different posts, and people had recommended using static with formkey as that has resolved the issue for them so I tried doing the same but it didn't work for me.

Answer 1

Just change the form key for each widget. Forexample: Just use globalFormKey1 for the first widget and GlobalFormKey2 for the second one. This will not give the error of duplications.

Answer 2

The issue got resolved. I did the following, in case someone else is facing the issue. I declared the key as private and change the variable from final.

GlobalKey<FormState> _formKey = GlobalKey<FormState>();

And based on a lot of answers I have read, the key is for UI layer so it shouldn't be declared in the controller.

Answer 3

When leaving the page with Getx use one of these options, depending on your routing solution:

Get.offAndToNamed('next_screen')

or

Get.off(NextScreen());

This removes the current page from the navigation stack and thus the error Duplicate GlobalKey detected in widget tree should be gone for good when reentering the page.

Source:

https://github.com/jonataslaw/getx/blob/master/documentation/en_US/route_management.md