flutter - How to remove underline from DropdownButton

Flutter - DropdownButton Remove Underline

The DropdownButton class represents a material design button for selecting from a list of items. The DropdownButton allows the user to select from a number of items. The DropdownButton shows the currently selected item as well as an arrow that opens a menu for selecting another item. The DropdownButton’s all entries in a menu must represent values with consistent types. Commonly, the flutter developers use an enum. The DropdownButton class’s onChanged callback should update a state variable that defines the dropdown's value. When the flutter developers set the onChanged callback to null or the list of items to null then the dropdown button will be disabled.

The following flutter app development tutorial will demonstrate how to remove the underline from a DropdownButton widget. Here we will use the DropdownButton class’s underline property to hide/remove the underline of the DropdownButton widget.

The DropdownButton class’s underline property value is a widget that is widget to use for drawing the drop-down button's underline. For this property value, we pass a DropdownButtonHideUnderline instance to hide the underline from the specified DropdownButton widget.

The DropdownButtonHideUnderline class represents an inherited widget that causes any descendant DropdownButton widgets to not include their regular underline. The DropdownButtonHideUnderline is used by DataTable to remove the underline from any DropdownButton widgets placed within material data tables. This class child property value is the widget below this widget in the tree. Here we pass an empty Container instance for this child property value.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.red),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  String dropdownValue = "Orange";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFEFEFA),
      appBar: AppBar(
          title: const Text("DropdownButton Remove Underline")
      ),
      body: bodyContent(),
    );
  }


  bodyContent() {
    return Center(
        child: DropdownButton<String>(
          value: dropdownValue,
          items: <String>['Orange','Magenta','Olive','Black','Pink']
              .map<DropdownMenuItem<String>>((String value){
            return DropdownMenuItem<String>(
                value: value,
                child:Text(value)
            );
          }).toList(),
          onChanged: (String? newValue){
            // do something here
            setState(() {
              dropdownValue = newValue??dropdownValue;
            });
          },
          underline: DropdownButtonHideUnderline(child: Container()),
        )
    );
  }
}