Flutter DropDownButton hide button (only the button) when menu is open - flutter

Question

It is possible to hide the DropDownButton (only the button) when menu is open?
I need the background of the menu to be transparent, when I do it I find that the button and the menu are misaligned and also that you can see the text of the button in the background (see image)
this is my problem
I need that once the menu is opened it looks more or less like the following image
this is a fake recreation of the menu i need
If somebody know any answer that is an alternative to using the DropDownButton, made with containers, some packages or whatever, and that can do the same functions, that would be welcome too.
Actual Code
class DropDownMenuAppBar extends StatefulWidget {
const DropDownMenuAppBar({
Key? key,
}) : super(key: key);
#override
State<DropDownMenuAppBar> createState() => _DropDownMenuAppBarState();
}
class _DropDownMenuAppBarState extends State<DropDownMenuAppBar> {
String dropdownValue = 'Today';
#override
Widget build(BuildContext context) {
return DropdownButtonHideUnderline(
child: DropdownButton<String>(
alignment: Alignment.bottomLeft,
dropdownColor: Colors.white10,
value: dropdownValue,
icon: const Icon(
Icons.arrow_drop_down,
color: Colors.white,
),
elevation: 0,
style: AppTextStyle.boldLarge.copyWith(color: Colors.white),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Today', 'All Habits']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
);
}
}
Thanks

Answer 1

You can add a focus to the dropdown to know if its open or closed and set the visibility of the selected item like
class DropDownMenuAppBar extends StatefulWidget {
const DropDownMenuAppBar({Key? key}) : super(key: key);
#override
State<DropDownMenuAppBar> createState() => _DropDownMenuAppBarState();
}
class _DropDownMenuAppBarState extends State<DropDownMenuAppBar> {
String dropdownValue = 'Today';
late FocusNode _focus;
#override
void initState() {
super.initState();
_focus = FocusNode();
_focus.addListener(_handleFocusChange);
}
void _handleFocusChange() {
if (_focus.hasFocus != _focused) {
setState(() {
_focused = _focus.hasFocus;
});
}
print(!_focused);
}
bool _focused = true;
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
alignment: Alignment.bottomLeft,
dropdownColor: Colors.white10,
value: dropdownValue,
focusNode: _focus,
icon: Visibility(
visible: _focused,
child: Icon(
Icons.arrow_drop_down,
color: Colors.white,
),
),
elevation: 0,
style: const TextStyle(color: Colors.deepPurple),
selectedItemBuilder: (BuildContext context) {
return <String>['Today', 'All Habits']
.map((String value) {
return Visibility(
visible: _focused,
child: DropdownMenuItem<String>(
value: value,
child: Text(value),
),
);
}).toList();
},
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
if (_focus.hasFocus) {
_focus.unfocus();
} else {
_focus.requestFocus();
}
},
items: <String>['Today', 'All Habits']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
}