The issue with the position of the dropdown button.

[sineom-1]

When there is insufficient space at the bottom, I would like the dropdown menu to automatically switch to the top of the button for safe display.

[AhmedLSayed9]

What does "safe display" means?
The dropdown can't go below the bottom of the screen.

[gvsakhil]

Hi @AhmedLSayed9 I am facing the same issue, where if there is no space on the bottom, the items are not showing and its not scrolling. I have attached video for reference

Screen.Recording.2023-11-24.at.4.03.30.PM.mov

[ASKabanets]

@AhmedLSayed9 any updates on this? it is a critical bug

[AhmedLSayed9]

@AhmedLSayed9 any updates on this? it is a critical bug

A minimal sample that reproduces it would help.

I'll look into it within the next few days anyway.

[ASKabanets]

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

final class DropdownSearchWidget extends StatefulWidget {
  final List<String> items;
  final String? selectedValue;
  final Function() clearSelection;
  final Function(String?) onComplete;

  const DropdownSearchWidget({
    super.key,
    required this.items,
    required this.selectedValue,
    required this.clearSelection,
    required this.onComplete,
  });

  @override
  State<DropdownSearchWidget> createState() => _DropdownSearchWidgetState();
}

final class _DropdownSearchWidgetState extends State<DropdownSearchWidget> {
  late final TextEditingController _textEditingController;
  late final Widget? _suffixIcon;
  final _valueListenable = ValueNotifier<String?>(null);
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _suffixIcon = ValueListenableBuilder(
      valueListenable: _textEditingController,
      builder: (_, value, ___) {
        if (value.text.isNotEmpty) {
          return IconButton(
            onPressed: () {
              _textEditingController.clear();
            },
            icon: const Icon(
              Icons.highlight_remove_rounded,
              color: Colors.black,
            ),
          );
        } else {
          return const SizedBox.shrink();
        }
      },
    );
  }

  @override
  void didUpdateWidget(covariant DropdownSearchWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    final text = widget.selectedValue;
    _valueListenable.value = widget.selectedValue;
    if (text == null) {
      _textEditingController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField2<String>(
      focusNode: _focusNode,
      isExpanded: true,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderSide: const BorderSide(
            width: 1.5,
            color: Colors.black,
          ),
          borderRadius: BorderRadius.circular(4),
        ),
        filled: true,
        fillColor: Colors.white,
        labelText: 'Search',
        alignLabelWithHint: false,
        labelStyle: const TextStyle(
          color: Colors.black,
        ),
      ),
      menuItemStyleData: const MenuItemStyleData(
        padding: EdgeInsets.only(
          left: 8,
          right: 0,
          top: 0,
          bottom: 0,
        ),
      ),
      iconStyleData: IconStyleData(
        icon: widget.selectedValue == null
            ? const Icon(
                Icons.arrow_drop_down,
                color: Colors.black,
              )
            : IconButton(
                onPressed: () {
                  FocusScope.of(context).unfocus();
                  widget.clearSelection();
                },
                icon: const Icon(
                  Icons.clear,
                  color: Colors.black,
                ),
                padding: EdgeInsets.zero,
              ),
      ),
      items: widget.items
          .map((item) => DropdownItem(
                value: item,
                child: Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 16,
                    ),
                  ),
                ),
              ))
          .toList(),
      selectedItemBuilder: (context) {
        return widget.items.map(
          (item) {
            return Text(item);
          },
        ).toList();
      },
      dropdownSeparator: const DropdownSeparator(
        height: 4,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 8),
          child: Divider(),
        ),
      ),
      onChanged: (text) {
        FocusScope.of(context).unfocus();
        _valueListenable.value = text;
        widget.onComplete(text);
      },
      valueListenable: _valueListenable,
      dropdownSearchData: DropdownSearchData(
        searchController: _textEditingController,
        noResultsWidget: const Padding(
          padding: EdgeInsets.all(8),
          child: Text('No matches'),
        ),
        searchBarWidgetHeight: 60,
        searchBarWidget: Padding(
          padding: const EdgeInsets.only(
            top: 16,
            left: 8,
            right: 8,
          ),
          child: SizedBox(
            height: 60,
            child: TextFormField(
              maxLines: 1,
              style: const TextStyle(color: Colors.black),
              controller: _textEditingController,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderSide: const BorderSide(
                    width: 1.5,
                    color: Colors.black,
                  ),
                  borderRadius: BorderRadius.circular(4),
                ),
                filled: true,
                fillColor: Colors.white,
                labelText: 'Search',
                labelStyle: const TextStyle(
                  color: Colors.black,
                ),
                suffixIcon: _suffixIcon,
              ),
            ),
          ),
        ),
      ),
      onMenuStateChange: (isOpen) {
        if (!isOpen) {
          _textEditingController.clear();
          _focusNode.unfocus();
          FocusManager.instance.primaryFocus?.unfocus();
        }
      },
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    _focusNode.dispose();
    super.dispose();
  }
}

[ASKabanets]

import 'package:flutter/material.dart';

final class SearchScreen extends StatelessWidget {

  const SearchScreen({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: [
	     Center(
                child: FractionallySizedBox(
                  widthFactor: 0.8,
                  child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                          DropdownSearchWidget(
                            items: [],
                            selectedValue: '',
                            clearSelection: (){},
                            onComplete: (value) {},
                        ),
                      ],
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

[ASKabanets]

This sample is not complete, but it can be adjusted with necessary data. I use Pixel 2 emulator. Try to use the list with 10-15 items. When the dropdown widget is on the center of the screen, the only 6 or 7 items are visible and list is not scrollable.

[AhmedLSayed9]

@ASKabanets
Thanks for the sample. I've run it with some items but I still can't reproduce the issue:

Screen.Recording.2024-12-05.at.7.30.36.PM.mov

[AhmedLSayed9]

Here's the full code sample I've tried:

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SimpleExample(),
    );
  }
}

class SimpleExample extends StatefulWidget {
  const SimpleExample({super.key});

  @override
  State<SimpleExample> createState() => _SimpleExampleState();
}

class _SimpleExampleState extends State<SimpleExample> {
  final List<String> items = [
    for (int i = 0; i < 30; i++) 'Item$i',
  ];

  final valueListenable = ValueNotifier<String?>(null);
  final TextEditingController textEditingController = TextEditingController();

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.8,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      DropdownSearchWidget(
                        items: items,
                        selectedValue: '',
                        clearSelection: () {},
                        onComplete: (value) {},
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

final class DropdownSearchWidget extends StatefulWidget {
  final List<String> items;
  final String? selectedValue;
  final Function() clearSelection;
  final Function(String?) onComplete;

  const DropdownSearchWidget({
    super.key,
    required this.items,
    required this.selectedValue,
    required this.clearSelection,
    required this.onComplete,
  });

  @override
  State<DropdownSearchWidget> createState() => _DropdownSearchWidgetState();
}

final class _DropdownSearchWidgetState extends State<DropdownSearchWidget> {
  late final TextEditingController _textEditingController;
  late final Widget? _suffixIcon;
  final _valueListenable = ValueNotifier<String?>(null);
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _suffixIcon = ValueListenableBuilder(
      valueListenable: _textEditingController,
      builder: (_, value, ___) {
        if (value.text.isNotEmpty) {
          return IconButton(
            onPressed: () {
              _textEditingController.clear();
            },
            icon: const Icon(
              Icons.highlight_remove_rounded,
              color: Colors.black,
            ),
          );
        } else {
          return const SizedBox.shrink();
        }
      },
    );
  }

  @override
  void didUpdateWidget(covariant DropdownSearchWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    final text = widget.selectedValue;
    _valueListenable.value = widget.selectedValue;
    if (text == null) {
      _textEditingController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField2<String>(
      focusNode: _focusNode,
      isExpanded: true,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderSide: const BorderSide(
            width: 1.5,
            color: Colors.black,
          ),
          borderRadius: BorderRadius.circular(4),
        ),
        filled: true,
        fillColor: Colors.white,
        labelText: 'Search',
        alignLabelWithHint: false,
        labelStyle: const TextStyle(
          color: Colors.black,
        ),
      ),
      menuItemStyleData: const MenuItemStyleData(
        padding: EdgeInsets.only(
          left: 8,
          right: 0,
          top: 0,
          bottom: 0,
        ),
      ),
      iconStyleData: IconStyleData(
        icon: widget.selectedValue == null
            ? const Icon(
                Icons.arrow_drop_down,
                color: Colors.black,
              )
            : IconButton(
                onPressed: () {
                  FocusScope.of(context).unfocus();
                  widget.clearSelection();
                },
                icon: const Icon(
                  Icons.clear,
                  color: Colors.black,
                ),
                padding: EdgeInsets.zero,
              ),
      ),
      items: widget.items
          .map((item) => DropdownItem(
                value: item,
                child: Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 16,
                    ),
                  ),
                ),
              ))
          .toList(),
      selectedItemBuilder: (context) {
        return widget.items.map(
          (item) {
            return Text(item);
          },
        ).toList();
      },
      dropdownSeparator: const DropdownSeparator(
        height: 4,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 8),
          child: Divider(),
        ),
      ),
      onChanged: (text) {
        FocusScope.of(context).unfocus();
        _valueListenable.value = text;
        widget.onComplete(text);
      },
      valueListenable: _valueListenable,
      dropdownSearchData: DropdownSearchData(
        searchController: _textEditingController,
        noResultsWidget: const Padding(
          padding: EdgeInsets.all(8),
          child: Text('No matches'),
        ),
        searchBarWidgetHeight: 60,
        searchBarWidget: Padding(
          padding: const EdgeInsets.only(
            top: 16,
            left: 8,
            right: 8,
          ),
          child: SizedBox(
            height: 60,
            child: TextFormField(
              maxLines: 1,
              style: const TextStyle(color: Colors.black),
              controller: _textEditingController,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderSide: const BorderSide(
                    width: 1.5,
                    color: Colors.black,
                  ),
                  borderRadius: BorderRadius.circular(4),
                ),
                filled: true,
                fillColor: Colors.white,
                labelText: 'Search',
                labelStyle: const TextStyle(
                  color: Colors.black,
                ),
                suffixIcon: _suffixIcon,
              ),
            ),
          ),
        ),
      ),
      onMenuStateChange: (isOpen) {
        if (!isOpen) {
          _textEditingController.clear();
          _focusNode.unfocus();
          FocusManager.instance.primaryFocus?.unfocus();
        }
      },
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    _focusNode.dispose();
    super.dispose();
  }
}

It would be helpful If you can update it to reproduce the issue.

[ASKabanets]

@AhmedLSayed9 Thank you for the quick response! Can you please check it with my suggestions above?

I use Pixel 2 emulator. Try to use the list with 10-15 items. When the dropdown widget is on the center of the screen, the only 6 or 7 items are visible and list is not scrollable.

[AhmedLSayed9]

@AhmedLSayed9 Thank you for the quick response! Can you please check it with my suggestions above?

I use Pixel 2 emulator. Try to use the list with 10-15 items. When the dropdown widget is on the center of the screen, the only 6 or 7 items are visible and list is not scrollable.

I still can't reproduce it using Pixel 2 emulator.
Can you reproduce it with my exact sample above? and which version of the package are you using?

[ASKabanets]

I use version dropdown_button2: ^3.0.0-beta.20
I've adjusted the sample a bit:

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SimpleExample(),
    );
  }
}

class SimpleExample extends StatefulWidget {
  String? selectedValue = null;

  final List<String> items = [
    for (int i = 0; i < 15; i++) 'Item$i',
  ];

  SimpleExample({super.key});

  @override
  State<SimpleExample> createState() => _SimpleExampleState();
}

class _SimpleExampleState extends State<SimpleExample> {

  final valueListenable = ValueNotifier<String?>(null);
  final TextEditingController textEditingController = TextEditingController();

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.8,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      DropdownSearchWidget(
                        items: widget.items,
                        selectedValue: widget.selectedValue,
                        clearSelection: () {
                          setState(() {
                            widget.selectedValue = null;
                          });
                        },
                        onComplete: (value) {
                          setState(() {
                            widget.selectedValue = value;
                          });
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

final class DropdownSearchWidget extends StatefulWidget {
  final List<String> items;
  final String? selectedValue;
  final Function() clearSelection;
  final Function(String?) onComplete;

  const DropdownSearchWidget({
    super.key,
    required this.items,
    required this.selectedValue,
    required this.clearSelection,
    required this.onComplete,
  });

  @override
  State<DropdownSearchWidget> createState() => _DropdownSearchWidgetState();
}

final class _DropdownSearchWidgetState extends State<DropdownSearchWidget> {
  late final TextEditingController _textEditingController;
  late final Widget? _suffixIcon;
  final _valueListenable = ValueNotifier<String?>(null);
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _suffixIcon = ValueListenableBuilder(
      valueListenable: _textEditingController,
      builder: (_, value, ___) {
        if (value.text.isNotEmpty) {
          return IconButton(
            onPressed: () {
              _textEditingController.clear();
            },
            icon: const Icon(
              Icons.highlight_remove_rounded,
              color: Colors.black,
            ),
          );
        } else {
          return const SizedBox.shrink();
        }
      },
    );
  }

  @override
  void didUpdateWidget(covariant DropdownSearchWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    final text = widget.selectedValue;
    _valueListenable.value = widget.selectedValue;
    if (text == null) {
      _textEditingController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField2<String>(
      focusNode: _focusNode,
      isExpanded: true,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderSide: const BorderSide(
            width: 1.5,
            color: Colors.black,
          ),
          borderRadius: BorderRadius.circular(4),
        ),
        filled: true,
        fillColor: Colors.white,
        labelText: 'Search',
        alignLabelWithHint: false,
        labelStyle: const TextStyle(
          color: Colors.black,
        ),
      ),
      menuItemStyleData: const MenuItemStyleData(
        padding: EdgeInsets.only(
          left: 8,
          right: 0,
          top: 0,
          bottom: 0,
        ),
      ),
      iconStyleData: IconStyleData(
        icon: widget.selectedValue == null
            ? const Icon(
          Icons.arrow_drop_down,
          color: Colors.black,
        )
            : IconButton(
          onPressed: () {
            FocusScope.of(context).unfocus();
            widget.clearSelection();
          },
          icon: const Icon(
            Icons.clear,
            color: Colors.black,
          ),
          padding: EdgeInsets.zero,
        ),
      ),
      items: widget.items
          .map((item) => DropdownItem(
        value: item,
        child: Padding(
          padding: const EdgeInsets.only(left: 16),
          child: Text(
            item,
            style: const TextStyle(
              fontSize: 16,
            ),
          ),
        ),
      ))
          .toList(),
      selectedItemBuilder: (context) {
        return widget.items.map(
              (item) {
            return Text(item);
          },
        ).toList();
      },
      dropdownSeparator: const DropdownSeparator(
        height: 4,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 8),
          child: Divider(),
        ),
      ),
      onChanged: (text) {
        FocusScope.of(context).unfocus();
        _valueListenable.value = text;
        widget.onComplete(text);
      },
      valueListenable: _valueListenable,
      dropdownSearchData: DropdownSearchData(
        searchController: _textEditingController,
        noResultsWidget: const Padding(
          padding: EdgeInsets.all(8),
          child: Text('No matches'),
        ),
        searchBarWidgetHeight: 60,
        searchBarWidget: Padding(
          padding: const EdgeInsets.only(
            top: 16,
            left: 8,
            right: 8,
          ),
          child: SizedBox(
            height: 60,
            child: TextFormField(
              maxLines: 1,
              style: const TextStyle(color: Colors.black),
              controller: _textEditingController,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderSide: const BorderSide(
                    width: 1.5,
                    color: Colors.black,
                  ),
                  borderRadius: BorderRadius.circular(4),
                ),
                filled: true,
                fillColor: Colors.white,
                labelText: 'Search',
                labelStyle: const TextStyle(
                  color: Colors.black,
                ),
                suffixIcon: _suffixIcon,
              ),
            ),
          ),
        ),
      ),
      onMenuStateChange: (isOpen) {
        if (!isOpen) {
          _textEditingController.clear();
          _focusNode.unfocus();
          FocusManager.instance.primaryFocus?.unfocus();
        }
      },
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    _focusNode.dispose();
    super.dispose();
  }
}

and here's the video

record1.mov

[ASKabanets]

and some ugly workaround is to add strict height as

      dropdownStyleData: DropdownStyleData(
        isOverButton: true,
        maxHeight: widget.items.length < 20 ? 350 : null,
      ),

record2.mov

[AhmedLSayed9]

@ASKabanets This is very helpful, Thanks!
I was able to reproduce it. It occurs when using both dropdownSearchData & dropdownSeparator.

A minimal sample that reproduces it:

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SimpleExample(),
    );
  }
}

class SimpleExample extends StatefulWidget {
  const SimpleExample({super.key});

  @override
  State<SimpleExample> createState() => _SimpleExampleState();
}

class _SimpleExampleState extends State<SimpleExample> {
  final List<String> items = [
    for (int i = 0; i < 15; i++) 'Item$i',
  ];

  final valueListenable = ValueNotifier<String?>(null);
  final TextEditingController textEditingController = TextEditingController();

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButtonHideUnderline(
          child: DropdownButton2<String>(
            isExpanded: true,
            hint: Text(
              'Select Item',
              style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).hintColor,
              ),
            ),
            items: items
                .map((item) => DropdownItem(
                      value: item,
                      height: 40,
                      child: Text(
                        item,
                        style: const TextStyle(fontSize: 14),
                      ),
                    ))
                .toList(),
            valueListenable: valueListenable,
            onChanged: (value) {
              valueListenable.value = value;
            },
            dropdownSearchData: DropdownSearchData(
              searchController: textEditingController,
              searchBarWidgetHeight: 50,
              searchBarWidget: TextFormField(),
            ),
            dropdownSeparator: const DropdownSeparator(
              height: 4,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 8.0),
                child: Divider(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}