Flutter：DropDownButton列表从一开始就没有显示

Question

我正在尝试实现一个DropDownButton，其中项目列表将从一开始就显示出来。 意思是，我希望打开和显示项目列表，就像项目列表“完成”DropDownButton - 就在 绿色下划线 之后并且不管当前值如何（请参阅下面的当前行为）。

我尝试在网上查找有关如何实现它的一些信息，但它没有产生任何结果。另外，我尝试用小部件包装DropDownButton 以设置项目放置的对齐方式，但不幸的是我什么也没做。

我错过了什么？ 如何设置打开DropDownButton 的列表，以便项目从一开始就对齐？

这是我的代码：

final List<String> categories = ['', 'Cakes', 'Chocolate', 'Balloons', 'Flowers', 'Greeting Cards','Gift Cards', 'Other'];
String _currCategory = categories[0];

@override
Widget build(BuildContext context){
  return Material(
    child: Scaffold(
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: false,
      backgroundColor: Colors.transparent,
      key: _scaffoldKeyMainScreen,
      appBar: AppBar(
      centerTitle: true,
      elevation: 0.0,
      backgroundColor: Colors.lightGreen[800],
      actions: <Widget>[
        ///Checkout - cart
        IconButton(
          icon: Icon(Icons.shopping_cart_outlined),
          onPressed: () {}
        ),
        /// WishList
        IconButton(
          icon: Icon(Icons.favorite),
          onPressed: () => {}
       ],
       leading: Icon(Icons.logout),
       title: Text('My app'),
      ),
    body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.width * 0.35,
              color: Colors.lightGreen[800],
            ),
          ),
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.0),
              topRight: Radius.circular(20.0),
            ),
            child: Container(
              color: Colors.white,
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Flexible(
                    child: Align(
                      alignment: Alignment.center,
                      child: Container(
                        color: Colors.transparent,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.all(11.0),
                              child: Center(
                                child: Text('  Sort by: ',
                                  style: TextStyle(
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              color: Colors.transparent,
                              child: Theme(
                                data: Theme.of(context).copyWith(
                                  canvasColor: Colors.transparent,
                                  buttonTheme: ButtonTheme.of(context).copyWith(
                                    alignedDropdown: true,
                                  )
                                ),
                                child: DropdownButton<String>(
                                  dropdownColor: Colors.white,
                                  underline: Container(
                                    height: 2,
                                    color: Colors.lightGreen[300],
                                  ),
                                  icon: Icon(Icons.keyboard_arrow_down_outlined,
                                    color: Colors.lightGreen[200],
                                  ),
                                  elevation: 8,
                                  value: _currCategory,
                                  items: categories
                                      .map<DropdownMenuItem<String>>((e) => DropdownMenuItem(
                                        child: Text(e, style: TextStyle(color: Colors.lightGreen[300]),),
                                        value: e,
                                    )
                                  ).toList(),
                                  onChanged: (String value) {
                                    setState(() {
                                      _currCategory = value;
                                    });
                                  },
                                )
                              ),
                            ),
                            ///in my app I have a GridView that is built from items loaded from Firebase
                            ///but I think it has nothing to do with the current problem so I placed a symbolic text
                            Center(child: Text(_currCategory)),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ]
      ),
    )
  );
}

当前行为： App Demo of Current Behavior

Answer 1

我终于能够解决这个问题，并在这里找到了我想要的东西： https://*.com/a/59859741/13727011

此外，这里有一个关于如何实现 Dropdown 的优秀 YouTube 教程： https://youtu.be/j5DkShqvIAU