How to make DropdownButton menu width to fit text?

I want to have a dropdown button that has a width based on the menu text length. The dropdown arrow does not have any additional spacing between text. Like this:

Currently, I am getting this:

My dropdown button arrow is positioned based on the longest text.

My code:

Widget dropdownList(){
    return Container(
      child: DropdownButton<Location>(
          value: _selectedValue,
          icon: const Icon(Icons.expand_more),
          iconSize: 30,
          underline: SizedBox(),
          onChanged: (Location? newValue) {
            setState(() {
              _selectedValue = newValue!;
            });
          },
          style: const TextStyle(color: Colors.blue),
          selectedItemBuilder: (BuildContext context) {
            return locationList.map((Location value) {
              return Container(
                child: Text(
                  value.name,
                  style: const TextStyle(color: Colors.black,fontSize: 30,
                                    fontWeight: FontWeight.w300),
                ),
              );
            }).toList();
          },
          items: locationList.map<DropdownMenuItem<Location>>((Location value) {
            return DropdownMenuItem<Location>(
              value: value,
              child: Text(value.name, style: TextStyle(color: Colors.black,fontSize: 15,
                                  fontWeight: FontWeight.w300)),
            );
          }).toList(),
        ),
    );
  }