Search code examples
fluttervalidationriverpodconsumer

Flutter riverpod in Multiple widgets used the same GlobalKey.( Form key )


  • GlobalKey

  • my global key why not work in flutter river pod in consumer widget in form key.

in my code i used different different multiple global keys but it' showing like same here i represent my code file that include all the thing can any one guide up on why it's happened

class LoginKey{
  static final GlobalKey<FormState> loginFormKey = GlobalKey<FormState>();
  static final GlobalKey<FormState> signUpFormKey = GlobalKey<FormState>();
}

  • here i share the code of my sign up screen
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:power_solution/view/signUp/sign_up_all_provider.dart';

import '../../utility/text_form_field_decoration.dart';
import '../login/login_all_provider.dart';

class SignUpTextFormField extends ConsumerWidget {
  const SignUpTextFormField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context,WidgetRef ref) {

    final passwordVisiblePro = ref.watch(passwordVisibleProvider);

    return Form(
      key:LoginKey.signUpFormKey,
      child: Column(
        children: [
          const SizedBox(height: 32),
          TextFormField(
            onChanged: (val) {
              ref.read(nameTextFieldProvider.notifier).state = val.toString();
            },
            validator: (val) {
              return Validation.validationIsEmpty(val.toString());
            },
            decoration: textFormFieldDecoration.copyWith(labelText: "Name",),
          ),
          const SizedBox(height: 20),
          TextFormField(
            maxLength: 10,
            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
            keyboardType: TextInputType.number,
            onChanged: (val) {
              ref.read(mobileTextFieldProvider.notifier).state = val.toString();
            },
            validator: (val) {
              return Validation.validationWithMobileNo(val.toString());
            },
            decoration: textFormFieldDecoration.copyWith(labelText: "Mobile Number",),
          ),
          const SizedBox(height: 20),
          TextFormField(
            onChanged: (val) {
              ref.read(passwordTextFieldProvider.notifier).state = val.toString();
            },
            validator: (val) {
              return Validation.validationIsEmpty(val.toString());
            },
            obscureText: passwordVisiblePro,
            decoration: textFormFieldDecoration.copyWith(labelText: "Password",suffixIcon: IconButton(
              onPressed: () {
                ref.read(passwordVisibleProvider.notifier).state = !passwordVisiblePro;
              },
              icon: Icon(passwordVisiblePro ?  Icons.visibility_off:Icons.visibility,
                color: const Color(0xffA9ADAD),
              ),
            )),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }

}

  • here i share my login screen
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:power_solution/view/login/login_all_provider.dart';
import 'package:power_solution/view/signUp/sign_up_all_provider.dart';

import '../../core/app_colors.dart';
import '../../core/app_routes.dart';
import '../../utility/text_form_field_decoration.dart';

class LoginTextFormField extends ConsumerWidget {
  const LoginTextFormField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context,WidgetRef ref) {

    final passwordVisiblePro = ref.watch(loginPasswordVisibleProvider);

    return Form(
      key: LoginKey.loginFormKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          const SizedBox(height: 32),
          TextFormField(
            maxLength: 10,
            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
            keyboardType: TextInputType.number,
            onChanged: (val) {
              ref.read(loginMobileTextFieldProvider.notifier).state = val.toString();
            },
            validator: (val) {
              return Validation.validationWithMobileNo(val.toString());
            },
            decoration: textFormFieldDecoration.copyWith(labelText: "Mobile Number",),
          ),
          const SizedBox(height: 20),
          TextFormField(
            onChanged: (val) {
              ref.read(loginPasswordTextFieldProvider.notifier).state = val.toString();
            },
            validator: (val) {
              return Validation.validationIsEmpty(val.toString());
            },
            obscureText: passwordVisiblePro,
            decoration: textFormFieldDecoration.copyWith(labelText: "Password",suffixIcon: IconButton(
              onPressed: () {
                ref.read(passwordVisibleProvider.notifier).state = !passwordVisiblePro;
              },
              icon: Icon(passwordVisiblePro ?  Icons.visibility_off:Icons.visibility,
                color: const Color(0xffA9ADAD),
              ),
            )),
          ),
          const SizedBox(height: 2),
          InkWell(
            onTap: () {
              Navigator.pushNamed(
                context,
                AppRoutes.forgotPassword,
              );
            },
            child: Container(
              padding: const EdgeInsets.fromLTRB(10, 10, 0, 10),
              child: Text('Forgot your password ?',style: GoogleFonts.poppins(
              color: AppColor.signupBGColor,
              fontSize: 12,
              fontWeight: FontWeight.w600
         )),
            ),
          ),
          const SizedBox(height: 30),
        ],
      ),
    );
  }
}

  • here i share my error image

enter image description here


Solution

  • How many [SignUpTextFormField] do you use?

    If you use the SignUpTextFormField to a lot of place will face this error.

    Solved method:
    Move the LoginKey.signUpFormKey to LoginTextFormField inside.