Error when insert Textfield into column Flutter - user-interface

Question

This is my code
SafeArea(
child: Scaffold(
body: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Flexible(
child: Container(
width: 100,
child:
TextFormField(decoration: const InputDecoration()),
),
)
],
),
Column(
children: <Widget>[
Flexible(
child: Container(
width: 100,
child:
TextFormField(decoration: const InputDecoration()),
),
)
],
),
Column(
children: <Widget>[
Flexible(
child: Container(
width: 100,
child:
TextFormField(decoration: const InputDecoration()),
),
)
],
)
],
)
],
),
),
),
);
But when I run that code it shows error like following
═══════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#1b387 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
The relevant error-causing widget was
Row
lib\GPA1.dart:24
════════════════════════════════════════════════════════════════════════════════
I can't build my project. Can anyone help me??
I used flutter 1.17.0
I use my mobile device to preview this
I use Samsung Galaxy A5 2016
I use Flexible to wrap TextFormField but it shows the same error again.

Answer 1

You need to wrap Row Widget with Expanded widget.
SafeArea(
child: Scaffold(
body: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
Expanded( // added
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Flexible(
child: Container(
width: 100,
child: TextFormField(
decoration: const InputDecoration()),
),
)
],
),
Column(
children: <Widget>[
Flexible(
child: Container(
width: 100,
child: TextFormField(
decoration: const InputDecoration()),
),
)
],
),
Column(
children: <Widget>[
Flexible(
child: Container(
width: 100,
child: TextFormField(
decoration: const InputDecoration()),
),
)
],
)
],
),
)
],
),
),
));

Answer 2

I think you should get rid of the "Flexible".
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Container(
width: 100,
child: TextFormField(decoration: const InputDecoration()),
),
],
),
Column(
children: <Widget>[
Container(
width: 100,
child: TextFormField(decoration: const InputDecoration()),
),
],
),
Column(
children: <Widget>[
Container(
width: 100,
child: TextFormField(decoration: const InputDecoration()),
),
],
),
],
),

Answer 3

This code will do the job.
SafeArea(
child: Scaffold(
body: Container(
margin: EdgeInsets.all(5),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(
left: 5, right: 5),
child: TextFormField(
decoration:
const InputDecoration()))),
Expanded(
child: Padding(
padding: EdgeInsets.only(
left: 5, right: 5),
child: TextFormField(
decoration:
const InputDecoration()))),
Expanded(
child: Padding(
padding: EdgeInsets.only(
left: 5, right: 5),
child: TextFormField(
decoration:
const InputDecoration())))
],
),
],
),
),
));
Result