Flutter DropdownButton - 下拉菜单显示在屏幕的不同部分

Question

我正在创建一个下拉菜单以允许我的用户select他们的首选语言。下拉菜单看起来不错，但是当我滚动到屏幕的最底部并单击 DropdownButton 时，生成的下拉菜单显示在屏幕的完全不同的部分，而不是按钮附近（见下图）。

我的 DropdownButton 代码如下：

// Import libraries
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
// Import models
import 'package:strawmerry/core/appbars/footer/models/language_class.dart';
// Import services
import 'package:strawmerry/core/appbars/footer/services/language_provider.dart';

/// A dropdown button that allows the user to select their system language
class LanguageDropdown extends ConsumerWidget {
  const LanguageDropdown({Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: DropdownButton(
        // General Formatting
        underline: const SizedBox(),
        icon: const Visibility (visible:false, child: Icon(Icons.arrow_downward)),
        iconSize: 0.0,
        isExpanded: true,
        alignment: ,
      
        // Text
        hint: Center(
          child: Text(
            AppLocalizations.of(context)!.footerLanguage, 
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.grey[500], 
              fontWeight: FontWeight.bold, 
            ),
          ),
        ),
      
        // Items and callback
        items: Language.languageList().map<DropdownMenuItem<Language>>((language){
          return DropdownMenuItem(
            value: language, 
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  language.flag, 
                  style: TextStyle(
                    color: Colors.grey[500], 
                    fontWeight: FontWeight.bold, 
                    fontSize: 18
                  ),
                ), 
                Text(
                  language.name, 
                  style: TextStyle(
                    color: Colors.grey[500], 
                    fontWeight: FontWeight.bold, 
                    fontSize: 18
                  ),
                ), 
              ],
            ),
          );
        }).toList(),
        onChanged: (Language? language) {
          ref.read(languageProvider.notifier).state = language!.languageCode;
        }
      ),
    );
  }
}

首先感谢您提供的任何帮助！

Answer 1

我最终无法修复它，但事实证明这不是生产中的问题（仅出现在 chrome 调试模式下）。不知道为什么会这样...

Flutter DropdownButton - 下拉菜单显示在屏幕的不同部分

Flutter DropdownButton - Dropdown shows up in different part of screen

flutter

dart

flutter-layout

flutter-dropdownbutton