Request one controller or method that use to close dialog box or dropdown dialog

[krButani]

hi,

We need a controller or method which is used to close the dialog box or dropdown dialog. For example, as per attachment screen a short dropdown dialog is open when I click on a floating button, we want to close the dropdown dialog.

[lcuis]

Hi @krButani ,

Thanks for your request.

As there are some menu mode examples on the readme with close and done buttons, I assume you need the button to be outside the Widget. Is this correct?

[krButani]

you are right but this is example we are working on big application and clients wants to close automatically. real application we are not using any close button. for example, first control is search_choise that user open like attachment to select country and then next control is TextFormField. When user click On TextFormField that time we need to close search_choise if its open. so, that why need a controller or method to close

[lcuis]

Oh, I see.
Then, I prepared an example that will probably not really help you as it relies on a button:

Column(
        children: [
          closeButton,
          SearchChoices.single(
            items: items,
            value: selectedValueSingleMenu,
            hint: "Select one",
            searchHint: null,
            onChanged: (value) {
              setState(() {
                selectedValueSingleMenu = value;
              });
            },
            dialogBox: false,
            isExpanded: true,
            menuConstraints: BoxConstraints.tight(const Size.fromHeight(350)),
            buildDropDownDialog: (
                Widget titleBar,
                Widget searchBar,
                Widget list,
                Widget closeButton,
                BuildContext dropDownContext,
                ) {
              Future.delayed(Duration(milliseconds: 400)).whenComplete((){
                setState(() {
                  this.closeButton=closeButton;
                });
              });
              return (AnimatedContainer(
                padding: MediaQuery.of(dropDownContext).viewInsets,
                duration: const Duration(milliseconds: 300),
                child: SizedBox(
                  height: 400,
                  child: Card(
                    margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 40),
                    child: Container(
                      padding:
                      const EdgeInsets.symmetric(vertical: 35, horizontal: 45),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          titleBar,
                          searchBar,
                          list,
                          // closeButton,
                        ],
                      ),
                    ),
                  ),
                ),
              ));
            },
          ),
        ],
      )

I will need to think of another solution to your request.

[krButani]

but without user pressing its work?

[lcuis]

I don't think the above example will really help you as it relies on a button that the user needs to press.

The following example, however, is a better starting point.
It lets you assign a closeFn Function from onChanged parameter called pop.

However, I don't know why yet, it seems to only work when the selected value is empty:

Column(
        children: [
          closeFn==null?SizedBox.shrink():ElevatedButton(
            child: Text("Close"),
            onPressed: (){
              closeFn!();
            },
          ),
          SearchChoices.single(
            items: items,
            value: selectedValueSingleMenu,
            hint: "Select one",
            searchHint: null,
            onChanged: (value,Function pop) {
              closeFn=pop;
              setState(() {
                selectedValueSingleMenu = value;
              });
            },
            dialogBox: false,
            isExpanded: true,
            menuConstraints: BoxConstraints.tight(const Size.fromHeight(350)),
            buildDropDownDialog: (
                Widget titleBar,
                Widget searchBar,
                Widget list,
                Widget closeButton,
                BuildContext dropDownContext,
                ) {
              return (AnimatedContainer(
                padding: MediaQuery.of(dropDownContext).viewInsets,
                duration: const Duration(milliseconds: 300),
                child: SizedBox(
                  height: 400,
                  child: Card(
                    margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 40),
                    child: Container(
                      padding:
                      const EdgeInsets.symmetric(vertical: 35, horizontal: 45),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          titleBar,
                          searchBar,
                          list,
                          // closeButton,
                        ],
                      ),
                    ),
                  ),
                ),
              ));
            },
          ),
        ],
      )

I will try to get back to this question as soon as possible. It may not be today, I am sorry for the delay in advance.

[lcuis]

Hi @krButani ,

I was not able to make the example above work so I added a new parameter: giveMeThePop

Once released, this version will allow you to run the following example:

      Column(
        children: [
          closeFn==null?SizedBox.shrink():ElevatedButton(
            child: Text("Close"),
            onPressed: (){
              closeFn!();
            },
          ),
          SearchChoices.single(
            giveMeThePop: (Function pop){closeFn=pop;},
            items: items,
            value: selectedValueSingleMenu,
            hint: "Select one",
            searchHint: null,
            onChanged: (value,Function pop) {
              setState(() {
                selectedValueSingleMenu = value;
              });
            },
            dialogBox: false,
            isExpanded: true,
            menuConstraints: BoxConstraints.tight(const Size.fromHeight(350)),
            buildDropDownDialog: (
                Widget titleBar,
                Widget searchBar,
                Widget list,
                Widget closeButton,
                BuildContext dropDownContext,
                ) {
              return (AnimatedContainer(
                padding: MediaQuery.of(dropDownContext).viewInsets,
                duration: const Duration(milliseconds: 300),
                child: SizedBox(
                  height: 400,
                  child: Card(
                    margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 40),
                    child: Container(
                      padding:
                      const EdgeInsets.symmetric(vertical: 35, horizontal: 45),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          titleBar,
                          searchBar,
                          list,
                          // closeButton,
                        ],
                      ),
                    ),
                  ),
                ),
              ));
            },
          ),
        ],
      ),

Please note that this will not work until I release version 2.1.8 once I successfully run the automated integration tests. I will let you know here when this is done.

[lcuis]

The above example should now work as version 2.1.8 is now released.

[krButani]

Oh Yes it done. @lcuis thank you.

[lcuis]

Thanks for the confirmation @krButani !

[han-tm]

How it's work?

I am using the SearchChoices.single widget and trying to implement a custom close button for the dropdown menu. I have passed a function to giveMeThePop to set the closeFn variable, which should be called to close the dropdown menu. However, the closeFn function remains null, and as a result, the "Close" button is not being displayed.

Here is the relevant part of my code:

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  Function? closeFn;
  String? selectedValueSingleMenu;
  List<DropdownMenuItem<String>> items = [
    DropdownMenuItem(child: Text("Item 1"), value: "1"),
    DropdownMenuItem(child: Text("Item 2"), value: "2"),
    DropdownMenuItem(child: Text("Item 3"), value: "3"),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        closeFn == null
            ? SizedBox.shrink()
            : ElevatedButton(
                child: Text("Close"),
                onPressed: () {
                  if (closeFn != null) {
                    closeFn!();
                  }
                },
              ),
        SearchChoices.single(
          giveMeThePop: (Function pop) {
            setState(() {
              closeFn = pop;
            });
          },
          items: items,
          value: selectedValueSingleMenu,
          hint: "Select one",
          searchHint: null,
          onChanged: (value, Function pop) {
            setState(() {
              selectedValueSingleMenu = value;
            });
          },
          dialogBox: false,
          isExpanded: true,
          menuConstraints: BoxConstraints.tight(const Size.fromHeight(350)),
          buildDropDownDialog: (
            Widget titleBar,
            Widget searchBar,
            Widget list,
            Widget closeButton,
            BuildContext dropDownContext,
          ) {
            return (AnimatedContainer(
              padding: MediaQuery.of(dropDownContext).viewInsets,
              duration: const Duration(milliseconds: 300),
              child: SizedBox(
                height: 400,
                child: Card(
                  margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 40),
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(vertical: 35, horizontal: 45),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        titleBar,
                        searchBar,
                        list,
                        // closeButton,
                      ],
                    ),
                  ),
                ),
              ),
            ));
          },
        ),
      ],
    );
  }
}

[lcuis]

Hi @han-tm , I am sorry, this is a quite old topic for me.
I must say that I was able to try the example I provided except that for the closeFn to not be null, I had to select a value first. Maybe this is because a wetState occurred that the closeFn was not null anymore? This is not very practical. I hope we can find a solution to this.

[lcuis]

Hello @han-tm ,

The following example works fine for me. I hope this will work for you too.

Column(
        children: [
          ElevatedButton(
            child: Text("Close"),
            onPressed: (){
              if(closeFn!=null) {
                closeFn!();
              }
            },
          ),
          SearchChoices.single(
            giveMeThePop: (Function pop){closeFn=pop;},
            items: items,
            value: selectedValueSingleMenu,
            hint: "Select one",
            searchHint: null,
            onChanged: (value,Function pop) {
              setState(() {
                selectedValueSingleMenu = value;
              });
            },
            dialogBox: false,
            isExpanded: true,
            menuConstraints: BoxConstraints.tight(const Size.fromHeight(350)),
            buildDropDownDialog: (
                Widget titleBar,
                Widget searchBar,
                Widget list,
                Widget closeButton,
                BuildContext dropDownContext,
                ) {
              return (AnimatedContainer(
                padding: MediaQuery.of(dropDownContext).viewInsets,
                duration: const Duration(milliseconds: 300),
                child: SizedBox(
                  height: 400,
                  child: Card(
                    margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 40),
                    child: Container(
                      padding:
                      const EdgeInsets.symmetric(vertical: 35, horizontal: 45),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          titleBar,
                          searchBar,
                          list,
                          // closeButton,
                        ],
                      ),
                    ),
                  ),
                ),
              ));
            },
          ),
        ],
      ),