How to implement dropdown inside popup menu in 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();
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          });
        });
  }