Flutter Custom Title Dropdown (Material Page Filter) - material-design

Question

Following the concept of the app bar "page filter" I'd like to put a DropdownButton as the title of the AppBar. I tried, but it doesn't look good.
https://material.io/guidelines/layout/structure.html#structure-app-bar
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _value = 'one';
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new DropdownButton<String>(
value: _value,
items: <DropdownMenuItem<String>>[
new DropdownMenuItem(
child: new Text('one'),
value: 'one',
),
new DropdownMenuItem(
child: new Text('two'),
value: 'two'
),
],
onChanged: (String value) {
setState(() => _value = value);
},)
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'hello world',
),
],
),
),
);
}
}
However it looks like:
which doesn't follow the material pattern found at the link stated above due to the weird looking underline... bonus: the text and button should be white.

Answer 1

I did find some things that helped my situation... The widgets DropdownButtonHideUnderline and Theme will help control how the dropdown looks in the title of the AppBar
new AppBar(
title: new Theme(
child: new DropdownButtonHideUnderline(
child: new DropdownButton<String>(
value: _value,
items: <DropdownMenuItem<String>>[
new DropdownMenuItem(
child: new Text('My Page'),
value: 'one',
),
],
onChanged: (String value) {
setState(() => _value = value);
},
),
),
data: new ThemeData.dark(),
),
),
However, now the popup's background color is black to match the dark theme... not sure if there's a way to have the theme not affect the actual popup.
I personally can live with the black background color of the popup... unless someone can also solve that.

Answer 2

Do something like this:
appBar: AppBar(
title: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButton(
value: _selectedItem,
items: _dropdownMenuItems,
underline: SizedBox(height: 0,),
//underline: SizedBox(),
onChanged: onChangeDropdownItem,
),
],
),
),
Then change your dropdown menu's style here:
/// Initialize dropdown menu
List<DropdownMenuItem<String>> buildDropdownMenuItems(List menu) {
List<DropdownMenuItem<String>> items = List();
for (String li in menu) {
items.add(
DropdownMenuItem(
value: li,
child: SizedBox(
width: 100,
child: Text(li, style: TextStyle(color: labelColor, fontWeight:
FontWeight.bold),
textAlign: TextAlign.center, overflow: TextOverflow.ellipsis,),),
),
);
}
return items;
}

Answer 3

Please just change your code to the one I have mentioned below and this one might work for your app., sorry for the bad editing of the picture. I have included the full code for your reference,.
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new MyHomePage(),
));
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _value = 'one';
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title:
new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new DropdownButton<String>(
value: _value,
items: <DropdownMenuItem<String>>[
new DropdownMenuItem(
child: new Text('one'),
value: 'one',
),
new DropdownMenuItem(child: new Text('two'), value: 'two'),
],
onChanged: (String value) {
setState(() => _value = value);
},
),
],
)
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'hello world',
),
],
),
),
);
}
}
See the demo here: https://codepen.io/andrerpena/pen/LYpZRqG

Answer 4

To have a white menu, change data: new Theme.dark() to Theme.of(context).copyWith(brightness: Brightness.dark))
But then another problems pop : The menu is white ; but the menu options are written in white too, making them unreadable.
After a deep inspection, it seems like it's currently not possible to have options using a different font color in the iddle state and when the dropdown is focused.
Consider creating an issue on their github