The many solutions that are already present for the same error do not seem to help in my case, thus the question.
I get a bunch of "RenderBox was not laid out" errors while my Scaffold body remains empty. The error occurs because of the Row
widget in my Column
widget. When removing the Row
widget the error does not occur anymore.
I tried wrapping the Row
widget in an Expanded
as well as SizedBox
or Flexible
but none helped. I also tried the same with the parent Column
widget even both at the same time with different combinations.
When looking at the Widget Details Tree in the Flutter Inspector the renderObject
of the Padding
at the top has size: MISSING
but constraints are finite constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=413.8)
.
Same goes for the child Column
widget with the following constraints: constraints: BoxConstraints(0.0.<=w<=340.7, 0.0<=h<=361.8)
.
The child Row
widget then also has size: MISSING
but constraints: BoxConstraints(0.0<=w<=340.7, 0.0<=h<=Infinity)
.
I thought that the child widgets inherit the constraints of the parent? And as I said wrapping the Row
with Expanded
, SizedBox
or Flexbox
did not help except I did it wrong.
I would be glad to get some answers and a solution. Thank you in advance!
The exact error messages can be found here: https://pastebin.com/n3RFbasT
My code:
class AddBalance extends StatefulWidget {
const AddBalance({Key? key}) : super(key: key);
@override
State<AddBalance> createState() => _AddBalanceState();
}
class _AddBalanceState extends State<AddBalance> {
final _formKey = GlobalKey<FormState>();
bool subtractSwitch = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text("Add Entry"),
),
body: Padding(
padding: const EdgeInsets.all(26.0),
child: Form(
autovalidateMode: AutovalidateMode.always,
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
autofocus: true,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Name",
),
),
Row(
children: [
TextFormField(
textInputAction: TextInputAction.next,
keyboardType: TextInputType.number,
maxLength: 10,
maxLines: 1,
decoration: const InputDecoration(
labelText: "Amount",
),
),
const Text("Subtract"),
Switch(
value: subtractSwitch,
onChanged: (value) {
setState(() {
subtractSwitch = value;
});
}),
],
)
],
),
),
),
);
}
}
CodePudding user response:
Just need to wrap your Row
with any Widget that give you boundaries like Center
, Align
, SizedBox
, etc.
In this case I used Align
and ... don't forget to use Expanded
over your TextFormField
inside the Row
.
Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text("Add Entry"),
),
body: Padding(
padding: const EdgeInsets.all(26.0),
child: Form(
autovalidateMode: AutovalidateMode.always,
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
autofocus: true,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
labelText: "Name",
),
),
Align(
child: Row(
children: [
Expanded(
child: TextFormField(
textInputAction: TextInputAction.next,
keyboardType: TextInputType.number,
maxLength: 10,
maxLines: 1,
decoration: const InputDecoration(
labelText: "Amount",
),
),
),
const Text("Subtract"),
Switch(
value: subtractSwitch,
onChanged: (value) {
setState(() {
subtractSwitch = value;
});
}),
],
),
)
],
),
),
),
)