RenderBox was not laid out: flutter error - flutter

Question

I'm new to flutter. I'm creating a login page. but now getting the below error in my code when I add remember me and forget password buttons into a Row Widget to display in one row. how to solve this. for your reference I have attached the full code and UI. login_screen full dart code , login_screen UI image
RenderBox was not laid out: _RenderListTile#c9c23
relayoutBoundary=up24 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart': Failed assertion: line 1982
pos 12: 'hasSize'
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Form(
key: _formKey,
autovalidateMode: AutovalidateMode.disabled,
child: Container(
margin: const EdgeInsets.all(20.0),
child: Column(
children: [
SizedBox(
height: 40,
),
TextFormField(
controller: emailEditingController,
enabled: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email/ Username",
hintStyle: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
loginUserData['email'] = value!;
},
),
SizedBox(
height: 20,
),
TextFormField(
controller: passwordEditingController,
obscureText: _isObscure,
enabled: typing,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
suffixIcon: IconButton(
icon: Icon(_isObscure
? Icons.visibility
: Icons.visibility_off),
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
}),
hintText: "Password",
hintStyle: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14)),
validator: (String? Password) {
if (Password != null && Password.isEmpty) {
return "Password can't be empty";
}
return null;
},
onChanged: (String? text) {
password = text!;
// print(password);
},
onSaved: (value) {
loginUserData['password'] = value!;
},
),
// this is where I got an error.
Row(
// mainAxisAlignment: MainAxisAlignment.start,
children: [
CheckboxListTile(
title: const Text(
"Remember Me",
style: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
value: checkedValue,
onChanged: (newValue) {
FocusManager.instance.primaryFocus?.unfocus();
setState(() {
if (isLoading != true) {
checkedValue = newValue!;
print(newValue);
}
});
},
contentPadding: EdgeInsets.only(left: 0, top: 0),
controlAffinity:
ListTileControlAffinity.leading, // <-- leading Checkbox
),
SizedBox(
width: 5,
),
TextButton(
child: Text(
"Forget Password",
style: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
onPressed: () {
//Get.to(ForgetPassword());
},
)
],
),
SizedBox(
height: 30,
),
isLoading
? SpinKitDualRing(
color: mainGreen,
size: 40,
)
: GestureDetector(
child: MainButton("Login"),
onTap: () {
},
),
SizedBox(
height: 30,
),
GestureDetector(
child: MainButton("Signup"),
onTap: () {
},
),
],
),
),
),
);
}

Answer 1

The issue is coming from CheckboxListTile while it is inside the Row,
Wrap CheckboxListTile with Expanded widget, it will get available width inside row.
Row(
children: [
Expanded(
child: CheckboxListTile(
More about Expanded.