Search code examples
flutterdrop-down-menuflutter-layoutreusabilityflutter-dependencies

How to make drop down reusable in flutter


I want to make this dropdown reusable. when I want to use it. I need to simply just called that dropdown and pass the value. Hope you understand the question :)

Here is some code I've tried.

FormBuilder(
      key: _fbKey,
      autovalidate: true,
      initialValue: {
        'country': 5,
      },
      child: FormBuilderCustomField(
        attribute: "name",
        validators: [
          FormBuilderValidators.required(),
        ],
        formField: FormField(
          // key: _fieldKey,
          enabled: true,
          builder: (FormFieldState<dynamic> field) {
            return InputDecorator(
              decoration: InputDecoration(
                labelText: "Select Country",
                contentPadding: EdgeInsets.only(top: 10.0, bottom: 0.0),
                border: InputBorder.none,
                errorText: field.errorText,
              ),
              child: DropdownButton(
                isExpanded: true,
                items: ["One", "Two"].map((option) {
                  return DropdownMenuItem(
                    child: Text("$option"),
                    value: option,
                  );
                }).toList(),
                value: field.value,
                onChanged: (value) {
                  field.didChange(value);
                },
              ),
            );
          },
        ),
      ),
    );

Solution

  • Create a custom class like below

    import 'package:flutter/material.dart';
    import 'package:flutter_form_builder/flutter_form_builder.dart';
    
    class DropDown extends StatelessWidget {
      final GlobalKey fbKey;
      final String attribute, labelText;
      final List<String> itemsList;
    
      DropDown({
        Key key,
        @required this.fbKey,
        this.attribute,
        this.labelText,
        this.itemsList,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return FormBuilder(
          key: fbKey,
          autovalidate: true,
          initialValue: {
            'country': 5,
          },
          child: FormBuilderCustomField(
            attribute: attribute,
            validators: [
              FormBuilderValidators.required(),
            ],
            formField: FormField(
              // key: _fieldKey,
              enabled: true,
              builder: (FormFieldState<dynamic> field) {
                return InputDecorator(
                  decoration: InputDecoration(
                    labelText: labelText,
                    contentPadding: EdgeInsets.only(top: 10.0, bottom: 0.0),
                    border: InputBorder.none,
                    errorText: field.errorText,
                  ),
                  child: DropdownButton(
                    isExpanded: true,
                    items: itemsList.map((option) {
                      return DropdownMenuItem(
                        child: Text("$option"),
                        value: option,
                      );
                    }).toList(),
                    value: field.value,
                    onChanged: (value) {
                      field.didChange(value);
                    },
                  ),
                );
              },
            ),
          ),
        );
      }
    }
    

    Use it as below

    DropDown(
              fbKey: _bfKey,
              attribute: 'Name',
              labelText: 'Select Country',
              itemsList: ['One', 'Two'],
            ),