DropDownMenuItem Text Is Huge and Double Underlined

Question

My drop down button shows abnormally large text and has this weird double underline. I did some googling prior and people were saying to make sure you Material at the root. I've made this adjustment and it didn't seem to fix the issue. Any idea what could be the problem?

?

class FormsPage extends StatefulWidget {
  @override
  _FormsPageState createState() => _FormsPageState();
}

class _FormsPageState extends State<FormsPage> {
  WebViewController _controller;
  FormUrls _selectedForm;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: WillPopScope(
        onWillPop: () async => false,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Forms"),
            actions: <Widget>[
              Theme(
                data: Theme.of(context).copyWith(
                  canvasColor: MobileColors.lightBlue,
                ),
                child: _buildDropDown(),
              ),
            ],
          ),
          drawer: AwesomeDrawer(context, "FormsPage"),
          body: _buildWebView(),
        ),
      ),
    );
  }

  _buildDropDown() {
    return DropdownButton<FormUrls>(
      underline: Container(),
      value: _selectedForm,
      hint: Text(
        'Cycle through forms',
        style: TextStyle(color: Colors.white),
      ),
      icon: Icon(
        Icons.arrow_downward,
        color: Colors.white,
      ),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.black),
      onChanged: (newForm) {
        setState(() {
          _selectedForm = newForm;
        });
        setState(() {
          _controller.loadUrl(_selectedForm.formUrl);
        });
      },
      items: Client.formUrls.map<DropdownMenuItem<FormUrls>>((value) {
        return DropdownMenuItem<FormUrls>(
          value: value,
          child: Text(
            value.title,
            style: TextStyle(color: Colors.white),
          ),
        );
      }).toList(),
    );
  }
}