App crashes when DropdownButton is clicked (Flutter)

Question

So I created a DropdownButton in my app. The thing is that whenever I click the dropdown, the app crashes. I'm so confused because when I click other widgets like TextFormFields before clicking the DropdownButton it seems to work properly.

Error Message: 'package:flutter/src/material/dropdown.dart': Failed assertion: line 581 pos 12: 'menuHeight == menuBottom - menuTop': is not true.

Here's my DropdownButton:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DropDownTry(),
    );
  }
}

class DropDownTry extends StatefulWidget {
  const DropDownTry({Key? key}) : super(key: key);

  @override
  _DropDownTryState createState() => _DropDownTryState();
}

class _DropDownTryState extends State<DropDownTry> {
  String dropdownValue = 'Male';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              underline: SizedBox(),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                });
              },
              items: <String>['Male', 'Female']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            )),
      ),
    );
  }
}

Answer 1

Try below code hope its help to you try to remove const keyword for SizedBox Widget

Declare one String variable for default dropdown value

  String? dropdownValue;

Your Dropdown Lists

List gender = [
    'Male',
    'Female',
    'Other',
  ];

Your Dropdown Widget

DropdownButtonHideUnderline(
              child: DropdownButton(
                hint: Text(
                  'Select Gender',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                  textAlign: TextAlign.center,
                ),
                value: dropdownValue,
                onChanged: (String? genderNewValue) {
                  setState(
                    () {
                      dropdownValue = genderNewValue;
                    },
                  );
                },
                items: gender.map<DropdownMenuItem<String>>(
                  (value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                        style: TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    );
                  },
                ).toList(),
              ),
            ),

Your result screen:

Answer 2

I got same error. after struggling 2 days, I figured it out that the problem is about two factors. one is I used dropdown in showModalBottomSheet and second one is I didn't use appBar in scaffold where mydropdown located in. When i located my scaffold that contains my dropdown in, to another screen and add appBar. it worked perfectly.

Answer 3

Wrap your dropdown code in SingleChildScrollView.

ex.

return Scaffold(
  body: SingleChildScrollView(
    child:Center(
        child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              underline: SizedBox(),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                });
              },
              items: <String>['Male', 'Female']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            )),
      ),
  )
)

Answer 4

Mainly, don't make the DropDown very sticky to the top. It likes some space above. Also, this happens due to the bad layout of the parent widgets. Maybe u have made a column with a single child and this child is a stack and the crashed widget is inside the stack. Try to make a clearer layout of the parent widgets. also, put the main parent of the screen in a Material Widget. The problem is caused because the framework can't calculate the heights beyond the menu.