syncrow-web/lib/pages/routines/create_new_routines/space_dropdown.dart

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class SpaceDropdown extends StatelessWidget {
  final List<SpaceModel> spaces;
  final String? selectedValue;
  final Function(String?)? onChanged;
  final String hintMessage;

  const SpaceDropdown({
    Key? key,
    required this.spaces,
    required this.selectedValue,
    required this.onChanged,
    required this.hintMessage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Space",
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                  fontWeight: FontWeight.w400,
                  fontSize: 13,
                  color: ColorsManager.blackColor,
                ),
          ),
          DropdownButton2<String>(
            underline: const SizedBox(),
            buttonStyleData: ButtonStyleData(
              decoration:
                  BoxDecoration(borderRadius: BorderRadius.circular(12)),
            ),
            value: selectedValue,
            items: spaces.map((space) {
              return DropdownMenuItem<String>(
                value: space.uuid,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '   ${space.name}',
                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: selectedValue == space.uuid
                                ? ColorsManager.dialogBlueTitle
                                : ColorsManager.blackColor,
                          ),
                    ),
                    Text(
                      '   ${space.lastThreeParents}',
                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                            fontSize: 12,
                            color: selectedValue == space.uuid
                                ? ColorsManager.dialogBlueTitle
                                : ColorsManager.blackColor,
                          ),
                    ),
                  ],
                ),
              );
            }).toList(),
            onChanged: onChanged,
            style: TextStyle(
              color: Colors.black,
              fontSize: 13,
            ),
            hint: Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Text(
                hintMessage,
                style: Theme.of(context).textTheme.bodySmall!.copyWith(
                      color: ColorsManager.textGray,
                    ),
              ),
            ),
            customButton: Container(
              height: 40,
              decoration: BoxDecoration(
                border: Border.all(color: ColorsManager.textGray, width: 1.0),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    flex: 8,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Text(
                        selectedValue != null
                            ? spaces
                                .firstWhere((e) => e.uuid == selectedValue)
                                .name
                            : hintMessage,
                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
                              fontSize: 13,
                              color: selectedValue != null
                                  ? Colors.black
                                  : ColorsManager.textGray,
                            ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: const BorderRadius.only(
                          topRight: Radius.circular(10),
                          bottomRight: Radius.circular(10),
                        ),
                      ),
                      height: 45,
                      child: const Icon(
                        Icons.keyboard_arrow_down,
                        color: ColorsManager.textGray,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            dropdownStyleData: DropdownStyleData(
              maxHeight: MediaQuery.of(context).size.height * 0.4,
              decoration: BoxDecoration(
                color: ColorsManager.whiteColors,
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            menuItemStyleData: const MenuItemStyleData(
              height: 60,
            ),
          ),
        ],
      ),
    );
  }
}