syncrow-web/lib/common/dialog_dropdown.dart

import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class DialogDropdown extends StatefulWidget {
  final List<String> items;
  final ValueChanged<String> onSelected;
  final String? selectedValue;

  const DialogDropdown({
    Key? key,
    required this.items,
    required this.onSelected,
    this.selectedValue,
  }) : super(key: key);

  @override
  _DialogDropdownState createState() => _DialogDropdownState();
}

class _DialogDropdownState extends State<DialogDropdown> {
  bool _isOpen = false;
  late OverlayEntry _overlayEntry;

  @override
  void initState() {
    super.initState();
  }

  void _toggleDropdown() {
    if (_isOpen) {
      _closeDropdown();
    } else {
      _openDropdown();
    }
  }

  void _openDropdown() {
    _overlayEntry = _createOverlayEntry();
    Overlay.of(context).insert(_overlayEntry);
    _isOpen = true;
  }

  void _closeDropdown() {
    _overlayEntry.remove();
    _isOpen = false;
  }

  OverlayEntry _createOverlayEntry() {
    final renderBox = context.findRenderObject() as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);

    return OverlayEntry(
      builder: (context) {
        return GestureDetector(
          onTap: () {
            _closeDropdown();
          },
          behavior: HitTestBehavior.translucent,
          child: Stack(
            children: [
              Positioned(
                left: offset.dx,
                top: offset.dy + size.height,
                width: size.width,
                child: Material(
                  elevation: 4.0,
                  child: Container(
                    color: ColorsManager.whiteColors,
                    constraints: const BoxConstraints(
                      maxHeight: 200.0, // Set max height for dropdown
                    ),
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: widget.items.length,
                      itemBuilder: (context, index) {
                        final item = widget.items[index];
                        return Container(
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                color: ColorsManager.lightGrayBorderColor,
                                width: 1.0,
                              ),
                            ),
                          ),
                          child: ListTile(
                            title: Text(
                              item,
                              style: Theme.of(context)
                                  .textTheme
                                  .bodyMedium
                                  ?.copyWith(
                                    color: ColorsManager.textPrimaryColor,
                                  ),
                            ),
                            onTap: () {
                              widget.onSelected(item);
                              _closeDropdown();
                            },
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleDropdown,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
        decoration: BoxDecoration(
          border: Border.all(color: ColorsManager.transparentColor),
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              widget.selectedValue ?? 'Select an item',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const Icon(Icons.arrow_drop_down),
          ],
        ),
      ),
    );
  }
}