How to make common or custom drop-down form field or drop-down in flutter using drop-down widget?

Question

I am new in flutter.I have three drop-down form field.One is state field,its API has state id and state name.second is city field,its API has city id and city name.On selection of state,state id is passed as raw in City field and that particular state cites comes in city drop-down.Third one is field for society user role,its API has id and userrole like president,member,etc.I want to make common or custom drop-down form field or drop-down in flutter using drop-downwidget useful here,can be used in place of repeating drop-down code many places in project.Please help with full code.

Make common or custom drop-down form field or drop-down in flutter using drop-down widget

Answer 1

class CustomDropDown extends StatelessWidget {
  final double? height;
  final double? width;
  final String hint;
  List<String> dropDownList;
  String selectedValue;
  ValueChanged? onChanged;
  Widget? leading;

  CustomDropDown({
    this.height,
    this.width,
    this.leading,
    required this.hint,
    required this.selectedValue,
    required this.onChanged,
    required this.dropDownList,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height ?? 55,
      width: width ?? double.infinity,
      decoration: BoxDecoration(
        color: Colors.white60,
        border: Border.all(
          width: 1.0,
          color: Colors.white.withOpacity(0.1),
        ),
        borderRadius: BorderRadius.circular(12),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Center(
        child: Row(
          children: [
            leading ?? const SizedBox(),
            SizedBox(width: leading != null ? 10 : 0),
            Expanded(
              child: DropdownButtonHideUnderline(
                child: DropdownButton<String>(
                  iconDisabledColor: Colors.grey,
                  hint: Text(
                    hint,
                  ),
                  selectedItemBuilder: (_) {
                    return dropDownList
                        .map(
                          (e) => Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              e,
                              textAlign: TextAlign.center,
                            ),
                          ),
                        )
                        .toList();
                  },
                  isExpanded: true,
                  icon: const Icon(
                    Icons.keyboard_arrow_down,
                    color: Colors.grey,
                  ),
                  borderRadius: BorderRadius.circular(10),
                  items: dropDownList.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                      ),
                    );
                  }).toList(),
                  value: selectedValue == '' ? null : selectedValue,
                  onChanged: onChanged,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

use like this way...

CustomDropDown(
  hint: 'Select Level',
  selectedValue: selectedLevel,// "selectedLevel" is a variable
  dropDownList: const ['High','Low','Medium'],
  onChanged: (value) {
    selectedLevel = value;
  },
),