How to change textformfield spacing? - flutter

Question

I am new to using flutter. I want to ask. How to change the spacing between textformfield? I have done the same as textformfield address, Postcode and District for textformfield firstname, last name, and relationship but still not successful. I have changed the container margin and padding and used spacing wrap for textformfield firstname, last name and relationship but still not successful. Where is my coding error? Please, someone, help me in solving this problem.
This is my code:
Container(
width: double.infinity,
//margin: EdgeInsets.symmetric(vertical: 50),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 40),
padding: EdgeInsets.symmetric(horizontal: 210),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
borderRadius: BorderRadius.circular(5)),
/*decoration: BoxDecoration(
border: Border(
/* top: BorderSide(
color: Colors.blue,
width: 2.0,
),*/
bottom: BorderSide(
color: Colors.blue, width: 2.0))),*/
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Next of kin 1',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
//height: 51,
//width: 30,
width: double.infinity,
//margin: EdgeInsets.symmetric(horizontal: 10),
/*padding: EdgeInsets.symmetric(horizontal: 5),*/
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
borderRadius: BorderRadius.circular(5)),
child: Row(
children: [
Expanded(
child: Wrap(
direction: Axis.horizontal,
alignment: WrapAlignment.start,
//spacing: 20.0,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'First Name',
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 300,
//height: 100,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller:
nextOfKinFirstName,
onSaved: (String? value) {
nextOfKinFirstName.text =
value!;
},
decoration:
const InputDecoration(
border:
OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
)
],
),
),
Expanded(
child: Wrap(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Last Name',
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 300,
//height: 100,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: nextOfKinLastName,
onSaved: (String? value) {
nextOfKinLastName.text =
value!;
},
decoration:
const InputDecoration(
border:
OutlineInputBorder(),
hintText: 'Last Name',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
],
)),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 30,
child: Text(
'Relationship',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
Container(
height: 51,
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 1.0,
),
borderRadius:
BorderRadius.circular(5)),
child: SizedBox(
width: 300,
child: DropdownButton<String>(
underline: Container(
color:
Colors.transparent),
hint: _nextOfKinRelationship ==
null
? Text('Relationship')
: Text(
_nextOfKinRelationship),
isExpanded: true,
value:
_nextOfKinRelationship,
items: <String>[
'Father',
'Mother',
'Husband',
'Wife',
'Son',
'Daughter',
'Brother',
'Sister',
'Grandfather',
'Grandmother',
'Grandson',
'Grandaughter',
'Uncle',
'Aunt',
'Cousin',
'Nephew',
'Neice',
'Father in law',
'Mother in law',
'Son in law',
'Daughter in law',
'Brother in law',
'Sister in law',
'Friend'
].map((String value) {
return new DropdownMenuItem<
String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (value) {
setState(() {
_nextOfKinRelationship =
value!;
});
},
)),
),
],
),
)
],
))
],
),
),

Answer 1

you use Row to cover 3 TextField and wrap it with expanded, the space that available will be devide into 3.
but for the TextField you wrap it with certain width (SizedBox). and i think current screen is wider than all children inside Row
my suggestion is change it with Container which is fit available space.
Row(
children: [
// option 1
Expanded(
child: Column(
children: [
Text("label"),
TextField(), // without sizebox ,
],
),
),
//option 2
Expanded(
child: Column(
children: [
Text("label"),
Container(
width: double.infinity, // push to maximum space available
child: TextField(),
) // use container insted if you want to make decoration ,
],
),
),
],
);