Text in drop-down truncated on all menus of Flutter Linux application on 5k screen (5120 x 2160)

Question

I am developing a Flutter desktop application for Linux, and I am experiencing an issue with drop-down menus on 5k screens (5120 x 2160 resolution). The text in the drop-down menus is being truncated, making it difficult to read.

I have tried adjusting the font size and the padding around the text, but this does not seem to have any effect on the issue. I have also tried running the application on a lower resolution screen, and the issue does not occur.

Has anyone else experienced this issue? Is there a way to fix it, or is it a limitation of Flutter on Linux with high-resolution screens?

Here is the psuedo code snippet,

                padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 10.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("Display ${widget.model.templateName}",
                        style: fontStyleSemiBold.copyWith(
                            fontSize: 4.sp, color: ColorConst.blackTwo)),
                    Container(
                      width: 100.w,
                      child: DropdownButtonHideUnderline(
                          child: DropdownButton<WorkspaceTemap>(
                        items: templateList                            .map((value) => DropdownMenuItem(
                                  child: Text(value.name!,
                                      style: fontStyleMedium.copyWith(
                                          fontSize: 4.sp)),
                                  value: value,
                                ))
                            .toList(),
                        onChanged: (newVal) {
                          setState(() {
                            selectedTemplate = newVal;
                            selectedId = selectedTemplate!.id;
                            tempVisible = selectedId == 2 ? true : false;
                            widget.onchange(
                                newVal!.id, newVal.tileNo, newVal.name);
                          });
                        },
                        isExpanded: true,
                        value: selectedTemplate,
                        hint: Text('Select Template',
                            style: fontStyleSemiBold.copyWith(
                                fontSize: 4.sp, color: ColorConst.blackTwo)),
                      )),
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5.0),
                        color: ColorConst.textFieldColor,
                        border: Border.all(
                            style: BorderStyle.solid,
                            color: ColorConst.textFieldBorderColor,
                            width: 0.80),
                      ),
                    ),
                  ],
                ),
              ),

Please check the screenshot of the issue,

Any help would be greatly appreciated. Thank you in advance!

Answer 1

You can fix this by adding itemHeight: specified bay calculating with the screen resolution will solve this issue.

Eg:

 itemHeight: MediaQuery.of(context).textScaleFactor * kMinInteractiveDimension

You may customise this based on your requirement.