The error shows : Multiple widgets used the same GlobalKey - flutter

Question

I guess the error is where i call the password and username fields from same function !!!
Here is my whole code :
I tried to fix myself and as i am a begginner it doesnt seem to work well for me, besides ive seen similar questions here, but none of the was using a function to alocate these keys so i couldnt figure out my problem from that .. Does anyone can halp ??
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:medic_admin/config/palette.dart';
class loginSignupScreen extends StatefulWidget {
const loginSignupScreen({Key? key}) : super(key: key);
#override
_loginSignupScreenState createState() => _loginSignupScreenState();
}
class _loginSignupScreenState extends State<loginSignupScreen> {
#override
bool isMale = true;
bool isSignupScreen = true;
bool isRememberMe = false;
var formKey = new GlobalKey<FormState>();
void validateAndSave() {
var form = formKey.currentState;
if (form!.validate()) {
print("Form is valid");
} else {
print("Form is not valid !");
}
}
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Palette.backgroundColor,
body: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 250,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/hospitalroom.jpg"),
fit: BoxFit.fill),
),
child: Container(
padding: EdgeInsets.only(top: 90, left: 10),
color: Color(0xFF3B5999).withOpacity(.60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: " Welcome to ",
style: TextStyle(
fontSize: 25,
letterSpacing: 2,
color: Colors.orange[600],
),
children: [
TextSpan(
text: "MeDIC ",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.orange[600],
),
),
],
),
),
SizedBox(
height: 5,
),
Text(
isSignupScreen
? " Sign up to continue"
: " Log in to continue",
style: TextStyle(
fontSize: 15,
letterSpacing: 1,
color: Colors.white,
),
),
],
),
),
),
),
//############ Main container for login and signup field ############
Positioned(
top: 200,
bottom: 100,
child: AnimatedContainer(
duration: Duration(milliseconds: 700),
padding: EdgeInsets.all(10),
height: 380,
width: MediaQuery.of(context).size.width - 40,
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 15,
spreadRadius: 5,
),
],
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {
setState(() {
isSignupScreen = false;
});
},
child: Column(
children: [
Text(
" LOGIN ",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: !isSignupScreen
? Palette.activeColor
: Palette.textColor1,
),
),
if (!isSignupScreen)
Container(
margin: EdgeInsets.only(top: 3),
height: 2,
width: 55,
color: Colors.orange,
),
],
),
),
GestureDetector(
onTap: () {
setState(() {
isSignupScreen = true;
});
},
child: Column(
children: [
Text(
" SIGN UP ",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: isSignupScreen
? Palette.activeColor
: Palette.textColor1,
),
),
if (isSignupScreen)
Container(
margin: EdgeInsets.only(top: 3),
height: 2,
width: 55,
color: Colors.orange,
),
],
),
),
],
),
if (isSignupScreen) buildSignupScreen(),
if (!isSignupScreen) buildLoginScreen(),
],
),
),
),
//########### Submit button ############
Positioned(
top: 480,
left: 0,
right: 0,
child: Center(
child: Container(
alignment: Alignment.center,
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 5,
spreadRadius: 2,
),
],
),
child: Center(
child: FloatingActionButton(
onPressed: validateAndSave,
backgroundColor: Colors.orange,
splashColor: Colors.white,
child: Text("OK"),
),
),
),
),
),
//########### Logo blooray ###########
Positioned(
top: MediaQuery.of(context).size.height - 75,
left: 5,
right: 0,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Center(
child: Image(
image: AssetImage("assets/images/blooraylogo1.png"),
width: 500,
height: 50,
),
),
],`enter code here`
),
),
),
],
),
);
}
//############# Login Window ############
Container buildLoginScreen() {
return Container(
margin: EdgeInsets.only(top: 50),
child: Column(
children: [
buildTextField(
MdiIcons.phone,
"Phone",
false,
true,
),
buildTextField(
MdiIcons.lock,
"Password",
true,
false,
),
],
),
);
}
//############# Sign Up Window ############
Container buildSignupScreen() {
return Container(
margin: EdgeInsets.only(top: 10),
child: Column(
children: [
buildTextField(
MdiIcons.account,
"User Name",
false,
false,
),
buildTextField(
MdiIcons.phone,
"Phone",
false,
true,
),
buildTextField(
MdiIcons.lock,
"Password",
true,
false,
),
],
),
);
}
//##########TextField##########
Widget buildTextField(
IconData icon, String hintText, bool isPassword, bool isFon) {
return Padding(
padding: const EdgeInsets.only(top: 10.0),
child: new Form(
key: formKey,
child: TextFormField(
validator: (value) =>
value!.isEmpty ? "Field cannot be empty !" : null,
obscureText: isPassword,
keyboardType: isFon ? TextInputType.number : TextInputType.text,
decoration: InputDecoration(
prefixIcon: new Icon(
icon,
color: Palette.iconColor,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Palette.textColor1),
borderRadius: BorderRadius.circular(35),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Palette.textColor1),
borderRadius: BorderRadius.circular(35),
),
contentPadding: EdgeInsets.all(10),
hintText: hintText,
hintStyle: TextStyle(
fontSize: 14,
color: Palette.textColor1,
),
),
),
),
);
}
}
I guess the error is where i call the password and username fields from same function !!!

Answer 1

I got your problem.. you did a small mistake. you have added a 'Form' widget in the buildTextField function. so you are calling your function 3 times and every time it is going to create a new Form instance with the same key.
Solution: remove the 'Form' widget from the buildtextField function and wrap it in an outer container like this :
remove from buldTextField
Widget buildTextField(
IconData icon, String hintText, bool isPassword, bool isFon) {
return Padding(
padding: const EdgeInsets.only(top: 10.0),
child: TextFormField(
validator: (value) =>
value!.isEmpty ? "Field cannot be empty !" : null,
obscureText: isPassword,
keyboardType: isFon ? TextInputType.number : TextInputType.text,
decoration: InputDecoration(
prefixIcon: new Icon(
icon,
color: Palette.iconColor,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Palette.textColor1),
borderRadius: BorderRadius.circular(35),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Palette.textColor1),
borderRadius: BorderRadius.circular(35),
),
contentPadding: EdgeInsets.all(10),
hintText: hintText,
hintStyle: TextStyle(
fontSize: 14,
color: Palette.textColor1,
),
),
),
);
}
}
wrap it in the outer container
Form buildSignupScreen() {
return Form(
key_ _formKey
child: Container(
margin: EdgeInsets.only(top: 10),
child : Column(
children: [
buildTextField(
MdiIcons.account,
"User Name",
false,
false,
),
buildTextField(
MdiIcons.phone,
"Phone",
false,
true,
),
buildTextField(
MdiIcons.lock,
"Password",
true,
false,
),
],
),
)
);
}
Example for how to use Forms in flutter
let me know if there is any problem