How to Fix Dropdown Button Text Alignment Issue?

77 Views Asked by At

I have created two dropdown buttons in my Flutter app, and I want them to look the same. Problem the text inside the hint of the second dropdown button is not showing correctly, creating a visual difference. How can I make sure the text in the second dropdown button aligns properly and looks like the first one?

I

First DropDownButton Widget Code:

DropdownButtonFormField<String>(
                            isExpanded: true,
                            decoration: InputDecoration(
                              hoverColor: Colors.green,
                              filled: true,
                              fillColor: CupertinoColors.systemGrey4,
                              contentPadding:
                                  const EdgeInsets.symmetric(vertical: 12),
                              border: OutlineInputBorder(
                                borderSide: BorderSide.none,
                                borderRadius: BorderRadius.circular(32),
                              ),
                            ),
                            hint: Text(
                              'İşlem Yapılan Hisse Sayısı',
                              textAlign: TextAlign.center,
                              style: (buildJosefinSans(0.5, 16)),
                            ),
                            items: list
                                .map((item) => DropdownMenuItem<String>(
                                      value: item.toString(),
                                      child: Align(
                                          alignment: Alignment.center,
                                        child: Text(
                                          item.toString(),
                                          textAlign: TextAlign.center,
                                        ),
                                      ),
                                    ))
                                .toList(),
                            validator: (value) {
                              if (value == null) {
                                return 'İşlem Yapılan Hisse Sayısı';
                              }
                              return null;
                            },
                            onChanged: (value) {
                            },
                            onSaved: (value) {
                              selectedValue = value.toString();
                            },
                            buttonStyleData: const ButtonStyleData(
                              padding: EdgeInsets.only(right: 8),
                            ),
                            iconStyleData: const IconStyleData(
                              icon: Icon(
                                Icons.keyboard_arrow_down_sharp,
                                color: Colors.black,
                              ),
                              iconSize: 32,
                            ),
                            dropdownStyleData: DropdownStyleData(
                              decoration: BoxDecoration(
                                color: CupertinoColors.systemGrey5,
                                borderRadius: BorderRadius.circular(15),
                              ),
                            ),
                            menuItemStyleData: const MenuItemStyleData(
                              padding: EdgeInsets.symmetric(horizontal: 16),
                            ),
                          ) 

Second DropDownButton Widget Code:

DropdownButtonFormField2<int>(
                        isExpanded: true,
                        decoration: InputDecoration(
                          hoverColor: Colors.green,
                          contentPadding: const EdgeInsets.symmetric(vertical: 16),
                          filled: true,
                          fillColor: CupertinoColors.systemGrey4,
                          border: OutlineInputBorder(
                              borderSide: BorderSide.none,
                            borderRadius: BorderRadius.circular(32),
                          ),
                          isDense: true,
                        ),
                        value: buyDropDownValue,
                          icon: Icon(
                            Icons.keyboard_arrow_down_sharp,
                            color: Colors.black,
                            size: 32,
                          ),
                        elevation: 16,
                        style: (buildJosefinSans(0.5, 16)),
                        onChanged: (int? value) {
                          setState(() {
                            buyDropDownValue = value!;
                            bDropDownValue = buyDropDownValue!;
                          });
                        },
                        hint: Padding(
                          padding: EdgeInsets.fromLTRB(phoneWidth * 0.05, 0, 0, 0),
                          child: Text(
                            'Satın Alınan Hisse Sayısı', 
                            textAlign: TextAlign.center,
                            style: buildJosefinSans(0.5, 16),
                          ),
                        ),
                        items: list.map<DropdownMenuItem<int>>((int value) {
                          return DropdownMenuItem<int>(
                            alignment: Alignment.center,
                            value: value,
                            child: Text(value.toString(), textAlign: TextAlign.center,),
                          );
                        }).toList(),
                        dropdownColor: CupertinoColors.systemGrey5,
                        borderRadius: BorderRadius.circular(15),
                      )
0

There are 0 best solutions below