'package:flutter/src/widgets/will_pop_scope.dart': Failed assertion: line 135 pos 12: '_route == ModalRoute.of(context)': is not true

Question

I am using Getx State Management. I have a LOGINSCREEN and its GetxController. In that GetxController I have defined a FormKey like this final formKey = GlobalKey<FormState>();

When from any other screen I navigate directly back to LOGINSCREEN (For SignOut) using this Get.offAllNamed(Routes.loginScreen); I face this issue.

I tried flutter clean, but it does not work. I can't seem to find workaround for this.

It would be a great help if anyone can find solution for this.

he following assertion was thrown building Form-[LabeledGlobalKey<FormState>#f1349](state: FormState#45516):
'package:flutter/src/widgets/will_pop_scope.dart': Failed assertion: line 135 pos 12: '_route == ModalRoute.of(context)': is not true.
2

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
Form-[LabeledGlobalKey<FormState>#f1349]
lib\…\login_screen\login_screen.dart:40
When the exception was thrown, this was the stack
#2      _WillPopScopeState.didUpdateWidget
package:flutter/…/widgets/will_pop_scope.dart:135
#3      StatefulElement.update
package:flutter/…/widgets/framework.dart:4682
#4      Element.updateChild
package:flutter/…/widgets/framework.dart:3293
#5      ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4520
#6      StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:4667

LoginScreen

class LoginScreen extends StatelessWidget {
  final controller = Get.find<AuthController>();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
Form(
                    key: controller.formKey,
                    child: Column(
                      children: [
                        TextFormField(
                          controller: controller.phoneController,
                          keyboardType: TextInputType.phone,
                          style: TextStyles.black14,
                          decoration: InputDecoration(
                              hintText: 'Phone Number',
                              hintStyle: TextStyles.hintStyle14,),
                          validator: (value) {
                            print(value);
                            if (value.length != 10) {
                              return 'Invalid phone number';
                            }
                            return null;
                          },
                        ),
TextButton(
          onPressed: () {
            controller.login();
          },
          child: Text('Login'))
],
    );
  }
}

Controller

import 'package:app/routing/routes.dart';
import 'package:app/utilities/shared_prefs.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class AuthController extends GetxController {
  //Handling loading state
  bool loading = false;

  final formKey = GlobalKey<FormState>();

  login() async {
    if (!formKey.currentState.validate()) return;
    loading = true;
    update();

    //API CALL
  }

  //Sign out user
  signOut() async {
    SharedPrefs().clear();
    Get.offAllNamed(Routes.loginScreen);
  }
}

Here is the flow. LoginScreen --> HomeScreen --> OtherScreen

Calling controller.signOut() from OtherScreen causes this error

Solution

This will occur if trying to reset the global key.

To solve this issue you can move the GlobalKey and TextEditingController to the page itself rather than declaring them in the controller.

class LoginScreen extends StatelessWidget {
  
   final formKey = GlobalKey<FormState>();

   TextEditingController phoneController = TextEditingController();


  final controller = Get.find<AuthController>();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
Form(
                    key:formKey,
                    child: Column(
                      children: [
                        TextFormField(
                          controller:phoneController,
                          keyboardType: TextInputType.phone,
                          style: TextStyles.black14,
                          decoration: InputDecoration(
                              hintText: 'Phone Number',
                              hintStyle: TextStyles.hintStyle14,),
                          validator: (value) {
                            print(value);
                            if (value.length != 10) {
                              return 'Invalid phone number';
                            }
                            return null;
                          },
                        ),
TextButton(
          onPressed: () {
           //Validate here
           if (!formKey.currentState!.validate()) return;
            controller.login();
          },
          child: Text('Login'))
],
    );
  }
}

Comments

[Rakesh Lanjewar]

Please share your code

[JC18]

Added, please check if you can help

[Rakesh Lanjewar]

Hello, You can solve the issue by moving the formkey to login page.

[JC18]

Yeah right, I moved formKey to login page and converted it to StatefulWidget. And it works. Thanks man!

[Rakesh Lanjewar]

You don't need a stateful widget I guess. Please mark my answer as accepted.

[djalmafreestyler]

There`s no way to keep the formKey inside the Controller? I have lots of logic there.

[Thierry P. Oliveira]

thank u so much, it worked. I just instantiated on view so I sent by function parameter to the controller to validate.