How to make textformfield and dropdownmenu close? - flutter

Question

This is the design I want:
This is my current design:
How to make textfromfield and dropdownmenu close like in the design I showed. And another thing is how to make the circlebox have the same distance as in the design. I have tried but without success. Please guide. I am new to using flutter.
This is my code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 35),
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(30, 0, 10, 20),
padding: EdgeInsets.all(30),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Wrap(
direction: Axis.horizontal,
alignment: WrapAlignment.end,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
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),
);
}
},
),
),
),
new Positioned(
left: MediaQuery.of(context).size.width *
100,
top: MediaQuery.of(context).size.height *
200,
child: Container(
width: 200,
height: 50,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
// ignore: deprecated_member_use
child: OutlinedButton(
style: OutlinedButton.styleFrom(
//primary: Colors.white,
//backgroundColor: Colors.white,
side: BorderSide(
color: Colors.blue, width: 1),
),
child: Text(
'Save Profile',
style:
TextStyle(color: Colors.blue),
),
onPressed: () =>
_updatePatientProfile(),
),
)),
Container(
width: double.infinity,
margin:
const EdgeInsets.symmetric(vertical: 0),
padding: const EdgeInsets.symmetric(
horizontal: 100),
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(
'* MRN',
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 300,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: mrn,
onSaved: (String? value) {
mrn.text = value!;
},
decoration:
const InputDecoration(
border:
OutlineInputBorder(),
hintText: 'MRN',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
)
],
),
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'* Salutation',
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 10,
),
Container(
height: 55,
//width: 30,
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: _salutation == null
? Text(
'* Salutation',
style: TextStyle(
color: Colors
.red),
)
: Text(_salutation),
isExpanded: true,
value: _salutation,
items: <String>[
'Mr.',
'Mrs.',
'Ms.'
].map((String value) {
return new DropdownMenuItem<
String>(
value: value,
child:
new Text(value),
);
}).toList(),
onChanged: (value) {
setState(() {
_salutation = value!;
});
},
),
)),
Container()
],
),
)
],
),
)
],
),
)
],
)
],
),
),
],
),
),

Answer 1

Use dropdown_button2 package,
final List<String> _items = [
'item 1',
'item 2',
'item 3',
'item 4',
];
String _selectedValue; // use list of string for your dropdown children
// put these above of build function
.
.
Row(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyDropdown(
selectedValue: _selectedValue,
dropdownItems: _items,
),
],
),
),
const SizedBox(width: 10),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyDropdown(
selectedValue: _selectedValue,
dropdownItems: _items,
),
],
),
),
const SizedBox(width: 10),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('*To be filled ........'),
],
),
),
],
);
and here is your Dropdown widget, i extract it to make clean code
class MyDropdown extends StatefulWidget {
List<String> dropdownItems;
String selectedValue;
MyDropdown({this.dropdownItems, this.selectedValue});
#override
State<MyDropdown> createState() => _MyDropdownState();
}
class _MyDropdownState extends State<MyDropdown> {
#override
Widget build(BuildContext context) {
return DropdownButtonFormField2(
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.zero,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
isExpanded: true,
hint: const Text(
'Select Your Gender',
style: TextStyle(fontSize: 14),
),
icon: const Icon(
Icons.arrow_drop_down,
color: Colors.black45,
),
iconSize: 30,
buttonHeight: 60,
buttonPadding: const EdgeInsets.only(left: 20, right: 10),
items: widget.dropdownItems
.map((item) => DropdownMenuItem<String>(
value: item,
child: Text(
item,
style: const TextStyle(
fontSize: 14,
),
),
))
.toList(),
validator: (value) {
// validate here
},
onChanged: (value) {
//Do something when changing the item if you want.
},
onSaved: (value) {
widget.selectedValue = value.toString();
},
);
}
}
play with values and add TextField in child of column to get result