How to indent between DropdownButton and DropdownMenuItem in flutter - flutter

I am using DropdownButton and I am facing the following error. When opening the DropdownMenuItem list, I do not have an indent from the button itself. That is, I need to get the padding between the button (DropdownButton) and the dropdown list (DropdownMenuItem) so that there is a distance. But so far I haven't been able to do it. How can you make an indent between them?
code
#override
Widget build(BuildContext context) {
return SizedBox(
width: widget.width,
child: DropdownButtonHideUnderline(
child: DropdownButton2(
items: List.generate(
widget.items.length,
(index) => DropdownMenuItem<String>(
value: widget.items[index],
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.white.withOpacity(0.1),
width: 1,
),
),
),
child: StatefulBuilder(
builder: (context, setStateSB) => GFCheckboxListTile(
value: _selectedTitles.contains(widget.items[index]),
onChanged: (bool selected) {
_onItemSelect(selected, index);
setStateSB(() {});
},
selected: selected,
title: Text(
widget.items[index],
style: constants.Styles.smallTextStyleWhite,
),
padding: const EdgeInsets.only(top: 12, bottom: 13),
margin: const EdgeInsets.only(right: 0, left: 0),
size: 22,
activeBgColor: constants.Colors.greyCheckbox,
activeBorderColor: constants.Colors.greyXMiddle,
inactiveBgColor: constants.Colors.greyCheckbox,
activeIcon: SvgPicture.asset(constants.Assets.checkboxIcon),
inactiveBorderColor: constants.Colors.greyXMiddle,
type: type,
),
),
),
),
),
hint: _selectedTitles.length > 1
? const Text('Selecte EV',
style: constants.Styles.bigBookTextStyleWhite)
: Text(_selectedTitles.join().toString(),
style: constants.Styles.bigBookTextStyleWhite),
value: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value as String;
});
},
icon: SvgPicture.asset(constants.Assets.arrowDropdown),
iconSize: 21,
buttonHeight: 27,
itemHeight: 47,
dropdownMaxHeight: 185,
dropdownWidth: 140,
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: constants.Colors.purpleMain,
),
color: constants.Colors.greyDark),
selectedItemBuilder: (context) {
return widget.items.map(
(item) {
return Row(
children: [
widget.icon ?? const SizedBox(),
const SizedBox(width: 8),
Text(
item,
style: constants.Styles.bigBookTextStyleWhite,
),
],
);
},
).toList();
},
),
),
);
}
}

In the dropdown_button2 documentation, there is a property for moving the dropdown menu Offset. You can see it here https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/offset.html
On that property you just need to set an Offset, which is composed of an X and Y values.
In your case it would look something like this:
DropdownButton2(
offset: Offset(0,10),
...
),

Related

Hide the bottom line and change the style of the selected element Drowdown_button2

I need your help. I'm using dropdown_button2 from pub.dev but I've run into a few issues that I can't resolve. First mistake: how to change the text style of the selected element? I need the text that displays the selected item to be larger. The second mistake: you need to remove the bottom line, which is displayed under the selected element, when the element is not selected, there is no line, only the element is selected - the line appears. Below I have attached screenshots of what I have now and what I need to get in the end. I would appreciate your help.
dropdown
Widget build(BuildContext context) {
return Container(
width: 120,
decoration: BoxDecoration(
border: Border(
bottom: selectedValue != null
? const BorderSide(
color: constants.Colors.white,
)
: BorderSide.none,
),
),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
hint: const Text(
'Select',
style: constants.Styles.bigBookTextStyleWhite,
),
items: widget.items
.map((item) => DropdownMenuItem<String>(
value: item,
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: constants.Colors.white.withOpacity(0.1),
width: 1,
),
),
),
child: Center(
child: Row(
children: [
if (item == selectedValue)
const SizedBox(
width: 0,
),
Expanded(
child: Text(
item,
style: constants.Styles.smallTextStyleWhite,
),
),
if (item == selectedValue)
const Icon(
Icons.check,
color: constants.Colors.purpleMain,
),
],
),
),
),
))
.toList(),
value: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value as String;
});
},
icon: SvgPicture.asset(constants.Assets.arrowDropdown),
iconSize: 21,
buttonHeight: 27,
buttonElevation: 1,
itemHeight: 47,
dropdownMaxHeight: 191,
dropdownWidth: 140,
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: constants.Colors.purpleMain,
),
color: constants.Colors.greyDark,
),
selectedItemBuilder: (context) {
return widget.items.map((item) {
return Center(
child: Text(
item,
style: constants.Styles.smallTextStyleWhite,
),
);
}).toList();
},
),
),
);
}
at the moment I have
should be the result
To change text style of the selected element use selectedItemBuilder. It's responsible for how the selected item will be displayed on button.
The bottom line under the selected element is shown by the decoration parameter you're using in the main Container widget. Remove it and bottom line should be gone.

How to return data from Flutter dialog?

I'm having a dialog which opens up when click of a button and having a Listtile which Radio as a child in order to make a selection. As the user makes the selection and accepts it, I'm trying to update the selected part in the UI but i'm getting a null response while the value is being returned.
This is my custom statefull dialog
class _CustomScannerSelectDialogState extends State<CustomScannerSelectDialog> {
int selectedRadio;
setSelectedRadio(int val) {
setState(() {
selectedRadio = val;
});
}
#override
Widget build(BuildContext context) {
return Expanded(
child: Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: Stack(
children: [
Container(
padding: EdgeInsets.only(left: 20, top: 40, right: 20, bottom: 20),
margin: EdgeInsets.only(top: 40),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black, offset: Offset(0, 10), blurRadius: 10),
]),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 20,
),
Text(
'Select the Scanner type',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
),
SizedBox(
height: 15,
),
ListTile(
title: const Text('QR & Barcode scanner'),
leading: Radio(
activeColor: Color(0xFFCC0000),
value: 1,
groupValue: selectedRadio,
onChanged: (val) {
print("Radio $val");
setSelectedRadio(val);
},
),
),
ListTile(
title: const Text('Barras Scanner'),
leading: Radio(
activeColor: Color(0xFFCC0000),
value: 2,
groupValue: selectedRadio,
onChanged: (val) {
print("Radio $val");
setSelectedRadio(val);
},
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
CustomButton(
buttonText: 'CANCEL',
buttonFunction: () {
Navigator.pop(context);
return;
},
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), side: BorderSide(color: Colors.blueGrey)),
textColor: Color(0xFFCD853F),
color: Colors.white,
onPressed: () {
print("Selected radio is " + selectedRadio.toString());
Navigator.pop(context);
return selectedRadio.toString();
},
child: new Text(
'ACCEPT',
),
)
],
),
],
),
),
],
),
));
}
}
And on click of a button I'm calling a function as _showScannerSelectionDialog
_showScannerSelectionDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return CustomScannerSelectDialog();
},
).then((value) => print("Value is "+value.toString()));
}
Here the value I'm getting printed is null but i need the value of the selectedRadio
I think, you only need to simply use the following when closing the dialog:
var result = selectedRadio.toString(); // or any value.
Navigator.pop(context, result);

how to change color of dropdown underline

in my code Container(height: 1, color: UtilColors.grey), not giving expeceted output
Container(
margin: EdgeInsets.only(left: 52, right: 48),
child: DropdownButton<String>(
isExpanded: true,
//Container(height: 1, color: UtilColors.grey),
value: _selectedUser,
items: _userTypes.map((String value) {
return new DropdownMenuItem<String>(value: value, child: new Text(value));
}).toList(),
/* decoration: InputDecoration(contentPadding: EdgeInsets.only(left: 15), suffixIcon: IconButton(onPressed: () {
// _userTypes.map((String value){return new DropdownMenuItem<String>(value: value, child: new Text(value));}).toList();
}, icon: Icon(null),)),*/
icon: Icon(Icons.keyboard_arrow_down),
hint: Text(UtilString.userType),
onChanged: (value) => setState(() => _selectedUser = value),
),
),
finally got the solution with DropdownButton -
underline: Container( height: 2,
color: Colors.deepPurpleAccent,),
this will change dropdown underline color.

How to handle dropdownbox for listview flutter

I have a listView with dropdownbox attached each item. They are being populated with items. I have two issues now. First when I select from each item, the selected value does not appear on the checkbox. Also, I need to handle them independently such that they could be selected individually. What happens now is that on launch of the app, there is no value at default till I select. Also, when I select it sets all others on the list.
Here's my code guys.
ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: mainBloc.orders.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#240C44"),
width: 0.5),
color: HexColor("#180332"),
borderRadius:
BorderRadius.all(Radius.circular(4))),
margin: EdgeInsets.only(
top: 10, bottom: 10, left: 0, right: 0),
child: ListTile(
title: Row(
children: <Widget>[
new Image.asset(
"assets/images/order_list_image.png",
width: 40,
height: 40,
),
Spacer(),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: mainBloc.orders[index].status=="enroute"?
HexColor("#FF9F1C"):
mainBloc.orders[index].status=="delivered"?
HexColor("#71F79F"):
Colors.white.withOpacity(0.6),
border: Border.all(
color: HexColor("#FF9F1C"),
style: BorderStyle.solid,
width: 0.80),
),
child: new DropdownButton<String>(
items: <String>['Delivered', 'Enroute', 'Processed'
].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(
value,
style: TextStyle(
color: primaryColor,
fontSize: 14,
fontFamily: 'CircularStd',
fontWeight: FontWeight.w500,
),
),
);
}).toList(),
onChanged: (_) {
},
),
),
SizedBox(
width: 20,
),
IconButton(
icon: Image.asset(
"assets/images/edit.png",
width: 15,
height: 15,
color: Colors.white,
), onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
EditOrderPage(index:index)),
);
},
),
],
),
),
);
}),
To manage the state of each of your dropdownbutton you need to wrap your list item inside a StatefulWidget.
Here is my implementation of your example :
Code Sample
class ListItem extends StatefulWidget {
final String label;
final String defaultStatus;
ListItem({this.label, this.defaultStatus = 'Enroute'});
#override
createState() => _ListItemState();
}
class _ListItemState extends State<ListItem> {
String _status;
#override
void initState() {
super.initState();
_status = widget.defaultStatus;
}
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: _status == null || _status.toLowerCase() == 'processed'
? Colors.white.withOpacity(0.6)
: _status.toLowerCase() == "enroute"
? Color(0xFFFF9F1C)
: Color(0xFF71F79F),
border: Border.all(
color: Color(0xFFFF9F1C), style: BorderStyle.solid, width: 0.80),
),
child: Row(children: <Widget>[
if (widget.label != null && widget.label.isNotEmpty)
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(widget.label),
),
DropdownButton<String>(
value: _status,
items:
<String>['Delivered', 'Enroute', 'Processed'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
);
}).toList(),
onChanged: (val) => setState(() => _status = val),
),
]),
);
}
}
Try it on DartPad
Screenshot

Custom Dropdown Button and MenuItems Flutter

I am trying to build my own drop down button with separated and condensed menu items, like the image below:
here's the code I have tried so far, I got the drop down width to match the container but the items can't be customized so far and always the height starts from above the button and is not occupying the width of the container:
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
border: Border.all(color: Colors.brown, width: 1.0)),
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
isExpanded: true,
isDense: true,
value: selection,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.brown,
),
iconSize: 40,
underline: Container(
height: 1,
color: Colors.transparent,
),
onChanged: (String val) => setState(() => selection = val),
items: settingsOptions.map((option) {
return DropdownMenuItem(
value: option,
child: Text(option),
);
}).toList(),
),
),
)
),
),
This is the output from the code:
How do I customize the items width, height and add dividers like in the first image? Thanks
This is an example modify as you like !
DropdownButton(
isExpanded: true,
isDense: true,
value: selection,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.brown,
),
iconSize: 40,
underline: Container(
height: 1,
color: Colors.transparent,
),
onChanged: (String val) => setState(() => selection = val),
items: sampleList.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width:double.infinity,
alignment:Alignment.centerLeft,
padding: const EdgeInsets.fromLTRB(0,8.0,0,6.0),
child:Text(option),
decoration:BoxDecoration(
border:Border(top:BorderSide(color:Colors.grey,width:1))
)
),
);
}).toList(),
selectedItemBuilder:(con){
return sampleList.map((m){
return Text(m,);
}).toList();
}
)
I came across a flutter Library called dropdown_below in pub.dev. It has additional methods that can allow you customize dropdownMenuItem to your preferred layout.
DropdownBelow(
value: category,
// isDense: true,
itemWidth: MediaQuery.of(context).size.width * 0.92,
itemTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.black),
boxTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.grey.shade600),
boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
boxWidth: MediaQuery.of(context).size.width,
boxHeight: 60,
hint: Text('choose video'),
items: video.data.value.videos
.map((e) => DropdownMenuItem(
onTap: () => e.title,
value: e.title ?? category,
child: Container(
width: double.infinity,
decoration: BoxDecoration(),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
e.title ?? '$category',
overflow: TextOverflow.ellipsis,
),
),
),
))
.toList(),
onChanged: (video) {
context.read(videoProvider).cateroryOnChange(video);
},
),
Library Link: https://pub.dev/packages/dropdown_below
The problem with the DropdownButton is that the menu will open randomly based on the selected index and other things. Also, You can't edit its code by just trying to pass offset as the logic code of the paint work based on that and trying to hardcode the selectedItemOffset to a value won't work perfectly fine.
So use DropDownButton2 , which is built just over this .
Package: DropDownButton2
Credits: Ahmed Elsayed
For reference: Refer this link