How to implement dropdown inside popup menu in flutter - flutter

Question

I need a popup menu or any other way to implement layout like this in flutter. I have tried to implememnt it in popup view but I wasn't successful. Please help me with this problem.
Here is the code I have tried, implementing it using any other method also will be fine. This code gives error no material widget found, if it can be fixed it'll also be helpful for me.
void showFilter() {
showGeneralDialog(
barrierLabel: "Barrier",
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: Duration(milliseconds: 700),
context: context,
pageBuilder: (_, __, ___) {
return Align(
alignment: Alignment.center,
child: Container(
height: 300,
child: SizedBox.expand(
child:Column(
children: <Widget>[
Container(
padding: EdgeInsets.only( top: SizeConfig.blockSizeHorizontal*2, left: SizeConfig.blockSizeHorizontal*6),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Monthly Summary", style: TextStyle(fontSize: SizeConfig.blockSizeHorizontal*6, color: Colors.black87,decoration: TextDecoration.none,),),
],
)
),
Container(
padding: EdgeInsets.only(top:SizeConfig.blockSizeHorizontal*2, left: SizeConfig.blockSizeHorizontal*3, right: SizeConfig.blockSizeHorizontal*3),
child: Divider(
color: Colors.black87,thickness: 2.0,
),
),
Container(
padding: EdgeInsets.only(left: SizeConfig.blockSizeHorizontal*6, top: SizeConfig.blockSizeHorizontal*4),
child: Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Text("Year - ", style: TextStyle(fontSize: SizeConfig.blockSizeHorizontal*4.5, color: Colors.black87,decoration: TextDecoration.none,),)
],
),
),
Container(
child: Row(
children: <Widget>[
Container(
child: DropdownButton(
value: _dpdValue,
underline: Container(),
isExpanded: true,
iconSize: 30.0,
items: _dropdownValues.map((val) {
return new DropdownMenuItem<String>(
value: val,
child: new Text(val),
);
}).toList(),
onChanged: (val) {
if (!mounted) return;
setState(
() {
_dpdValue = val;
},
);
},
),
)
],
),
)
],
)
)
],
)
),
margin: EdgeInsets.only(top: SizeConfig.blockSizeHorizontal*15, left: SizeConfig.blockSizeHorizontal*3, right: SizeConfig.blockSizeHorizontal*3),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(SizeConfig.blockSizeHorizontal*6),
),
),
);
},
transitionBuilder: (_, anim, __, child) {
return SlideTransition(
position: Tween(begin: Offset(0, 1), end: Offset(0, 0)).animate(anim),
child: child,
);
},
);
}

Answer 1

I have used an Alertdialog for this,, hope it offers insight to solving your problem,
int year = 1990;
List<String> months = ['January', 'February', 'March'];
List<String> years = [];
String option, month;
#override
void initState() {
super.initState();
for (int i = year; i < 2020; i++) {
years.add(i.toString());
}
}
Future<bool> errorDialog(context) async {
Size size = MediaQuery.of(context).size;
return showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Monthly Summary"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Year-'),
Container(
width: size.width * 0.5,
decoration: BoxDecoration(
border: Border.all(
color:Colors.amber),
borderRadius:
BorderRadius.all(Radius.circular(5))),
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(10, 0, 10, 0),
filled: true,
fillColor: Colors.white,
hintText: 'Select Year',
hintStyle:
TextStyle(fontWeight: FontWeight.normal)),
value: option,
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.black),
onChanged: (String newValue) {
setState(() {
option = newValue;
});
},
validator: (value) {
if (value == null) {
return "Select Year";
}
return null;
},
items: years
.map<DropdownMenuItem<String>>((String option) {
return DropdownMenuItem<String>(
value: option,
child: Text(option),
);
}).toList(),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Month-'),
Container(
decoration: BoxDecoration(
border: Border.all(
color:Colors.amber),
borderRadius:
BorderRadius.all(Radius.circular(5))),
width: size.width * 0.5,
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(10, 0, 10, 0),
filled: true,
fillColor: Colors.white,
hintText: 'Select Month',
hintStyle:
TextStyle(fontWeight: FontWeight.normal)),
value: month,
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.black),
onChanged: (String newValue) {
setState(() {
month = newValue;
});
},
validator: (value) {
if (value == null) {
return "Select Month";
}
return null;
},
items: months
.map<DropdownMenuItem<String>>((String option) {
return DropdownMenuItem<String>(
value: option,
child: Text(option),
);
}).toList(),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(2.0))),
child: Text(
"CANCEL",
style: TextStyle(color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(2.0))),
child: Text(
"SEARCH",
style: TextStyle(color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
],
),
),
],
),
),
);
});
});
}