uco-mobile-poc/lib/app/custom_widgets/custom_dropdown.dart

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:get/get.dart';

import '../core/constants/translation_keys.dart';
import '../res/app_colors.dart';
import '../res/app_theme.dart';
import 'custom_text.dart';


@immutable
class CustomDropDown extends GetView {
  RxList<DropDown> listData = RxList.empty();
  GlobalKey<FormFieldState>? refKey;
  String labelText = "";
  RxString errorTextMessage = "".obs;
  String errorText = "";
  bool isRequired = true;
  final bool enabled;
  InputDecoration? decoration;
  TextStyle? labelStyle;
  final TextStyle? style;
  final AutovalidateMode autovalidateMode;
  TextEditingController? controller;
  TextInputType keyboardType;
  final TextCapitalization textCapitalization;
  final bool readOnly;

  final Rx<Color> inputErrorColor = Rx<Color>(Colors.black);
  final Rx<Color> inputErrorBorderColor = Rx<Color>(Colors.black);
  RxBool isError = false.obs;
  DropDown? selectedOption = null;

  CustomDropDown({
    this.refKey,
    required this.listData,
    this.controller,
    this.labelText = "",
    this.errorText = "",
    this.isRequired = true,
    this.decoration,
    this.enabled = true,
    this.autovalidateMode = AutovalidateMode.disabled,
    this.readOnly = false,
    this.textCapitalization = TextCapitalization.none,
    this.keyboardType = TextInputType.text,
    this.style,
  }) : errorTextMessage = "".obs {
    errorText = errorTextMessage.value;
  }

  DropDown? getSelectedOption() {
    return selectedOption;
  }

  void setError(String errorMessage) {
    inputErrorBorderColor.value = AppThemeData.inputErrorBorderColor;
    inputErrorColor.value = AppThemeData.inputErrorColor;
    errorTextMessage.value = errorMessage;
    isError.value = true;
  }

  void markFieldAsValid() {
    inputErrorBorderColor.value = AppThemeData.inputBackgroundColor;
    inputErrorColor.value = AppThemeData.inputErrorColor;
    errorTextMessage.value = "";
    isError.value = false;
  }

  void markFieldAsInvalid() {
    inputErrorBorderColor.value = AppThemeData.inputErrorBorderColor;
    inputErrorColor.value = AppThemeData.inputErrorColor;
    errorTextMessage.value = TranslationKeys.makeTranslation(TranslationKeys.textErrorRequired);
    isError.value = true;
  }

  bool validate() {
    if (isRequired) {
      if (selectedOption == null) {
        markFieldAsInvalid();
        return false;
      }
      markFieldAsValid();
      return true;
    }
    markFieldAsValid();
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Visibility(
            visible: labelText.isNotEmpty,
            child: Column(
              children: [
                CustomText(
                  labelText,
                  style: labelStyle ?? AppThemeData.labelStyle,
                ),
                const SizedBox(height: 8),
              ],
            ),
          ),
          FormBuilderDropdown<DropDown>(
            name: '',
            isDense: true,
            isExpanded: false,
            elevation: 2,
            decoration: InputDecoration(
              filled: true,
              fillColor: AppColors.colorGrey50,
              isDense: true,
              contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 12),
              labelText: null,
              // labelStyle: AppThemeData.labelStyle,
              errorStyle: AppThemeData.errorStyle.copyWith(color: inputErrorColor.value),
              enabledBorder: OutlineInputBorder(borderSide: const BorderSide(color: AppThemeData.inputEnabledBorderColor), borderRadius: BorderRadius.circular(50)),
              focusedBorder: OutlineInputBorder(borderSide: const BorderSide(color: AppThemeData.inputFocusedBorderColor), borderRadius: BorderRadius.circular(50)),
              border: OutlineInputBorder(
                borderSide: const BorderSide(color: AppThemeData.inputBorderColor),
                borderRadius: BorderRadius.circular(50),
              ),
              errorBorder: OutlineInputBorder(borderSide: const BorderSide(color: AppThemeData.inputErrorBorderColor), borderRadius: BorderRadius.circular(50)),
              errorText: errorTextMessage.value.isEmpty ? null : errorTextMessage.value,
              // hintText: hint,

              hintStyle: AppThemeData.hintStyle,
            ),
            borderRadius: const BorderRadius.all(Radius.circular(5)),
            dropdownColor: AppColors.colorGrey200,
            focusColor: Colors.transparent,

            items: listData.map((data) {
              return DropdownMenuItem(
                value: data,
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 0),
                  child: CustomText(
                    data.label,
                    style: AppThemeData.inputStyle.copyWith(height: 1),
                  ),
                ),
              );
            }).toList(),
            onChanged: (val) {
              selectedOption = val!;
              markFieldAsValid();
            },
            onTap: () {},
            valueTransformer: (val) => val?.toString(),
          ),
        ],
      );
    });
  }
}

class DropDown {
  String id = "";
  String label = "";
  dynamic data = {};

  DropDown(this.id, this.label, [this.data = const {}]);

  DropDown.empty()
      : this.id = "",
        this.label = "",
        this.data = {};

  @override
  String toString() {
    return 'DropDown{id: $id, label: $label, data: $data}';
  }
}