CODEWITHSUNDEEP
dartflutter
Harsh Bhikadia
Harsh Bhikadia

Reputation: 10865

Remove underline from DropdownButtonFormField

How can I remove the underline from DropdownButtonFormField (check photo below), I have tried various combinations of options with InputDecortaion couldn't find any way.

DropdownButtonFormField

SizedBox(
  width: 100.0,
  child: DropdownButtonFormField<int>(
    decoration: InputDecoration(
        border: UnderlineInputBorder(
            borderSide:
                BorderSide(color: Colors.white))),
    value: 2,
    items: <DropdownMenuItem<int>>[
      DropdownMenuItem<int>(
        value: 1,
        child: Text("Owner"),
      ),
      DropdownMenuItem<int>(
        value: 2,
        child: Text("Member"),
      ),
    ],
  ),

Upvotes: 97

Views: 106953

Answers (22)

G. Oluwafemi
G. Oluwafemi

Reputation: 109

Easy Way to do it:

DropdownButtonFormField<String>(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.transparent),
      ),
    ),
  ...
)

Upvotes: 4

Muhammad Ammar
Muhammad Ammar

Reputation: 21

This worked for me

border: InputBorder.none,

Upvotes: 1

Nikhil Sharma
Nikhil Sharma

Reputation: 21

This worked for me

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

Upvotes: 1

waqar hameed co
waqar hameed co

Reputation: 9

decoration: InputDecoration(
                errorBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.transparent)),
                enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(2.0),
                    borderSide: BorderSide(color: kLightBlackColor)),
              ),

Upvotes: 0

gufdoor
gufdoor

Reputation: 21

You could try the following code:

decoration: InputDecoration(
    border: InputBorder.none,
)

To disable every border on the width, set InputBorder.none for border attribute. Or if you prefer to disable only the border when dropdown is enable, set for enabledBorder.

Upvotes: 2

fares hassan
fares hassan

Reputation: 176

You can just Do this

decoration: const InputDecoration(
                                  // enabledBorder: InputBorder.none,
                                  // disabledBorder: InputBorder.none,
                                  // focusedBorder: InputBorder.none,
                                  // errorBorder: InputBorder.none,
                                  border: InputBorder.none,
                              ),

Upvotes: 1

pankaj desai
pankaj desai

Reputation: 21

DropdownButtonHideUnderline(
                  child: ButtonTheme(
                    alignedDropdown: false,
                    splashColor: Colors.grey,
                    child: DropdownButton<String>(
                      value: _myPargna,
                      iconSize: 25,
                      icon: Icon(Icons.arrow_drop_down),
                      style:
                      TextStyle(fontSize: 18, color: Color(0xFF1f193d)),
                      hint: Row(
                        children: [
                          SizedBox(width: 11),
                          Text(
                            'Select Province',
                            style: TextStyle(color: Colors.grey),
                          ),
                        ],
                      ),
                      onChanged: (String newValue) {
                        setState(() {
                          _myPargna = newValue;
                        });
                      },
                      items: items.map((String items) {
                        return DropdownMenuItem(
                          child: Row(
                            children: [
                              SizedBox(width: 12),
                              Text(
                                items,
                                style: TextStyle(color: Colors.black),
                              ),
                            ],
                          ),
                          value: items,
                        );
                      }).toList(),
                    ),
                  ),
                ),

Upvotes: 1

Abhilash TU
Abhilash TU

Reputation: 401

underline can take a widget so, you just have assigned it an empty Container, or a SizedBox.shrink()

                  underline:Container(),
                         -- or --
                  underline:SizedBox.shrink(),

Example :

child: DropdownButton<String>(
                  // Just have to assign to a empty Container
                  underline:Container(),
                  value: dropdownValue,
                  icon: Icon(Icons.keyboard_arrow_down),
                  iconSize: 24,
                  elevation: 16,
                  onChanged: (String newValue) {
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  items:[
                    deptList[0].dept,
                    deptList[1].dept,
                    deptList[2].dept,
                    deptList[3].dept,
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                )

Upvotes: 29

salauddin23shumon
salauddin23shumon

Reputation: 165

if DropdownButtonFormField text get trim due to outline border then use this code:

DropdownButtonFormField<String>(
                              decoration: InputDecoration(
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white)),
                                  isDense: true,)

Upvotes: 1

Al-Ameen
Al-Ameen

Reputation: 159

As of now, DropdownButtonFormField doesn't support DropdownButtonHideUnderline.

Although it uses it under the hood to remove the underline from DropdownButton but then applies it's own decoration on top of that

Setting border to InputBorder.none will do the job

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

If you want the border to appear on error you can use

InputDecoration(
  border: InputBorder.none,
  errorBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
  ),
),

Upvotes: 7

Guillame Julien
Guillame Julien

Reputation: 1

if you want just disable the border in all the case you can use :

 DropdownButtonFormField(
                validator: _validator,
                decoration: InputDecoration(
                    border: InputBorder.none,
                 ),
                items: [],
                onChanged: (value) {}),
          ),

if you want disable only when there is no error you can use this

Upvotes: 0

Aathira
Aathira

Reputation: 813

DropdownButtonFormField(
              iconSize: 30,
              decoration: InputDecoration(enabledBorder: InputBorder.none),
              hint: Text(
                "Select Duration",
                style: TextStyle(fontSize: 20),
              ),
              items: listDrop,
              onChanged: (value) {
                duration = value;
              },
            )

Upvotes: 0

Chanaka Fernando
Chanaka Fernando

Reputation: 2335

According to this [Flutter Doc] You can do like this. Simply create an object of DropdownButtonHideUnderline class and pass your current implementation of the DropdownButton as the child of DropdownButtonHideUnderline. Thts it ;)

DropdownButtonHideUnderline(
          child: new DropdownButton<String>(
            ......
          ),
        ),

Upvotes: 5

Hassan Hallak
Hassan Hallak

Reputation: 350

Add underline: Container() to your settings like this:

SizedBox(
   ...
   underline: Container(),
),

Upvotes: 5

fgblomqvist
fgblomqvist

Reputation: 2424

The proper/clean solution nowadays is to use InputBorder.none:

DropdownButtonFormField<int>(
  decoration: InputDecoration(
    enabledBorder: InputBorder.none,
    ...
  ),
  ...
)

You might also want to set border, focusedBorder, errorBorder, and disabledBorder to InputBorder.none if you want to avoid the border from showing in all cases.

Upvotes: 34

Nandakishor Dhanaji Valakunde
Nandakishor Dhanaji Valakunde

Reputation: 661

You can change underline property to blank or null widget it will work like charm check the below property

underline: widget or SizedBox(),

Ex:- DropdownButton( icon: Icon(Icons.more_vert), isExpanded: true, value: dropValue, underline: widget or SizedBox(),

Upvotes: 5

ravish.hacker
ravish.hacker

Reputation: 1183

Underline takes a Widget. Pass it a blank widget, like below.

DropdownButton<T>(
  value: value,
  underline: SizeBox(), // Empty box will remove underline
)

Upvotes: 2

Boy
Boy

Reputation: 7487

Setting the underline property to SizedBox() makes it invisible too:

...

DropdownButton(
  underline: SizedBox(),

...

Upvotes: 110

Flash
Flash

Reputation: 49

DropdownButtonHideUnderline(
                      child: DropdownButton(
                         isExpanded: true,
                      hint: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("Select State"),
                      ),
                      style: MyStyle().getTextStyle("x1black"),
                      items: <String>[
                        'Messaging',
                        'Chating',
                        'No Longer Interested',
                        'Document Request'
                      ].map((String value) {
                        return new DropdownMenuItem<String>(
                          value: value,
                          child: new Text(value),
                        );
                      }).toList(),
                      onChanged: (_) {},
                      ),

                    ),

Upvotes: 2

Krishna Jangid
Krishna Jangid

Reputation: 5410

Just wrap DropdownButton inside DropdownButtonHideUnderline like this :

new DropdownButtonHideUnderline(
 child: DropdownButton()
)

Upvotes: 189

Uhelliton
Uhelliton

Reputation: 186

use 

DropdownButton<String>(
                    hint: Text("Status"),
                    value: 'Text Default',
                    isExpanded: true,
                    iconSize: 30,
                    underline: Container(
                      height: 1.0,
                      decoration: const BoxDecoration(
                          border: Border(bottom: BorderSide(color: Colors.transparent, width: 0.0))
                      ),
                    ),
...

Upvotes: 3

anmol.majhail
anmol.majhail

Reputation: 51206

One way of Doing it :

In your Code - change decoration: InputDecoration to decoration: InputDecoration.collapsed

body: SizedBox(
          width: 100.0,
          child: DropdownButtonFormField<int>(
            decoration: InputDecoration.collapsed(hintText: ''),
            value: 2,
            ...

OR

In your Code - instead of border Use enabledBorder: UnderlineInputBorder

DropdownButtonFormField<int>(
          decoration: InputDecoration(
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white))),
          value: 2,
          items: <DropdownMenuItem<int>>[
          ....

Upvotes: 69

Related Questions