flutterdartflutter-layoutflutter-dropdownbutton

Flutter DropdownButton - Dropdown shows up in different part of screen

I'm creating a dropdown to allow my users to select their preferred language. The dropdown looks good, but when I scroll to the very bottom of the screen and click on the DropdownButton, the resulting dropdown shows up in a totally different part of the screen, not near the button (see image below).

enter image description here

My code for the DropdownButton is as follows:

// 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;
        }
      ),
    );
  }
}

Thanks up front for any help you can provide!

Solution

  • I never ended up being able to fix it, but it turned out not to be a problem in production (only showed up in chrome debugging mode). Not sure why that is...