enhanced_drop_down 0.3.4+1 copy "enhanced_drop_down: ^0.3.4+1" to clipboard
enhanced_drop_down: ^0.3.4+1 copied to clipboard

A completely customizable drop down widget that comes with a label built in. You can customize the label, the data, the default value and more.

Enhanced Dropdown Widget #

A completely customizable drop down widget, which wraps a label and a dropdown widget together into one component.

Usage #

To use this package add enhanced_drop_down as a dependency in your pubspec.yaml file..

API #

An Enhanced Dropdown Widget (or EDW), is based on flutter's dropdown widget, but enhances it in the following manner:

  • Attached to the dropdown is a label, to help point out to the user what values the dropdown might have

  • You can pass in the data source from where the dropdown will get its values

  • You can pass a default value to be the visible choice when the dropdown is not selected

  • You want to know what choice the user made, so a callback function must be supplied to get the user's choice back

  • In case you are relying on an external source to provide the data for the dropdown, you can pass in the url to fetch that data

    • This data can be one object with many fields
    • Or a list of objects

Instantiating an EDW can be done in two ways: #

  1. The data source can be an endpoint (of Uri type)
EnhancedDropDown.withEndpoint(
            dropdownLabelTitle: "My Things",
            defaultOptionText: "Choose",
            urlToFetchData: Uri.https("run.mocky.io","/v3/babc0845-8163-4f1e-80df-9bcabd3d4c43"),
            valueReturned: (chosen) {
              print(chosen);
            })
  1. The data source can be a list of items (of String type)
 EnhancedDropDown.withData(
                dropdownLabelTitle: "My Things",
                dataSource: ["A", "B"],
                defaultOptionText: "Choose",
                valueReturned: (chosen) {
                   print(chosen);
               })

Working With A Custom Object As The Data Source #

If you want to use a custom object as your data for the EDW, you must:

  • Implement the toJson and fromJson methods inside of your class (see person.dart for reference)

  • If not, an exception will be thrown when parsing the data for the EDW

      > E/flutter (14555): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: EnhancedDropDownWidget did you remember to implement toJson on your custom object?
    
  • Pass in the desired field (in String form) to show in the dropdown using fieldToPresent

EnhancedDropDown.withData(
                dropdownLabelTitle: "EDW With Data Object",
                dataSource: [new Person("First", "Last", 10),
                              new Person("Last", "First", 20)],
                defaultOptionText: "Choose Person",
                valueReturned: (chosen) {
                  print(chosen);
                },
                fieldToPresent: "firstName")

You can see the implementation of Person inside the example project (and below):

class Person {
  String firstName;
  String lastName;
  int age;

  Person(String _firstName, String _lastName, int _age) {
    firstName = _firstName;
    lastName = _lastName;
    age = _age;
  }

  Person.fromJson(Map<String, dynamic> json) {
    firstName = json["firstName"];
    lastName = json["lastName"];
    age = json["age"];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data["firstName"] = firstName;
    data["lastName"] = lastName;
    data["age"] = age;
    return data;
  }
}

Screenshots #

7
likes
160
pub points
68%
popularity

Publisher

unverified uploader

A completely customizable drop down widget that comes with a label built in. You can customize the label, the data, the default value and more.

Homepage

Documentation

API reference

License

MIT (license)

Dependencies

flutter, http

More

Packages that depend on enhanced_drop_down