如何在 flutter 中使下拉可重复使用

Question

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);
                },
              ),
            );
          },
        ),
      ),
    );

Answer 1

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'],
        ),