How to set the container width on the page? - flutter

Question

This is a design I want:
This is my current design:
I am new to using flutter. My question is how to set the container width so that the textfield box looks more fit and neat. I tried to set the container width now but still failed to make the textfield box look fit. What should I do? Please help from stack overflow.
This is my code:
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
//SizedBox(height: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Center(
child: FutureBuilder(
future: _getSignedURL(
widget.patientProfile.avatar),
builder: (BuildContext context,
AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
color: Colors.white,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Color.fromRGBO(
255, 255, 255, 0.3),
border: Border.all(
color: Colors.black12,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(200.0)),
),
),
);
} else {
return CircleAvatar(
radius: 100,
backgroundImage:
NetworkImage(snapshot.data),
);
}
},
),
),
),
],
),
),
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'First Name',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style:
const TextStyle(color: Colors.black),
controller: firstName,
onSaved: (String? value) {
firstName.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16),
),
),
),
],
)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Last Name',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: lastName,
onSaved: (String? value) {
lastName.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Last Name',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Date Of Birth',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: dateOfBirth,
onSaved: (String? value) {
dateOfBirth.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Date Of Birth',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
)
],
)),
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Gender',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style:
const TextStyle(color: Colors.black),
controller: gender,
onSaved: (String? value) {
gender.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Gender',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16),
),
),
),
],
)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Marital Status',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: maritalStatus,
onSaved: (String? value) {
maritalStatus.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Marital Status',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'ID or Passport',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller:govermentIssuedID,
onSaved: (String? value) {
govermentIssuedID.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'ID or Passport',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
)
],
)),
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Phone Number',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style:
const TextStyle(color: Colors.black),
controller: contactNumber,
onSaved: (String? value) {
contactNumber.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Phone Number',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16),
),
),
),
],
)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Email',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: email,
onSaved: (String? value) {
email.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Email',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'District',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 400,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller:address,
onSaved: (String? value) {
address.text = value!;
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'District',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
)
],
)),

Answer 1

You can control the position of elements in a row by using the alignment property.. Try
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignemt : MainAxisAlignment.spaceBetween, // or MainAxisAlignment.spaceAround
children: []
)
)

Answer 2

There is a padding property in Container widget you can use that property for this design. Add padding to the top container like this:
Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: ...
)