I want to create a custom DropdownButton in flutter which can be reusable with different List [Flutt-CodePudding

Here I have four Lists as in the code below and is it possible to call the list through parameter od any someother way for reusable purpose, example if I have four DropDown Button and each DropDown Button contains different Lists so how i can create a reusable code for implement this.

Here is what i tried,

import 'package:flutter/material.dart';

class CustomDropDown extends StatefulWidget {
  final String HintName;
  final List<String> MDPT;

  CustomDropDown({required this.HintName, required this.MDPT});
  @override
  _CustomDropDownState createState() => _CustomDropDownState();
}

class _CustomDropDownState extends State<CustomDropDown> {
  String? dropdownvalue;
  var MDPackageType = [
    'Package Type 1',
    'Package Type 2',
    'Package Type 3',
    'Package Type 4',
  ];
  var MDPackageName = [
    'Package Name 1',
    'Package Name 2',
    'Package Name 3',
    'Package Name 4',
  ];

  var PTPackageType = [
    'Package Type 1',
    'Package Type 2',
    'Package Type 3',
    'Package Type 4',
  ];
  var PTPackageName = [
    'Package Type 1',
    'Package Type 2',
    'Package Type 3',
    'Package Type 4',
  ];

  @override
  Widget build(BuildContext context) {
    return FormField<String>(
      builder: (FormFieldState<String> state) {
        return InputDecorator(
          decoration: InputDecoration(
            // labelStyle: textStyle,

            // errorStyle: TextStyle(color: Colors.redAccent, fontSize: 16.0),
            hintText: 'Package Type',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
          ),
          isEmpty: dropdownvalue == '',
          child: DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              hint: Text(
                widget.HintName,
                style: TextStyle(color: Colors.blue),
              ),
              value: dropdownvalue,
              isDense: true,
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue = newValue;
                  state.didChange(newValue);
                });
              },

              
              items: MDPT.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(
                    value,
                    style: TextStyle(color: Colors.blue),
                  ),
                );
              }).toList(),
            ),
          ),
        );
      },
    );
  }

CodePudding user response：

Use the following function to build DropdownMenuItem list using a List.

List<DropdownMenuItem> buildDropdownMenuItems(List list){
      List<DropdownMenuItem> dropDownItems = [];
      list.forEach((value) {
        dropDownItems.add(
            DropdownMenuItem<String>(
              value: value,
              child: Text(
                value,
                style: TextStyle(color: Colors.blue),
              ),
            )
        );
      });
      
      return dropDownItems;
    }

Use items: buildDropdownMenuItems(MDPT) property to call the function.

So the full code as below.

import 'package:flutter/material.dart';

class CustomDropDown extends StatefulWidget {
  final String hintName;
  final List<String> MDPT;

  CustomDropDown({required this.hintName, required this.MDPT});
  @override
  _CustomDropDownState createState() => _CustomDropDownState();
}

class _CustomDropDownState extends State<CustomDropDown> {
  String? dropdownvalue;

  List<DropdownMenuItem<String>> buildDropdownMenuItems(List list){
    List<DropdownMenuItem<String>> dropDownItems = [];
    list.forEach((value) {
      dropDownItems.add(
          DropdownMenuItem<String>(
            value: value,
            child: Text(
              value,
              style: TextStyle(color: Colors.blue),
            ),
          )
      );
    });

    return dropDownItems;
  }

  @override
  Widget build(BuildContext context) {
    return FormField<String>(
      builder: (FormFieldState<String> state) {
        return InputDecorator(
          decoration: InputDecoration(
            hintText: widget.hintName,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
          ),
          isEmpty: dropdownvalue == '',
          child: DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              hint: Text(
                widget.hintName,
                style: TextStyle(color: Colors.blue),
              ),
              value: dropdownvalue,
              isDense: true,
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue = newValue;
                });
              },

              //call buildDropdownMenuItems() here and pass the list of Strings as attribue
              items: buildDropdownMenuItems(widget.MDPT),
            ),
          ),
        );
      },
    );
  }
}