Flutter Web | How to center a dropdown in a container?

I’m an expert user of Flutter but I’m pretty new to Flutter Web.
I’m trying to build a list of months where the user can select the desired one.
For some reason the list and container are all broken in style and I don’t know why.

List
Selected

Padding(
  padding: EdgeInsets.fromLTRB(38.w, 28.h, 38.w, 28.h),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          Container(
            decoration: ShapeDecoration(
              color: Color(0xFFF8FCFC),
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  width: 1,
                  color: AppColors.whiteAccent,
                ),
                borderRadius: BorderRadius.circular(10.r),
              ),
            ),
            child: Center(
              child: DropdownButton<String>(
                style: TextStyle(
                  color: AppColors.blue,
                  fontSize: 40.sp,
                  height: 0.03,
                ),
                value: 'Novembre',
                iconSize: 0,
                underline: const SizedBox(),
                elevation: 16,
                onChanged: debugPrint,
                focusColor: Colors.transparent,
                items: List.generate(
                        12, (month) => monthInLetters(month + 1))
                    .map<DropdownMenuItem<String>>(
                  (String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  },
                ).toList(),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
),

UPDATE

I managed to set the item height using the itemHeight property. Now I miss the vertical alignment and the fontWeight (that for some reason is stuck on regular size)

The issue is here using height: 0.03, you can remove this while it is needed to be 1.

You can also play with

  • DropdownButton’s itemHeight, padding.
  • DropdownMenuItem’s alignment.
 DropdownButton<String>(
  // itemHeight: ,
  padding: EdgeInsets.all(8),

  style: TextStyle(
    fontSize: 40,
    height: 1, //this
  ),
  value: 'Novembre',
  iconSize: 0,
  underline: const SizedBox(),
  elevation: 16,
  onChanged: debugPrint,
  focusColor: Colors.transparent,
  items: 
    ....
      return DropdownMenuItem<String>(
        alignment: Alignment.center,
        value: value,
        child: Text(
          value,
         
        ),
      );
),

Leave a Comment