CODEWITHSUNDEEP
flutter
ViKARLL
ViKARLL

Reputation: 111

Combo Box implementation in Flutter?

I am in the process of developing a cross-platform app for a Supplier Management System. My requirement is to say; when the user adds a new supplier name or product name, for the Input Text field to have a drop down list that will sort and short-list the entries as they type in the characters.

This functionality is available in a ComboBox (in C#), JComboBox (in Java) , Combobox (in Python with tkinter), and even the primitive Visual Basic 5, some 20 years ago.

Which widget or component can I use in Flutter for the same purpose?

I come across a third party package named dropdownfield at: https://pub.dev/packages/dropdownfield but this package is now outdated and when upgraded to the null-safe version, it does not work with the example code given, and I simply don't have the knowledge yet to tweak around the dart file in the package or sample code, to make it usable.

Is there any other widget to accomplish this task (of an Input Text Box combined with a Dropdown list) in Flutter?

Upvotes: 0

Views: 865

Answers (2)

ViKARLL
ViKARLL

Reputation: 111

I am posting this solution that I settled for, for the benefit of whoever who reads this post, having a similar requirement.

A solution lies with flutter_typeahead widget, found here: https://pub.dev/packages/flutter_typeahead

This widget could be used instead of RawAutocomplete or Autocomplete widgets.

Upvotes: 1

Suat Özkaya
Suat Özkaya

Reputation: 774

There is DropDownButtonFormField Widget. It is like a regular TextField with a dropdown menu embedded in it, and you can customize as if a TextField with decoration property.

Here is a sample code I am working on nowadays: The items property should be a list of DropDownMenuItem

Widget _citiesDropDownMenu() {
return Container(
  padding: EdgeInsets.fromLTRB(12, 0, 12, 10),
  child: DropdownButtonFormField(
    itemHeight: null,
    items: _cities(),
    onChanged: (value) {
      _selectedCity = value as String;
      setState(() {});
    },
    value: _selectedCity,
    decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
      helperText: 'Cities',
      fillColor: Colors.grey,
      filled: true,
      prefixIcon: Icon(
        Icons.city,
        color: Colors.green,
      ),
      prefixIconConstraints: BoxConstraints(minWidth: 60),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: BorderSide(color: Colors.transparent)),
      focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: BorderSide(color: Colors.transparent)),
    ),
  ),
);

}

items:

  List<DropdownMenuItem<Object>> _cities() {
return _citiesToDisplay
    .map((city) => DropdownMenuItem(child: Text(city), value: city))
    .toList();

}

Upvotes: 0

Related Questions