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")
),
)
Related
Disable dropDown value in Flutter
policyDropdown = ['Platinum', 'Gold', 'Sr. Citizen'],
child: Container(
height: 50.0,
child: ListTile(
title: Text('Policy Type'),
trailing: DropdownButtonHideUnderline(
child: DropdownButton(
value: policyDropdownData,
items: policyDropdown.map((String value) {
return DropdownMenuItem(
child: Text(value),
value: value,
);
}).toList(),
onChanged: (String? value) {
setState(() {
policyDropdownData = value.toString();
});
},
),
disable the first data of the policyDropdown... What can I do?
You can use the enable property of the DropdownMenuItem and enable every other option than the first one of your policyDropdown list i.e."Platinum".
for example:
return DropdownMenuItem(
value: value,
child: Text(value),
enabled: value != 'Platinum',
);
Additionally, If you want users to know that the option is disabled you can change the color of the text using the same logic.
return DropdownMenuItem(
value: value,
child: Text(
value,
style: TextStyle(
color: value != 'Platinum'
? Colors.white
: Colors.white60,
),
),
enabled: value != 'Platinum',
);
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;
});
},
),
),
)
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(),
),
),
);
I am trying to get user input data with different types such as text data and radio button grouped data.
In text type inputs, i use TextEditingControllers, for example ;
final quantNumberController = TextEditingController();
String quant = quantNumberController.text;
var data = {'quant': quant, 'capp': capp}
...
Container(
width: 280,
padding: EdgeInsets.all(10.0),
child: TextField(
controller: quantNumberController,
autocorrect: true,
decoration: InputDecoration(hintText: 'Enter location'),
)
),
And i want to receive radio button data like below, but is there any way to use controllers within ListTiles or how can i get user choice to my json data ;
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
child: Column(
children: <Widget>[
Text('Location'),
ListTile(
title: const Text('First value'),
leading: Radio(
value: Cap.Cap33,
groupValue: _capp,
onChanged: (Capp value) {
setState(() {
_capp = value;
capp = 'Cap33';
});
},
),
),
ListTile(
title: const Text('Second value'),
leading: Radio(
value: Capp.Cap22,
groupValue: _capp,
onChanged: (Capp value) {
setState(() {
_capp = value;
capp = 'Cap22';
});
},
),
),
ListTile(
title: const Text('Third value'),
leading: Radio(
value: Capp.Cap44,
groupValue: _capp,
onChanged: (Capp value) {
setState(() {
_capp = value;
capp = 'Cap44';
});
},
),
),
],
) ,
),
In your example, the user choice is saved in _capp.
Let's make a new one:
int every_many_days;
RadioListTile<int>(
title: Text('Every Day'),
value: 1,
groupValue: every_many_days,
onChanged: (int value){
setState(() {every_many_days = value;});
},
),
RadioListTile<int>(
title: Text('Every Week'),
value: 7,
groupValue: every_many_days,
onChanged: (int value){
setState(() {every_many_days = value;});
},
),
Now the choice is available in the variable every_many_days, it will be 1 or 7, and you don't need a controller.
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