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.

score 3 · Answer 1 · answered Mar 15 '22 at 08:58

3

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.

answered Mar 15 '22 at 08:58

Saad Bashir

4,341
8
30
60

are you still able to have `const HomePage({Key? key}) : super(key: key);` with that? i am only able to use this without const constructor for my screen's widget class (HomePage in this case). – Matthew Kooshad Jul 22 '23 at 03:09

score 1 · Answer 2 · answered Apr 07 '22 at 17:52

1

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

answered Apr 07 '22 at 17:52

Dabbel

2,468
1
8
25

i'm using await Get.offAndToNamed('myScreen'); but it doesn't change the result for me on this problem. any other ideas? my code is structured similarly as OP's, except that i'm using GetBuilder in my screen widget. – Matthew Kooshad Jul 22 '23 at 03:06

score 0 · Answer 3 · answered Mar 14 '22 at 15:41

0

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.

answered Mar 14 '22 at 15:41

Usama majid

186
16

second widget doesn’t have any form – Saad Bashir Mar 14 '22 at 17:16

score 0 · Answer 4 · answered Feb 28 '23 at 10:46

0

Remove the static and final type from the key variable so if

static final GlobalKey _abcKey = GlobalKey();

change it to

GlobalKey _abcKey = GlobalKey();

answered Feb 28 '23 at 10:46

Enad

21
5

score 0 · Answer 5 · answered May 30 '23 at 10:08

I had issue similar to that navigation worked fine, but when I run web and save changes I got exception saying that there is a duplicate key new child use the same global key , I solve this by :

//replace
Get.to(Register())

//with

Get.toNamed('/register')

Duplicate GlobalKey detected in widget tree - GetX Navigation

5 Answers5