I want to any way set Full Width 100% in dart/flutter. but it is not set in dropdown list in flutter.
my source code below in details.
Container(
height: 50,
width: 500.0,
// width: MediaQuery.of(context).size.width,
child: Expanded(
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
isExpanded: true,
value: _selectionRetailer,
style: Theme.of(context).textTheme.bodyText1,
// items: mRetailList.map((index) {
items: mRouteWiseRetailList.map((index) {
return DropdownMenuItem(
alignment: Alignment.center,
child: new Text(
index.retailerTitle + "_" + index.retailerAddress,
style: TextStyle(fontSize: 10),
),
value: index.retailerID,
);
}).toList(),
onChanged: (sal) {
setState(() {
mRetailer = sal;
_selectionRetailer = sal;
retailerID = sal;
print("SAVEDATADD" + "retailerID: $retailerID");
if (reasonID == "0") {
} else {
startTime = Fhelper.CurrentDateTime();
Fhelper.showToast(
"RetailerID: $retailerID, StartTime: $startTime, salesOfficerID: $salesOfficerID");
print("SAVEDATADD" +
"RetailerID: $retailerID, StartTime: $startTime, salesOfficerID: $salesOfficerID,entryBy : $entryBy");
clearAll();
}
});
},
),
),
),
),
),
how to achieve this full width in dropdown in flutter.
Remove the Expanded and Container and follow the given below code
DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
isExpanded: true,
value: dropdownvalue,
icon: Icon(Icons.keyboard_arrow_down),
items:items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items)
);
}
).toList(),
onChanged: (String newValue){
setState(() {
dropdownvalue = newValue;
});
},
),
),
)
Related
i m new to flutter and am trying to make a Responsive app , i have a textfield and i wanted to add a dropdown list next to it it s working but it shows a error " right overflowed by 150 pixels" even tho i m using the Expanded widget in the child . the error is in both dropdownlists
thank you for ur help in advance
import '../Classes/demandes.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '../data/menu_item.dart';
import '../Classes/menu.dart';
import '../data/logout.dart';
class Demandes extends StatefulWidget {
#override
_demande createState() => _demande();
}
class _demande extends State<Demandes> {
String dropdownValue = 'Assets';
String dropdownValue1 = 'Locations';
Future<Demandes?> submitData(String description, ASSETNUM, location,
DESCRIPTION_LONGDESCRIPTION) async {
var respone = await http.post(
Uri.parse(
'http://9080/maxrest/rest/mbo/sr/?_lid=azizl&_lpwd=max12345m&_format=json'),
body: {
"description": description,
"ASSETNUM": ASSETNUM,
"location": location,
"DESCRIPTION_LONGDESCRIPTION": DESCRIPTION_LONGDESCRIPTION,
});
var data = respone.body;
print(data);
if (respone.statusCode == 201) {
dynamic responseString = respone.body;
azizFromJson(responseString);
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Demande de service Cree")));
} else
return null;
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("error")));
return null;
}
late Demandes? _demandes;
TextEditingController descriptionController = TextEditingController();
TextEditingController ASSETNUMController = TextEditingController();
TextEditingController locationController = TextEditingController();
TextEditingController DESCRIPTION_LONGDESCRIPTIONController =
TextEditingController();
Widget DescriptionTextField() {
return TextField(
decoration: InputDecoration(
// labelText: "Description",
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
),
controller: descriptionController,
);
}
Widget AssetTextField() {
return TextField(
decoration: InputDecoration(
// labelText: "Asset",
border: OutlineInputBorder(),
),
controller: ASSETNUMController,
);
}
Widget DeatialsTextField() {
return TextField(
decoration: InputDecoration(
// labelText: "Details",
border: OutlineInputBorder(),
),
maxLines: 10,
controller: DESCRIPTION_LONGDESCRIPTIONController,
);
}
Widget LocationTextField() {
return TextField(
decoration: InputDecoration(
// labelText: "Location",
border: OutlineInputBorder(),
),
controller: locationController,
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Creation Demande de service'),
actions: [
PopupMenuButton<MenuItem>(
onSelected: (item) => onSelected(context, item),
itemBuilder: (context) =>
[...MenuItems.itemsFirst.map(buildItem).toList()],
)
],
),
body: ListView(
padding: EdgeInsets.all(8),
// ignore: prefer_const_literals_to_create_immutables
children: [
ListTile(
title: Text("Description"),
),
DescriptionTextField(),
ListTile(
title: Text("Details"),
),
DeatialsTextField(),
ListTile(title: Text("Asset")),
Row(
children: <Widget>[
Expanded(
child: AssetTextField(),
),
const SizedBox(
width: 20,
),
Expanded(
child: DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_drop_down),
elevation: 16,
style: const TextStyle(color: Colors.blue),
underline: Container(
height: 2,
color: Color.fromARGB(255, 0, 140, 255),
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>[
'Assets',
'100014 moteur 3',
'100027 Système de freinage 1',
'12500 Overhead Crane #2',
'13110 Feeder System',
'13120 Bottom Sealing System',
'13130 Stripper System',
'13140 Conveyor System- Pkg. Dept.',
'13141 Elevator Rails And Drainpan Assembly',
'13142 Carton Escapement Assembly #2',
'13143 Chain Wash Assembly',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)),
],
),
ListTile(
title: Text("Location"),
),
Row(
children: <Widget>[
Expanded(
child: LocationTextField(),
),
const SizedBox(
width: 20,
),
Expanded(
child: DropdownButton<String>(
value: dropdownValue1,
icon: const Icon(Icons.arrow_drop_down),
elevation: 16,
style: const TextStyle(color: Colors.blue),
underline: Container(
height: 2,
color: Color.fromARGB(255, 0, 140, 255),
),
onChanged: (String? newValue) {
setState(() {
dropdownValue1 = newValue!;
});
},
items: <String>[
'Locations',
'100014 moteur 3',
'10002 7 Système de freinage 1',
'12500 Overhead Crane #2',
'13110 Feeder System',
'13120 Bottom Sealing System',
'13130 Stripper System',
'13140 Conveyor System- Pkg. Dept.',
'13141 Elevator Rails And Drainpan Assembly',
'13142 Carton Escapement Assembly #2',
'13143 Chain Wash Assembly',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)),
],
),
const SizedBox(
width: 20,
),
Padding(padding: EdgeInsets.all(10)),
ElevatedButton(
onPressed: (() async {
String description = descriptionController.text;
String ASSETNUM = ASSETNUMController.text;
String location = locationController.text;
String DESCRIPTION_LONGDESCRIPTION =
DESCRIPTION_LONGDESCRIPTIONController.text;
Demandes? data = await submitData(description, ASSETNUM,
location, DESCRIPTION_LONGDESCRIPTION);
setState(() {
_demandes = data;
});
}),
child: Text("submit "),
)
],
));
}
}
Ok the only thing that you have to write is this :
Expanded(
child: DropdownButton<String>(
value: dropdownValue,
isExpanded: true, // this
[...]
),
),
Like the documentation say :
Set the dropdown's inner contents to horizontally fill its parent.
By default this button's inner width is the minimum size of its
contents. If [isExpanded] is true, the inner width is expanded to fill
its surrounding container.
I am trying to develop a survey form using Flutter and I have multiple dropdown fields in the form. I want to get the selected values from those dropdowns when I click the save button. But all I am getting is the value I initially set inside initState(). The code I am using is as below. Any help to get this sorted out is much appreciated.
class _EditSurveyState extends State<EditSurvey> {
String contactMethod;
String country;
List contactMethodList = ['phone', 'email', 'mail'];
List countryList = ['us', 'uk', 'germany'];
#override
void initState() {
super.initState();
contactMethod = surveryData['contact'];
country = surveryData['country'];
}
#override
Widget build(BuildContext context) {
return Scaffold(
return Scaffold(
children: [
Expanded(
flex: screenWidth(context) < 1300 ? 10 : 8,
child: SafeArea(
child: Column(
children: [
createDropdownField("Contact", contactMethod, contactMethodList),
createDropdownField("Country", country, countryList),
Row(mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () async {
print(contactMethod + country);
},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
)
),
child: Text(
"UPDATE",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
)
),
],
),
]
)
)
)
]
)
);
}
Row createDropdownField(String labelText, String _valueChoose, List valueList) {
return Row (
children: [
SizedBox(height: 25,),
Align(
alignment: Alignment.centerLeft,
child: Text(
'$labelText',
),
),
DropdownButtonFormField(
value: _valueChoose,
hint: Text("$labelText"),
icon: Icon(Icons.arrow_drop_down),
isExpanded: true,
onChanged: (newValue){
setState(() {
_valueChoose = newValue;
});
},
items: valueList.map((valueItem){
return DropdownMenuItem(
value: valueItem,
child: Text(valueItem),
);
}).toList(),
),
],
);
}
}
I don't understand why you using intitstate if you want to initialize value to String you can do it while declaring, try removing initstate and
Declare a variable first where you will store new value from dropdown onchange
i.e
class _EditSurveyState extends State<EditSurvey> {
String _currentValue;
DropdownButtonFormField(
onChanged: (val) =>
setState(() => _currentValue = val as String),
value: _currentValue ,
items: YourList.map((item) {
return DropdownMenuItem(
value: item,
child: Text('$item Items'),
);
}).toList(),
),
I`m creating a dropdown button in flutter, but i have a problem
when i use dropdown it shows the name of the first item but i want to change it(default value) to categories and idk how to do that, also i tried to use hint(as you see in codes)but it didn't work.
here is my codes:
Container(
height: pageHeight / 15,
padding: EdgeInsets.all(20),
child:DropdownButton(
value: _value,
items: const [
DropdownMenuItem(
child: Text("First Item"),
value: 1,
),
DropdownMenuItem(
child: Text("Second Item"),
value: 2,
),
],
onChanged: (value) {
setState(() {
_value = value as int ;
});
},
hint:Text("Select item")
),
)
I want to change this First Item to categories
Make value nullable. DropdownButton can have null value and while it is null it will show hint widget.
int? _value;
DropdownButton(
value: _value,
items: const [
DropdownMenuItem(
child: Text("First Item"),
value: 1,
),
DropdownMenuItem(
child: Text("Second Item"),
value: 2,
),
],
onChanged: (value) {
setState(() {
_value = value as int;
});
},
hint: Text("categories"),
),
Just Asign on initState()
selectedDropDownValue = "categories";
Container(
height: pageHeight / 15,
padding: EdgeInsets.all(20),
child:DropdownButton(
value: _value,
items: const [
DropdownMenuItem(
child: Text("First Item"),
value: 1,
),
DropdownMenuItem(
child: Text("Second Item"),
value: 2,
),
],
value: selectedDropDownValue,
onChanged: (value) {
setState(() {
selectedDropDownValue = value;
});
},
hint:Text("Select item")
),
)
In flutter, a DropDownMenu's initial view (where it let us choose items) consists of the width of item having longest length. I want to give the initial view a fixed size.
But if I put DropDownMenu in a container with a fixed width, I get error like some amount of pixel over-followed.
Now how can I achieve a DropDownMenu whose width is fixed in flutter?
Container(
width:75,
child: DropdownButton(
value: selectedItem,
isExpanded: false,
hint: Text("All"),
onChanged: (selectedItem) {setState(() {
this.selectedItem = selectedItem;
});},
underline: Text(""),
isDense: true,
onTap: () {},
items: <String>["aaa", "bbb", "Item having the longest length", "Hello", "World", "good"].map((categoryName) => DropdownMenuItem<String>(
value: categoryName,
child: Text(
categoryName
),
)).toList(),
),
),
You can set the isExpanded property to true:
DropdownButton(
isExpanded: true,
)
and define a TextOverflow in the Text widget:
Text(
categoryName,
overflow: TextOverflow.fade,
)
Follows a full example:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
width: 155,
child: DropdownButton(
value: selectedItem,
isExpanded: true,
hint: Text("All"),
onChanged: (selectedItem) {
setState(() {
this.selectedItem = selectedItem;
});
},
underline: Text(""),
isDense: true,
onTap: () {},
items: <String>[
"aaa",
"bbb",
"Item having the longest length",
"Hello",
"World",
"good"
]
.map(
(categoryName) => DropdownMenuItem<String>(
value: categoryName,
child: Text(
categoryName,
overflow: TextOverflow.fade,
),
),
)
.toList(),
),
),
);
How can I change the height of a DropdownButton in flutter.
I have tried to use Padding and SizedBox but none is realy working.
SizedBox just increases the container size while the DropdownButton is clamped to top left and therefore is not centered anymore.
Padding is ignored or moves the content outside of the button.
I do not want to change the size of the dropdown overlay but the button itself.
build(BuildContext context) {
return ThemeData(
data: ThemeData(canvasColor: Colors.white),
child: DropdownButton(
items: _items.map((item) => DropdownMenuItem(child: Text(item), value: item)).toList(),
isExpanded: true,
selectedItemBuilder: (_) {
return _items.map<Widget>((String lang) {
return Center(
widthFactor: 1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text(lang, style: TextStyle(color: Colors.black))
),
);
}).toList();
}
)
)
}
Wrap it in a Container, give a height, width as per your need and set isExpanded true in DropDownButton. Also change dropdownbutton text font size as per your need.
Container(
height: 50.0,
width: 200.0,
child: DropdownButton(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
isExpanded: true,
style: TextStyle(color: Colors.deepPurple, fontSize: 20.0),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
)
End product should look something like this,
Looks like the 'itemHeight' property for the DropdownButton class should do the trick. I tried it and it increased the height of my DropdownButton.
Here is some sample code I have from a previous project using the itemHeight:
DropdownButton<String>(
itemHeight: 100.0,
value: selectedCurrency,
items: dropdownItems,
onChanged: (value) {
setState(() {
selectedCurrency = value;
getData();
});
},
);
Note: Just make sure the value you provide isn't less than 48.0, since it will give an error.
Docs:
itemHeight property: https://api.flutter.dev/flutter/material/DropdownButton/itemHeight.html
Minimum itemHeight defined by 'kMinInteractiveDimension':
https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html
itemHeight: null,
You just need to leave the itemHeight with the null value.
It will make the height of the DropdownButton with the menu item's intrinsic height.
Use SizedBox Widget
SizedBox(
height: 30,
child:DropdownButton<String>(
value: selectedCurrency,
items: dropdownItems,
onChanged: (value) {},
))
The easiest of all methods is using DropDownButton2 which is built over DropDownButton
And just change the buttonHeight attribute
Not just buttonHeight , you can even change itemHeight , buttonwidth and many more customize
String? selectedValue;
List<String> items = [
'Item1',
'Item2',
'Item3',
'Item4',
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton2(,
items: items
.map((item) =>
DropdownMenuItem<String>(
value: item,
child: Text(
item,
),
))
.toList(),
value: selectedValue,
onChanged: (value) {
setState(() {
});
},
buttonHeight: 40,
buttonWidth: 140,
itemHeight: 40,
),
),
),
);
}
checkout : DropDownButton2 for more examples.
Hope it helps !!
You need to use menuMaxHeight property of DropdownButton Widget.
child: DropdownButton(
menuMaxHeight: 500.0,
value: '1',
items: setTotalPages(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
)
Add this property menuMaxHeight: 200, to DropdownButton