Can anyone tell me why I got this error in Flutter?

215

You have set the form key in Stack instead of a Form

To fix this, you can simply wrap your Stack with a Form, and move your key to that Form

like

...
return Scaffold(
      body: Form(
        key: _formKey,
        child: Stack(
          children: <Widget>[
...

Apart from that, I'd suggest putting your UI elements(login, email, and forgotPassword) outside the build method, to achieve it you'll have to create methods for them instead of having a field/variable

Share:
215
Monster Eat
Author by

Monster Eat

I'm currently learning about Flutter

Updated on January 03, 2023

Comments

  • Monster Eat
    Monster Eat about 1 year

    I got this error when I clicked my login button, I was expecting the validator would work but I just got this error every time I clicked my login button

    ════════ Exception caught by gesture ═══════════════════════════════════════════
    The following _CastError was thrown while handling a gesture:
    Null check operator used on a null value
    
    When the exception was thrown, this was the stack
    #0      _LoginPageState.build.<anonymous closure>
    package:project_ukk/…/login/login_page.dart:153
    #1      _InkResponseState._handleTap
    package:flutter/…/material/ink_well.dart:989
    #2      GestureRecognizer.invokeCallback
    package:flutter/…/gestures/recognizer.dart:198
    #3      TapGestureRecognizer.handleTapUp
    package:flutter/…/gestures/tap.dart:608
    #4      BaseTapGestureRecognizer._checkUp
    package:flutter/…/gestures/tap.dart:296
    #5      BaseTapGestureRecognizer.handlePrimaryPointer
    package:flutter/…/gestures/tap.dart:230
    #6      PrimaryPointerGestureRecognizer.handleEvent
    package:flutter/…/gestures/recognizer.dart:563
    #7      PointerRouter._dispatch
    package:flutter/…/gestures/pointer_router.dart:94
    #8      PointerRouter._dispatchEventToRoutes.<anonymous closure>
    package:flutter/…/gestures/pointer_router.dart:139
    #9      _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:539:8)
    #10     PointerRouter._dispatchEventToRoutes
    package:flutter/…/gestures/pointer_router.dart:137
    #11     PointerRouter.route
    package:flutter/…/gestures/pointer_router.dart:123
    #12     GestureBinding.handleEvent
    package:flutter/…/gestures/binding.dart:439
    #13     GestureBinding.dispatchEvent
    package:flutter/…/gestures/binding.dart:419
    #14     RendererBinding.dispatchEvent
    package:flutter/…/rendering/binding.dart:322
    #15     GestureBinding._handlePointerEventImmediately
    package:flutter/…/gestures/binding.dart:374
    #16     GestureBinding.handlePointerEvent
    package:flutter/…/gestures/binding.dart:338
    #17     GestureBinding._flushPointerEventQueue
    package:flutter/…/gestures/binding.dart:296
    #18     GestureBinding._handlePointerDataPacket
    package:flutter/…/gestures/binding.dart:279
    #22     _invoke1 (dart:ui/hooks.dart:170:10)
    #23     PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:331:7)
    #24     _dispatchPointerDataPacket (dart:ui/hooks.dart:94:31)
    (elided 3 frames from dart:async)
    Handler: "onTap"
    Recognizer: TapGestureRecognizer#db891
        debugOwner: GestureDetector
        state: possible
        won arena
        finalPosition: Offset(296.1, 619.7)
        finalLocalPosition: Offset(266.1, 36.2)
        button: 1
        sent tap down
    

    This is my login_page.dart

    import 'package:flutter/material.dart';
    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:project_ukk/constants/color_constant.dart';
    import 'package:project_ukk/constants/font_and_padding.dart';
    import 'package:project_ukk/pages/reset_password/reset_password.dart';
    import 'package:project_ukk/pages/signUp/signup_page.dart';
    import 'package:project_ukk/pages/user_page/navbar.dart';
    import 'package:flutter_svg/svg.dart';
    
    class LoginPage extends StatefulWidget {
      const LoginPage({Key? key}) : super(key: key);
    
      @override
      State<LoginPage> createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      //Form Key
      final _formKey = GlobalKey<FormState>();
    
      var email = "";
      var password = "";
    
      final emailController = TextEditingController();
      final passwordController = TextEditingController();
    
      @override
      void dispose() {
        // Clean up the controller when the widget is disposed.
        emailController.dispose();
        passwordController.dispose();
        super.dispose();
      }
    
      clearText() {
        emailController.clear();
        passwordController.clear();
      }
    
      userLogin() async {
        try {
          await FirebaseAuth.instance
              .signInWithEmailAndPassword(email: email, password: password);
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(
              builder: (context) => PageNavBar(),
            ),
          );
        } on FirebaseAuthException catch (e) {
          if (e.code == 'user-not-found') {
            print("No User Found for that Email");
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                backgroundColor: Colors.orangeAccent,
                content: Text(
                  "No User Found for that Email",
                  style: TextStyle(fontSize: 18.0, color: Colors.black),
                ),
              ),
            );
          } else if (e.code == 'wrong-password') {
            print("Wrong Password Provided by User");
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                backgroundColor: Colors.orangeAccent,
                content: Text(
                  "Wrong Password Provided by User",
                  style: TextStyle(fontSize: 18.0, color: Colors.black),
                ),
              ),
            );
          }
        }
      }
    
      @override
      Widget build(BuildContext context) {
        //Email Field
        final emailField = TextFormField(
          autofocus: false,
          controller: emailController,
          keyboardType: TextInputType.emailAddress,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Please Enter Email';
            } else if (!value.contains('@')) {
              return 'Please Enter Valid Email';
            }
            return null;
          },
          textInputAction: TextInputAction.next,
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.mail),
            contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
            hintText: "Email",
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        );
        //Password Field
        final passwordField = TextFormField(
          autofocus: false,
          controller: passwordController,
          obscureText: true,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Please Enter Password';
            }
            return null;
          },
          textInputAction: TextInputAction.next,
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.vpn_key),
            contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
            hintText: "Password",
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        );
        final loginButton = Material(
          elevation: 2,
          borderRadius: BorderRadius.circular(50),
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 60,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(50),
              gradient: LinearGradient(
                colors: const [kDarkModerateCyan, kModerateCyan],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
            ),
            child: Material(
              borderRadius: BorderRadius.circular(50),
              color: Colors.transparent,
              child: Center(
                child: MaterialButton(
                  child: Text(
                    "Login",
                    textAlign: TextAlign.center,
                    style: textButton,
                  ),
                  padding: EdgeInsets.fromLTRB(20, 10, 20, 15),
                  minWidth: MediaQuery.of(context).size.width,
                  onPressed: () {
                    // Validate returns true if the form is valid, otherwise false.
                    if (_formKey.currentState!.validate()) {
                      setState(() {
                        email = emailController.text;
                        password = passwordController.text;
                      });
                      userLogin();
                    }
                  },
                ),
              ),
            ),
          ),
        );
        final forgotPassword = Container(
          padding: EdgeInsets.symmetric(
            vertical: 10,
          ),
          child: GestureDetector(
            onTap: () => {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ResetPassword(),
                ),
              ),
            },
            child: Text(
              'Forgot Password ?',
              style: TextStyle(
                decoration: TextDecoration.underline,
                color: Colors.grey,
              ),
            ),
          ),
        );
        final registerNow = Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Don't have an account? ",
              style: TextStyle(color: Colors.grey),
            ),
            GestureDetector(
              child: Text(
                "Register Now",
                style: TextStyle(
                  color: kPrimaryColor,
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SignUpPage(),
                  ),
                );
              },
            ),
          ],
        );
    
        return Scaffold(
          backgroundColor: kWhiteColor,
          body: Stack(
            key: _formKey,
            children: <Widget>[
              SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      width: MediaQuery.of(context).size.width,
                      height: 300,
                      decoration: BoxDecoration(
                        color: kWhiteColor,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(100),
                          bottomRight: Radius.circular(100),
                        ),
                        gradient: LinearGradient(
                          colors: [kDarkModerateCyan, kModerateCyan],
                          stops: [0.0, 1],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            height: 60,
                          ),
                          SizedBox(
                            width: 200,
                            height: 200,
                            child: SvgPicture.asset(
                              'assets/logo.svg',
                              fit: BoxFit.contain,
                              color: kWhiteColor,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                        horizontal: 30,
                      ),
                      width: MediaQuery.of(context).size.width,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: <Widget>[
                          SizedBox(
                            height: 70,
                          ),
                          emailField,
                          SizedBox(
                            height: 20,
                          ),
                          passwordField,
                          SizedBox(
                            height: 20,
                          ),
                          forgotPassword,
                          SizedBox(
                            height: 30,
                          ),
                          loginButton,
                          SizedBox(
                            height: 50,
                          ),
                          registerNow,
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }
    

    My code is not connected to Firebase yet because I want to test if my validator is working or not, but I got this error instead.

    • Thalinda Bandara
      Thalinda Bandara about 2 years
      can you tell code line that causing the problem login_page.dart:153 i need to know code in this line
    • Monster Eat
      Monster Eat about 2 years
      @ThalindaBandara it was this part if (_formKey.currentState!.validate())
  • Monster Eat
    Monster Eat about 2 years
    Thank you, the solution is working fine and the message showed up as well
  • iamdipanshus
    iamdipanshus about 2 years
    you're welcome @MonsterEat, happy to help :)