How can we change the width/padding of a Flutter DropdownMenuItem in a Dropdown?

Question

In Flutter, I can build a Dropdown with DropdownMenuItems, like this:

The DropdownMenuItems I add are always wider than the dropdown itself:

How do you

Answer 1

This feature has been added. See https://github.com/flutter/flutter/pull/14849

You can now wrap it in a ButtonTheme and set alignedDropdown to true.

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
          child: DropdownButton(
            value: name,
            items: listOfDropdownMenuItems,
            onChanged: onChanged,
            style: Theme.of(context).textTheme.title,
         ),
      ),
    ),
);

Answer 2

I solved this problem with changing isExpanded to true;

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        isExpanded: true,
        value: name,
        items: listOfDropdownMenuItems,
        onChanged: onChanged,
        style: Theme.of(context).textTheme.title,
      ),
    ),
);

Answer 3

isExpanded: true will stretch the width to full screen. But if you want a customise drop-down. Here is my customdropdown.dart

import 'package:flutter/material.dart';
class CustomDropDown extends StatelessWidget {
  final value;
  final List<String> itemsList;
  final Color dropdownColor;
  final Function(dynamic value) onChanged;
  const CustomDropDown({
    @required this.value,
    @required this.itemsList,
    this.dropdownColor,
    @required this.onChanged,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 20, top: 3, bottom: 3, right: 20),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        child: DropdownButtonHideUnderline(
          child: Padding(
            padding: const EdgeInsets.only(left: 14.0, right: 14),
            child: DropdownButton(
              isExpanded: true,
              dropdownColor: dropdownColor,
              value: value,
              items: itemsList
                  .map((String item) => DropdownMenuItem<String>(
                        value: item,
                        child: Text(item),
                      ))
                  .toList(),
              onChanged: (value) => onChanged(value),
            ),
          ),
        ),
      ),
    );
  }
}

Now you can call it like this.

CustomDropDown(
   value: selectedValue,
   itemsList: ['Music', 'Photographer'],
   onChanged: (value) {
        setState(() {
            selectedValue = value;
        });
    },
),