i am trying to use a container to select a dropdown menu by wrapping the dropdown button with a container and then use a Gesture Detector. but i am getting an error
The argument type 'void Function(String?)' can't be assigned to the parameter type 'void Function()?'
but if i make use of the unchange function on the dropdown menu its working fine
GestureDetector(
onTap: (String? newValue){
setState(() {
dropdowntargetGroupValue = newValue!;
});
},
child: DropdownButtonHideUnderline(
child: DropdownButton(
value: dropdowntargetGroupValue,
icon: Visibility(
visible: false, child: Icon(Icons.arrow_downward)),
items: targetGroup.map((String items) {
return DropdownMenuItem(
value: items, child: Text(items));
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdowntargetGroupValue = newValue!;
});
},
),
),
),
You can't use onChanged callback in onTap.
I don't know what you're trying to do by wrapping DropdownButton with GestureDetector here but to make the DropdownButton open when another widget is tapped you've to make custom DropdownButton or use existing one. If you trying to do something when the DropdownButton is tapped, DropdownButton has it's own onTap property, you can use it.
Related
image description here
so how to create it? I tried to find out but still can't find a way
You can simply use a dropdown widget and wrap it with visibility widget which will be updated on the basis of that button click:
bool visible=false;
ElevatedButton(onPressed: (){
visible=!visible; //onPressing the click button it will update visible variable
}, child: Text('Click')),
Visibility(
visible: visible, //which will make the dropdown visible
child: DropdownButton(items: items, onChanged: (){}))
Make use of Visibility widget
bool isDropDownVisible = false
Visibility(
visible: isDropDownVisible,
child: DropdownButton(
// DropDown Code
)
Now while onButtonClick set it as a below:
setState(() {
isCheckSelected =! isCheckSelected;
});
I have those 4 Inkwell(), inside each of them is a CheckBox(),
In the onTap: property of the InkWell() I assigned an unnamed function that does some logic.
When I click on the checkbox, the 'onTap' property of the parent InkWell isn't invoked.
What I wanna do, is when I click on the CheckBox, the onTap of the parent widget InkWell get called, so it's like disabling the CheckBox onChanged property, and letting it just like an unclickable widget.
Note: By assigning null to the onChanged property of CheckBox, the widget still absorb the click, so the onTap property of InkWell doesn't get called.
Here is my code:
InkWell(
onTap: () { /* DO SOMETHING */},
child: Row(
children: [
SizedBox( /* The flag icon */ ),
Text( /* The language name */ ),
Checkbox(
onChanged: null,
value: (selectedLanguage == widget.id) ? true : false,
)
],
),
)
You can wrap your Checkbox widget inside an IgnorePointer
IgnorePointer(
child: Checkbox(
value: selectedLanguage == widget.id,
onChanged: (v) {
// This won't get called
},
),
)
I have two DropDownButtons in one Row.
DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
value: item,
items: widget.items.map((item) {
return DropdownMenuItem(
value: item,
child: Text(
item.toString(),
);
}).toList(),
onChanged: widget.onChanged,
selectedItemBuilder: (context) {
return widget.items.map((item) {
return Align(
child: Text(
item.toString(),
),
alignment: Alignment.centerLeft,
);
}).toList();
}
)
)
)
Is there a way to stretch the width of the menu instead of keeping it the size of the button?
Edit:
Example: Dart pad (Thanks to #Diwyansh; Dropdown only uses half the width of the UI, not entire)
I've fixed this and added more customization in DropdownButton2. By default dropdown menu will take button width but you can change it too if you want. Dropdownbutton2 is based on Flutter's core DropdownButton with more options you can customize to your needs.
I am new to Flutter, and I am currently working on creating an ExpansionPanelList. I am trying to replace the icon next to the ExpansionPanel from a carrot (^) to a dropdown icon. Additionally, I would like the dropdown arrow to spin up when the ExpansionPanel is expanded. However, I am not sure how to do this.
Below is how I initialize my ExpansionPanelList. I attempted to solve this problem initializing the arrow I want to use in my ListTitle (where I initialize the header). However, the Icon appears next to the carrot icon that the ExpansionPanel uses.
I am very new to Flutter (and sort-of new to Stack Overflow in general), so a detained explanation would be very much appreciated.
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
// I believe this is where we want to edit the arrow.
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text("yoink"), //Text(item.headerValue),
trailing: Icon(Icons.arrow_drop_down), //solid arrow
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle: Text(
'To delete this panel, tap the trash can icon'),
trailing: Icon(Icons.delete),
onTap: () {
setState(() {
_data.removeWhere(
(currentItem) => item == currentItem);
});
}),
isExpanded: item.isExpanded,
);
}).toList(),
),
For my output, I would like the arrow on the left of each ExpansionPanel to show + respond to expanding/unexpanding the panel. I don't want to see the arrow on the right.
The answer was to make an implementation of a ListView instead. ExpansionPanels are like ListViews with ExpansionTiles, however they are more strict and you cannot customize ExpansionPanels as much as ExpansionTiles, which can only be used in a ListView.
I'm trying to make a modal bottom sheet with ListTiles that contain a Checkbox as the leading widget. However, the Checkbox will receive tap event instead of the ListTile, now showing the ink ripple effect for the tile and making me implement two onTap/onChanged callbacks.
I have tried not implementing the Checkbox's onChanged callback and wrapping it around an AbsorbPointer widget, however in these two cases the ListTile would also not get the tap event.
return ListTile(
onTap: onTap,
title: Text("Show expired schedules"),
leading: Checkbox(value: snapshot.data, onChanged: (_) => onTap()),
);
I would like to somehow make the Checkbox not tappable, but have the ListTile still receive the tap event. Kind of like AbsorbPointer, except skipping one Widget, not absorbing the tap event entirely.
Wrap your Checkbox widget inside IgnorePointer widget and it should work:
return ListTile(
onTap: onTap,
title: Text("Show expired schedules"),
leading: IgnorePointer(child: Checkbox(value: snapshot.data, onChanged: (_) => onTap())),
);
You can do that using AbsorbPointer too
return ListTile(
onTap: onTap,
title: Text("Show expired schedules"),
leading: AbsorbPointer(
absorbing: _condition, // bool value, true makes it absorb touch event on CheckBox still making ListTile tappable.
child: Checkbox(value: snapshot.data, onChanged: (_) => onTap()),
),
);