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

Question

我正在创建一个下拉菜单，以允许我的用户选择他们的首选语言。下拉菜单看起来不错，但是当我滚动到屏幕最底部并单击 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 Debug模式下出现)。不知道为什么……