Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

keyboardType, validator, label, searchFn, mutipleSelection + format + version + description #11

Merged
merged 21 commits into from
Feb 24, 2020

Conversation

lcuis
Copy link
Collaborator

@lcuis lcuis commented Feb 11, 2020

Label and error returned by function as Widget:

      validator: (value){return(value==null?Row(
        children: <Widget>[
          Icon(Icons.error,color: Colors.red,size: 14,),
          SizedBox(width: 5,),
          Text("Mandatory",style: TextStyle(color: Colors.red,fontSize: 13),),
        ],
      ):null);},
      label: (value){return(Row(
        children: <Widget>[
          Icon(Icons.info,color: Colors.blueAccent,size: 14,),
          SizedBox(width: 5,),
          Text("Oil producer",style: TextStyle(color: Colors.blueAccent,fontSize: 13),),
        ],
      ));},

image
Or as strings:

      validator: (value){return(value==null?"Mandatory":null);},
      label: (value){return("Oil producer");},

image

Possibility to set the keyboard type for searches as follows:

keyboardType: TextInputType.number,

image

New searchFn lets the developer define the search function through which the list items are filtered. For example, the string typed by the user can be considered as keywords separated by spaces:

      searchFn: (String keyword, List<DropdownMenuItem<MyData>> items) {
        List<int> ret = List<int>();
        if (keyword != null && items != null) {
          keyword.split(" ").forEach((k) {
            int i = 0;
            items.forEach((item) {
              if (keyword.isEmpty || (k.isNotEmpty &&
                  (item.value.toString().toLowerCase().contains(k.toLowerCase())))) {
                ret.add(i);
              }
              i++;
            });
          });
        }
        if(keyword.isEmpty){
          ret = Iterable<int>.generate(items.length).toList();
        }
        return (ret);
      },

Here is an example of result:

image

Multiple selection

Multiple selection is available through the multipleSelection parameter:

multipleSelection: true,

image
This disables onChanged callback function. See below.

There is a way to customize the display of the selected and unselected items through the displayItemWhenMultiple parameter function:

      displayItemWhenMultiple: (item,selected) {
        return (Row(children: [
          selected ? Icon(Icons.check, color: Colors.green,) : Icon(
            Icons.check_box_outline_blank, color: Colors.grey,),
          SizedBox(width: 7),
          item
        ]));
      },

image

The done button is displayed only when in multiple selection mode. It can be customized either by setting the String parameter doneText or by setting the function parameter doneButtonFn:

doneText: "OK",

image
Or:

      doneButtonFn: (newContext){return FlatButton(
          onPressed: () {
            Navigator.pop(newContext);
          }, child: Text("I'm through"));},

image

The multiple items set by default can be set through the parameter selectedItems as follows:

  List<int> selectedItems = [1,3];
...
      selectedItems: selectedItems,

Where the int values are the indexes of the selected items in the list of items.
image

Once the selection is done, the selectedItems list above is updated or the values can be retrieved through the onChangedMultiple function parameter:

      onChangedMultiple: (List<int> selectedIndexes){
        selectedIndexes.forEach((item){
          print("selected index: $item");
        });
      },

The indexes of the selected items are sent to this callback function. Note that in the multiple selection case, the onChanged callback function is not called as the parameter type is not a list.

The validator function can also be used in the multiple selection case:

validator: (List<int>selectedIndexes){return(selectedIndexes==null||selectedIndexes.length==0?"Mandatory":null);},

The selectedValueWidgetFn function can be used in the mutiple selection case the same way it is used in the single selection case:

      selectedValueWidgetFn: (value) => Padding(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
          child:Text(
            value.toString(),
            style: TextStyle(color:Colors.green),
          )
      ),

The clear button works the same way in multiple and single cases.

Ran:

flutter format lib/searchable_dropdown.dart

As suggested here:
https://pub.dev/packages/searchable_dropdown#-analysis-tab-

Improved package description as suggested here:
https://pub.dev/packages/searchable_dropdown#-analysis-tab-
Increased version from 1.1.0 to 1.1.1

Added to the README.md file:

  • Values of the DropdownMenuItem objects must be strings or implement the toString() method.
  • Clear button.
  • Assert unique value can be avoided.
  • Label
  • Validator
  • Search keyboard
  • Search function

Added 3 things to the README.md file:
- Values of the `DropdownMenuItem` objects must be strings or implement the `toString()` method.
- Clear button.
- Assert unique value can be avoided.
Label and error returned by function as Widget:
```
      validator: (value){return(value==null?Row(
        children: <Widget>[
          Icon(Icons.error,color: Colors.red,size: 14,),
          SizedBox(width: 5,),
          Text("Mandatory",style: TextStyle(color: Colors.red,fontSize: 13),),
        ],
      ):null);},
      label: (value){return(Row(
        children: <Widget>[
          Icon(Icons.info,color: Colors.blueAccent,size: 14,),
          SizedBox(width: 5,),
          Text("Oil producer",style: TextStyle(color: Colors.blueAccent,fontSize: 13),),
        ],
      ));},
```
![image](https://user-images.githubusercontent.com/32125299/74223889-f6b4ed80-4cb7-11ea-972b-bd62fcef29d8.png)
Or as strings:
```
      validator: (value){return(value==null?"Mandatory":null);},
      label: (value){return("Oil producer");},
```
![image](https://user-images.githubusercontent.com/32125299/74223999-311e8a80-4cb8-11ea-91a1-73f853277703.png)

Possibility to set the keyboard type for searches as follows:
```
keyboardType: TextInputType.number,
```
![image](https://user-images.githubusercontent.com/32125299/74224388-0a148880-4cb9-11ea-9fc3-82491474e44d.png)
Improved package description as suggested here:
https://pub.dev/packages/searchable_dropdown#-analysis-tab-
Increased version from 1.1.0 to 1.1.1
Label and error returned by function as Widget:
```
      validator: (value){return(value==null?Row(
        children: <Widget>[
          Icon(Icons.error,color: Colors.red,size: 14,),
          SizedBox(width: 5,),
          Text("Mandatory",style: TextStyle(color: Colors.red,fontSize: 13),),
        ],
      ):null);},
      label: (value){return(Row(
        children: <Widget>[
          Icon(Icons.info,color: Colors.blueAccent,size: 14,),
          SizedBox(width: 5,),
          Text("Oil producer",style: TextStyle(color: Colors.blueAccent,fontSize: 13),),
        ],
      ));},
```
![image](https://user-images.githubusercontent.com/32125299/74223889-f6b4ed80-4cb7-11ea-972b-bd62fcef29d8.png)
Or as strings:
```
      validator: (value){return(value==null?"Mandatory":null);},
      label: (value){return("Oil producer");},
```
![image](https://user-images.githubusercontent.com/32125299/74223999-311e8a80-4cb8-11ea-91a1-73f853277703.png)

Possibility to set the keyboard type for searches as follows:
```
keyboardType: TextInputType.number,
```
![image](https://user-images.githubusercontent.com/32125299/74224388-0a148880-4cb9-11ea-9fc3-82491474e44d.png)

Ran:
```
flutter format lib/searchable_dropdown.dart
```
As suggested here:
https://pub.dev/packages/searchable_dropdown#-analysis-tab-
@lcuis lcuis mentioned this pull request Feb 11, 2020
@lcuis lcuis requested a review from icemanbsi February 11, 2020 10:32
Added searchFn to README.md to let the user know how to expand the search to keywords separated by a space for example.
New `searchFn` lets the developer define the search function through which the list items are filtered. For example, the string typed by the user can be considered as keywords separated by spaces:
```dart
      searchFn: (String keyword, List<DropdownMenuItem<MyData>> items) {
        List<int> ret = List<int>();
        if (keyword != null && items != null) {
          keyword.split(" ").forEach((k) {
            int i = 0;
            items.forEach((item) {
              if (keyword.isEmpty || (k.isNotEmpty &&
                  (item.value.toString().toLowerCase().contains(k.toLowerCase())))) {
                ret.add(i);
              }
              i++;
            });
          });
        }
        if(keyword.isEmpty){
          ret = Iterable<int>.generate(items.length).toList();
        }
        return (ret);
      },
```
Here is an example of result:

![image](https://user-images.githubusercontent.com/32125299/74232473-29b3ad00-4cc9-11ea-94bd-fd4b64739e20.png)
@lcuis lcuis changed the title keyboardType, validator, label + format + version + description keyboardType, validator, label + format + version + description + searchFn Feb 11, 2020
Added multiple selection to README mentioning when a parameter has impact.
added multiple selection to pubspec.yaml
### Multiple selection
Multiple selection is available through the `multipleSelection` parameter:
```dart
multipleSelection: true,
```
![image](https://user-images.githubusercontent.com/32125299/74260975-b75bc080-4cfa-11ea-92c9-89e0090493c7.png)
This disables `onChanged` callback function. See below.

There is a way to customize the display of the selected and unselected items through the `displayItemWhenMultiple` parameter function:
```dart
      displayItemWhenMultiple: (item,selected) {
        return (Row(children: [
          selected ? Icon(Icons.check, color: Colors.green,) : Icon(
            Icons.check_box_outline_blank, color: Colors.grey,),
          SizedBox(width: 7),
          item
        ]));
      },
```
![image](https://user-images.githubusercontent.com/32125299/74260857-8a0f1280-4cfa-11ea-936c-167701c87021.png)

The done button is displayed only when in multiple selection mode. It can be customized either by setting the String parameter `doneText` or by setting the function parameter `doneButtonFn`:
```dart
doneText: "OK",
```
![image](https://user-images.githubusercontent.com/32125299/74261413-816b0c00-4cfb-11ea-99c7-5df6ac463aa0.png)
Or:
```dart
      doneButtonFn: (newContext){return FlatButton(
          onPressed: () {
            Navigator.pop(newContext);
          }, child: Text("I'm through"));},
```
![image](https://user-images.githubusercontent.com/32125299/74261685-e32b7600-4cfb-11ea-8290-6fb9a15176c2.png)

The multiple items set by default can be set through the parameter `selectedItems` as follows:
```dart
  List<int> selectedItems = [1,3];
...
      selectedItems: selectedItems,
```
Where the int values are the indexes of the selected items in the list of items.
![image](https://user-images.githubusercontent.com/32125299/74298875-47c1f180-4d4b-11ea-8451-8a584d9a7c29.png)

Once the selection is done, the `selectedItems` list above is updated or the values can be retrieved through the `onChangedMultiple` function parameter:
```dart
      onChangedMultiple: (List<int> selectedIndexes){
        selectedIndexes.forEach((item){
          print("selected index: $item");
        });
      },
```
The indexes of the selected items are sent to this callback function. Note that in the multiple selection case, the `onChanged` callback function is not called as the parameter type is not a list.

The `validator` function can also be used in the multiple selection case:
```dart
validator: (List<int>selectedIndexes){return(selectedIndexes==null||selectedIndexes.length==0?"Mandatory":null);},
```

The `selectedValueWidgetFn` function can be used in the mutiple selection case the same way it is used in the single selection case:
```dart
      selectedValueWidgetFn: (value) => Padding(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
          child:Text(
            value.toString(),
            style: TextStyle(color:Colors.green),
          )
      ),
```

The clear button works the same way in multiple and single cases.
@lcuis
Copy link
Collaborator Author

lcuis commented Feb 12, 2020

Hello @icemanbsi ,
I think I have finished this PR. I don't think I will add a "Select all"/"Deselect all" button now.
Cheers,
Louis.

@lcuis lcuis changed the title keyboardType, validator, label + format + version + description + searchFn keyboardType, validator, label, searchFn, mutipleSelection + format + version + description Feb 12, 2020
* demo app with a gallery as tabs or as a single page (change through a switch)
* automated testing
* continuous integration (CI)
* continuous deployment (CD)
* license is MIT
* split constructors between single and multiple selection
* comments on the constructors
* selection can be done in a menu, not just a dialog box
* solution to allow flexibility to provide a String, a Widget or a Function that returns either one of String or Widget for several components of the Widget
* documentation
* keyboard doesn't overlap dialog
@lcuis lcuis closed this Feb 23, 2020
@lcuis
Copy link
Collaborator Author

lcuis commented Feb 24, 2020

Hello @icemanbsi ,

I fell I changed things a bit too much for a PR to make sense now. I hope you don't mind I closed it?
I am happy to reopen it if you'd like though.

Cheers.

@icemanbsi
Copy link
Owner

Hi @lcuis ,
sorry for a long time not responding on your PR.
Yeah, that's really a lot of things, and I think i can merge this PR.
Do you mind if I add you as a collaborator? so you can add more features to this widget freely.. :D

@icemanbsi icemanbsi reopened this Feb 24, 2020
@icemanbsi icemanbsi merged commit c9852d5 into icemanbsi:master Feb 24, 2020
@lcuis
Copy link
Collaborator Author

lcuis commented Feb 24, 2020

Hello @icemanbsi ,

Thank you very much for the merge and the contributor proposal!

This PR was against my master branch which changed significantly since the PR proposal. It contained many more changes than those listed in the description as this is a different plugin:

  • demo app with a gallery as tabs or as a single page (change through a switch)
  • automated testing
  • continuous integration (CI)
  • continuous deployment (CD)
  • license is MIT
  • split constructors between single and multiple selection
  • comments on the constructors
  • selection can be done in a menu, not just a dialog box
  • solution to allow flexibility to provide a String, a Widget or a Function that returns either one of String or Widget for several components of the Widget
  • documentation
  • keyboard doesn't overlap dialog

This has several consequences for the users:

  • plugin name has changed
  • class name has changed
  • constructor has changed
  • parameters have changed
  • parameters default values have changed
  • there are links to a different plugin in the readme
  • inconsistencies in readme due to different plugin

This also has consequences for your repository:

  • license is now MIT: I guess it is ok
  • the automated testing within continuous integration is for a different plugin
  • the continuous deployment doesn't work as the secrets are missing and this is for a different plugin

I will try to correct the consequences for the users so that they are not affected and I will probably remove the automated testing, the CI and the CD. Please let me know if you have a different point of view.

@icemanbsi
Copy link
Owner

yes, I'm very aware of it. since I haven't published any update on flutter pub, I think it should be ok.
Your version is much more better than I am. So it should be a good point for the user to change to the newer one with so much more flexibility. that's why I approved the PR and merged it.

@lcuis
Copy link
Collaborator Author

lcuis commented Feb 24, 2020

Ok, thanks, I am working on the next PR to correct things for your plugin publication.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants