Flutter Dropdownbutton widget not opening - flutter

Question

I've added a dropdownbutton widget to my view and when I top on the control, it doesn't open to display the available values.
I've even tried to use sample code and it's still not showing. This widget is within a SingleChildScrollView. I changed it to container to see if it was a scroll issue, but that didn't even work.
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: DropdownButton(
elevation: 2,
value: 'One',
onChanged: (val){
print(val);
},
hint: Text(
"Select the leach",
style: TextStyle(
color: Colors.black,
),
),
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList()
)
),
When clicking/tapping on the control, it should show up, but I'm not sure what I'm missing that would cause it to not show the values.
I'm not seeing any errors in the logs (at least the logs i'm familiar with)
UPDATED WITH MORE CODE:
SafeArea(
child: Scaffold(
appBar: AppBar(
title: Hero(
tag: widget.film.title + widget.film.number,
child: Material(
type: MaterialType.transparency,
child: Text(
widget.film.title,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: Constant.fontRegular,
fontWeight: FontWeight.bold,
),
),
),
),
),
body:
Container(
//color: Colors.white,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
physics: new AlwaysScrollableScrollPhysics(),
controller: _controller,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
MeetNetworkImage(
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
imageUrl: widget.film.backdrop != null ? "https://image.tmdb.org/t/p/w400/" + widget.film.backdrop : "",
loadingBuilder: (context) => Center(
child: CircularProgressIndicator(),
),
errorBuilder: (context, e) => Center(
child: FadeInImage(
fit: BoxFit.fitWidth,
width: MediaQuery.of(context).size.width,
image: AssetImage('assets/images/placeholder.png'),
placeholder:
AssetImage('assets/images/placeholder.png'),
),
),
),
Positioned(
left: MediaQuery.of(context).size.width-60,
top: 10,
child: Container(
height: 40.0,
width: 50.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: widget.film.checkedoutby == null ? Colors.green : Colors.red,
borderRadius: new BorderRadius.all(Radius.circular(10))),
child: new Center(
child: new Text(widget.film.number, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),),
)),
),
),
Positioned(
top: 180,
left: 15,
child: Container(
height: 200.0,
//color: Colors.grey[200],
child: MeetNetworkImage(
fit: BoxFit.contain,
imageUrl: widget.film.poster != null
? "https://image.tmdb.org/t/p/w200/" + widget.film.poster
: "",
loadingBuilder: (context) => Center(
child: CircularProgressIndicator(),
),
errorBuilder: (context, e) => Center(
child: FadeInImage(
fit: BoxFit.fill,
width: MediaQuery.of(context).size.width,
image:
AssetImage('assets/images/placeholder.png'),
placeholder:
AssetImage('assets/images/placeholder.png'),
),
),
),
),
),
Positioned(
left: 155,
top: 225,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text(
'Check Out',
style: TextStyle(
fontFamily: Constant.fontRegular,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: widget.users != null ?
DropdownButton(
elevation: 2,
value: widget.film.checkedoutby != null ? widget.film.checkedoutby : null,
onChanged: (val){
print(val);
},
hint: Text(
"Select the leach",
style: TextStyle(
color: Colors.black,
),
),
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList())
),
],
),
),
Container(
padding: EdgeInsets.all(8.0),
alignment: FractionalOffset.centerLeft,
child: Wrap(
children: <Widget>[
Text(
'Rating -',
style: TextStyle(
fontFamily: Constant.fontRegular,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
widget.film.rating,
style: TextStyle(
fontFamily: Constant.fontRegular,
color: Colors.grey[500]),
),
),
],
),
),
Container(
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text(
'Duration -',
style: TextStyle(
fontFamily: Constant.fontRegular,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
widget.film.runtime == null ? "" : widget.film.runtime,
style: TextStyle(
fontFamily: Constant.fontRegular,
color: Colors.grey[500]),
),
),
],
),
),
Container(
padding: EdgeInsets.all(8.0),
alignment: FractionalOffset.centerLeft,
child: Wrap(
children: <Widget>[
Text(
'Released -',
style: TextStyle(
fontFamily: Constant.fontRegular,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Wrap(
alignment: WrapAlignment.start,
children: <Widget>[
Text(
widget.film.released ?? "",
style: TextStyle(
fontFamily: Constant.fontRegular,
color: Colors.grey[500]),
)
],
),
)
],
),
),
],
),
),
Positioned(
top: 395,
left: 10,
width: MediaQuery.of(context).size.width-10,
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(child: Text(widget.film.plot)),
],
),
Divider(),
Wrap(
children: widget.film.genre
.split(',')
.map<Widget>(
(f) => Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Chip(
labelPadding:
EdgeInsets.symmetric(horizontal: 8.0),
label: Text(f,
style: TextStyle(
color: Colors.white,
fontFamily: Constant.fontMedium,
)),
backgroundColor:
Theme.of(context).primaryColor,
),
),
).toList(),
),
],
),
),
],
),
],
),
),
),
),
);

Answer 1

Not exactly sure why there is a difference in what I posted above and what the solution ended up being, but here's what I've changed the view to in order to get the dropdown popover to display.
As I was debugging, I broke it down bit by bit and noticed that when I added a container with a height to take up half the view, the popover would show, but clear at the bottom of that container, essentially pushing the top location of the dropdown's list, to the bottom of the container it was in. So I'm assuming the the popover that displays the list is 'showing', but below the container so it appears to not be working. Not sure why it would attach to the 'outside' of the main parent container, but that looks like this is what it is doing.
So....I changed the setup of the scaffolds body: property to be this instead:
SingleChildScrollView(
physics: new AlwaysScrollableScrollPhysics(),
controller: _controller,
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(
height: MediaQuery.of(context).size.height,
),
child: Stack(
.....