Remove DropdownButtonFormField selected value underline-CodePudding

i'm trying to remove the underline from the selected value in a DropdownButtonFormField, tried different solutions from

And here is my code:

Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
                    child: Container(
                      padding: EdgeInsets.only(left: 20),
                      decoration: BoxDecoration(
                          color: Colors.grey[200],
                          border: Border.all(color: Colors.white),
                          borderRadius: BorderRadius.circular(12)),
                      child: DropdownButtonHideUnderline(
                        child: DropdownButtonFormField<String>(
                          decoration: InputDecoration(
                              enabledBorder: UnderlineInputBorder(
                                  borderSide:
                                      BorderSide(color: Colors.transparent))),
                          hint: Text('Type d\'utilisateur'),
                          items: types.map(buildMenuItem).toList(),
                          onChanged: (value) {
                            setState(() {
                              type = value!;
                            });
                          },
                          value: type,
                          isExpanded: true,
                          iconSize: 26,
                          icon: Padding(
                            padding: const EdgeInsets.only(right: 8.0),
                            child: Icon(
                              Icons.arrow_drop_down,
                              color: Colors.black,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

CodePudding user response：

You can use border: InputBorder.none

child: DropdownButtonHideUnderline(
  child: DropdownButtonFormField<String>(
    decoration: InputDecoration(border: InputBorder.none),

CodePudding user response：

You just need to change the border type of the DropDownButtonFormField from UnderlineInputBorder to InputBorder.none

                 Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 25.0),
                        child: Container(
                          padding: EdgeInsets.only(left: 20),
                          decoration: BoxDecoration(
                              color: Colors.grey[200],
                              border: Border.all(color: Colors.white),
                              borderRadius: BorderRadius.circular(12)),
                          child: DropdownButtonHideUnderline(
                            child: DropdownButtonFormField<String>(
                              decoration: InputDecoration(
                                  border: InputBorder.none, //just change this
                              hint: Text('Type d\'utilisateur'),
                              items: types.map(buildMenuItem).toList(),
                              onChanged: (value) {
                                setState(() {
                                  type = value!;
                                });
                              },