How to focus dropdown menu list

Question

how to focus dropdown menu list when after it's value change. I have dropdown menu it has problem, the problem is when i select some value or index like index 4 (Rating) the menu of dropdown list will goes up ex: picture number 2, what i want to tried is even i select index 4 (rating) or other index the dropdown menu list still on same line with search box

the dropdown menu go up

here the source code:

import 'package:flutter/material.dart';
import 'package:hauskafein/theme.dart';

class SearchSortCafePage extends StatefulWidget {
  SearchSortCafePage({super.key});

  @override
  State<SearchSortCafePage> createState() => _SearchSortCafePageState();
}

class _SearchSortCafePageState extends State<SearchSortCafePage> {
  String? selected;
  List<String> SortData = [
    'Reccomended',
    'Popularity',
    'Distance',
    'Rating',
  ];
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 16),
      child: Row(
        children: [
          // SEARCH
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16),
            width: MediaQuery.of(context).size.width / 1.7,
            height: 48,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: blackColor.withOpacity(0.15),
                  blurRadius: 4,
                  offset: Offset(0, 5),
                ),
              ],
              color: whiteColor,
              borderRadius: BorderRadius.all(
                Radius.circular(28),
              ),
            ),
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.only(left: 16),
                  width: 24,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/images/icon_search.png'),
                        fit: BoxFit.contain),
                  ),
                ),
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16),
                    child: TextFormField(
                      style: regularText.copyWith(
                        fontSize: 16,
                        color: blackColor.withOpacity(0.8),
                      ),
                      decoration: InputDecoration(
                        hintText: 'Search Cafe',
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // SORT
          Expanded(
            child: Container(
              margin: EdgeInsets.only(right: 8),
              decoration: BoxDecoration(
                color: orangeColor,
                borderRadius: BorderRadius.circular(28),
              ),
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: DropdownButton(
                  dropdownColor: orangeColor,
                  isExpanded: true,
                  icon: Image(
                    image: AssetImage('assets/images/icon_dropdown.png'),
                    width: 16,
                    height: 16,
                    fit: BoxFit.contain,
                  ),
                  underline: SizedBox(),
                  borderRadius: BorderRadius.circular(16),
                  hint: Container(
                    child: Row(
                      children: [
                        Text(
                          'Sort By',
                          style: regularText.copyWith(
                            color: whiteColor,
                            fontSize: 12,
                            fontWeight: medium,
                          ),
                        ),
                      ],
                    ),
                  ),
                  value: selected,
                  items: SortData.map(
                    (e) => DropdownMenuItem(
                      value: e,
                      child: Container(
                        child: Row(
                          children: [
                            Text(
                              e,
                              style: regularText.copyWith(
                                color: whiteColor,
                                fontSize: 12,
                                fontWeight: medium,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ).toList(),
                  onChanged: ((value) {
                    setState(
                      () {
                        selected = value;
                      },
                    );
                  }),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

• you can use SafeArea Widget to top level
• DropdownButton cannot control the position of the pop-up window. The position of the pop-up window is changed according to the position of the Button that triggered the click event. It also changes with the length of the List Item
• so sorry i can't help you

import 'package:flutter/material.dart';

class SearchSortCafePage extends StatefulWidget {
  SearchSortCafePage({super.key});

  @override
  State<SearchSortCafePage> createState() => _SearchSortCafePageState();
}

class _SearchSortCafePageState extends State<SearchSortCafePage> {
  String? selected;
  List<String> SortData = [
    'Reccomended',
    'Popularity',
    'Distance',
    'Rating',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Padding(
      padding: const EdgeInsets.only(top: 10),
      child: Row(
        children: [
          // SEARCH
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16),
            width: MediaQuery.of(context).size.width / 1.7,
            height: 48,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.amber.withOpacity(0.15),
                  blurRadius: 4,
                  offset: Offset(0, 5),
                ),
              ],
              color: Colors.white,
              borderRadius: BorderRadius.all(
                Radius.circular(28),
              ),
            ),
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.only(left: 16),
                  width: 24,
                  height: MediaQuery.of(context).size.height,
                  // decoration: BoxDecoration(
                  //   image: DecorationImage(
                  //       image: AssetImage('assets/images/icon_search.png'),
                  //       fit: BoxFit.contain),
                  // ),
                ),
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16),
                    child: TextFormField(
                      decoration: InputDecoration(
                        hintText: 'Search Cafe',
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // SORT
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(28),
              ),
              child: DropdownButton(
                dropdownColor: Colors.orange,
                isExpanded: true,
                icon: Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: Icon(Icons.abc),
                ),
                underline: SizedBox(),
                borderRadius: BorderRadius.circular(16),
                hint: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 8),
                  child: Text('Sort By'),
                ),
                value: selected,
                items: SortData.map(
                  (e) => DropdownMenuItem(
                    value: e,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 8),
                      child: Text(e, overflow: TextOverflow.ellipsis),
                    ),
                  ),
                ).toList(),
                onChanged: ((value) {
                  setState(
                    () {
                      selected = value;
                    },
                  );
                }),
              ),
            ),
          ),
        ],
      ),
    )));
  }
}