单击按钮显示列表视图

Question

我想在同一屏幕上按下一个按钮时在屏幕中间显示一个列表视图。 列表视图应从各个方向填充到屏幕的混乱中。列表视图还需要搜索选项。目前，我添加了一个下拉列表，我想更改为列表视图

                   RaisedButton(
                    color: Colors.deepPurpleAccent, onPressed: () async {
                    print("maid clicked");
                    final MaidsSelection action = await _asyncSimpleDialog(context);
                  },
                    child: Text("Maids",style: TextStyle(color: Colors.white),
                    ),
                    shape: RoundedRectangleBorder(borderRadius: 
                   BorderRadius.circular(5.0)),
                  ),

女仆名单

enum MaidsSelection { Maid1, Maid2, Maid3, Maid4, Maid5 }

Future<MaidsSelection> _asyncSimpleDialog(BuildContext context) async {
return await showDialog<MaidsSelection>(
  context: context,
  barrierDismissible: true,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: const Text('Select Maid '),
      children: <Widget>[
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, MaidsSelection.Maid1);
          },
          child: const Text('Maid1'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, MaidsSelection.Maid2);
          },
          child: const Text('Maid2'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, MaidsSelection.Maid3);
          },
          child: const Text('Maid3'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, MaidsSelection.Maid4);
          },
          child: const Text('Maid4'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, MaidsSelection.Maid5);
          },
          child: const Text('Maid5'),
        )
      ],
    );
  });
 }