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,
        );
      },
    );
  }

Please add the code you have used to attempt that. – king mort Jul 17 '20 at 11:21 — king mort, Jul 17 '20 at 11:21
That way helping will be very easy – king mort Jul 17 '20 at 11:22 — king mort, Jul 17 '20 at 11:22
I have added the code, please check. – Sachin Billava Jul 17 '20 at 11:52 — Sachin Billava, Jul 17 '20 at 11:52
Is there any other way to achieve this? – Sachin Billava Jul 17 '20 at 12:02 — Sachin Billava, Jul 17 '20 at 12:02

score 2 · Accepted Answer · answered Jul 17 '20 at 12:14

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();
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          });
        });
  }

you can modify it to suit your needs but i thin it should work — king mort, Jul 17 '20 at 12:15

How to implement dropdown inside popup menu in flutter

1 Answers1