How to Remove Underline From DropDownButtonForm Field In Flutter ?

2 min read
How to Remove Underline From DropDownButton Form Field In Flutter
How to Remove Underline From DropDownButton Form Field In Flutter

DropDown List is used only we have to select only one item from the list of available items so in this article we will go through How To Remove Underline From DropDownButtonForm Field In Flutter

So let’s Dive into the same.

Take a look at the below image to understand it very clearly.

How to Remove Underline From DropDownButton Form Field

How to Remove Underline From DropDownButton Form Field In Flutter?

Follow Steps like below:

Change Decoration: InputDecoration to decoration: InputDecoration.collapsed

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

User can also use enabledBorder: UnderlineInputBorder

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

So The User can also wrap a DropDownButton Inside DropDownButtonHideUnderline like below:

new DropdownButtonHideUnderline(
 child: DropdownButton()
)

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

DropdownButton(
  underline: SizedBox(),

...
)

Users can also set Input. Border聽to none using below code snippet.

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

Conclusion:

Thanks for Reading and on a Flutter Journey !!!

Kindly do let us know your thoughts on an Article.

Keep Learning!!! Keep Fluttering!!! If you are confused about something in flutter!!

Do let us know, we would love to assist 馃檪

So in this article, We Have Been through How to Remove Underline From DropDownButtonForm Field In Flutter.

FlutterAgency.com聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

FlutterAgency.com is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.

Leave a Reply