在颤振中单击下拉菜单时显示带有下拉选项的底部工作表

Question

我有一个显示各种选项的DropDown。当前行为将选项显示为DropdownMenuItem。

如何将DropdownMenuItem切换到显示DropDown内所有选项的BottomSheet？

当前代码：

DropdownButtonHideUnderline(
child: Container(
color: Color.fromRGBO(216, 216, 216, 0.33),
padding: const EdgeInsets.fromLTRB(32, 8, 16, 8),
child: DropdownButton<String>(
hint: Text("TEST DROPDOWN"),
items: <String>['A', 'B', 'C', 'D'].map((String value) {
// this crashes
return showModalBottomSheet(context: context, builder: (builder) {
return Container(
child: Text('Hello From Modal Bottom Sheet'),
padding: EdgeInsets.all(40.0),
);
});
// this works
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
...

编辑：我正在尝试在下拉单击时显示类似于iOS日期选择器的内容。

Answer 1

如果你想自己做，这里有一个简单的例子由我做：

class ModalDropDown extends StatefulWidget {
@override
_ModalDropDownState createState() => _ModalDropDownState();
}
class _ModalDropDownState extends State<ModalDropDown> {
String _selected = '';
List<String> _items = ['A', 'B', 'C', 'D'];
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Show Modal'),
onPressed: () => showModal(context),
),
Text('Selected item: $_selected')
],
),
);
}
void showModal(context){
showModalBottomSheet(
context: context,
builder: (context){
return Container(
padding: EdgeInsets.all(8),
height: 200,
alignment: Alignment.center,
child: ListView.separated(
itemCount: _items.length,
separatorBuilder: (context, int) {
return Divider();
},
itemBuilder: (context, index) {
return GestureDetector(
child: Text(_items[index]),
onTap: () {
setState(() {
_selected = _items[index];
});
Navigator.of(context).pop();
}
);
}
),
);
}
);
}
}

如果你想要iOS的Flutter madepicker，你可以使用CupertinoPicker。