Flutter：DropdownButton<BankAccountDTO> 小部件需要 Material 小部件祖先

Question

我正在尝试在颤振中构建一个下拉菜单，但我不断收到以下错误：

在构建 DropdownButton(dirty, state: _DropdownButtonState#b71c7) 时引发了以下断言： 未找到 Material 小部件。

DropdownButton 小部件需要 Material 小部件祖先。

我是 Flutter 的新手，这是我的代码，目前我可以看到下拉菜单并选择一个帐户，但我一直收到此错误！任何帮助表示赞赏

    @override
  Widget build(BuildContext context) {
return Column(children: <Widget>[
  Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        SizedBox(
          width: 60,
        ),
        Column(
          children: <Widget>[
            Container(
              height: 5,
            ),
            Container(
                margin: EdgeInsets.only(top: 15.0),
                child: Column(
                  children: <Widget>[

                    Text(
                      'Select Account',
                    ),
                  ],
                )),
          ],
        ),
        SizedBox(
          width: 60,
          height: 60,
        ),
      ]),
  Expanded(
      child: Center(
          child: _isLoading
              ? SpinKitFadingCircle(
            size: 50.0,
          )
              : KeyboardAvoider(
            duration: Duration(milliseconds: 0),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Column(children: <Widget>[

                  ]),

                  Container(),
                  Column(children: <Widget>[

                    Text(
                      'Select account\n',),
                    Theme(
                      data: Theme.of(context).copyWith(
                        canvasColor: StateContainer
                            .of(context)
                            .curTheme
                            .background,
                      ),
                      child: DropdownButton(  // this is the drop down button causing error
                        value: (StateContainer
                            .of(context)
                            ?.bankAccounts
                            ?.values
                            ?.toList() ??
                            [])
                            .contains(_selectedAccount)
                            ? _selectedAccount
                            : (StateContainer
                            .of(context)
                            ?.bankAccounts
                            ?.length ??
                            0) >
                            0
                            ? StateContainer
                            .of(context)
                            ?.bankAccounts
                            ?.values
                            ?.first
                            : null,
                        icon: Icon(Icons.arrow_downward),
                        iconSize: 24,
                        elevation: 16,
                        underline: Container(
                          height: 2,
                          color: StateContainer
                              .of(context)
                              .curTheme
                              .primary,
                        ),
                        onChanged: (BankAccountDTO newValue) {
                          setState(() {
                            _selectedAccount = newValue;

                          });
                        },
                        items: StateContainer
                            .of(context)
                            ?.bankAccounts
                            ?.values
                            ?.map((BankAccountDTO bankAccountDTO) {
                          return DropdownMenuItem(
                            value: bankAccountDTO,
                            child: Text('${bankAccountDTO.type} ' +
                                '(...${bankAccountDTO.accountNumber
                                    .substring(
                                    bankAccountDTO.accountNumber.length -
                                        4)}) ' +
                                '\$${bankAccountDTO.balance.toStringAsFixed(
                                    2)}'),
                          );
                        })?.toList(),
                      ),
                    )

                  ])
                ]),
          ))),

Answer 1

错误指出DropdownButton 小部件需要Material 小部件祖先。可以通过将整个小部件树包装到 Scaffold 小部件中来修复它。

我使用您的代码添加了一个示例：

 // wrap with a scafffold widget
    return Scaffold( // new line
      body: Column(
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  width: 60,
                ),
                Column(
                  children: <Widget>[
                    Container(
                      height: 5,
                    ),
                    Container(
                        margin: EdgeInsets.only(top: 15.0),
                        child: Column(
                          children: <Widget>[
                            Text(
                              'Select Account',
                            ),
                          ],
                        )),
                  ],
                ),
                SizedBox(
                  width: 60,
                  height: 60,
                ),
              ]),
          Expanded(
            child: Center(
              child: _isLoading
                  ? SpinKitFadingCircle(
                      size: 50.0,
                    )
                  : KeyboardAvoider(
                      duration: Duration(milliseconds: 0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Column(children: <Widget>[]),
                          Container(),
                          Column(
                            children: <Widget>[
                              Text(
                                'Select account\n',
                              ),
                              Theme(
                                data: Theme.of(context).copyWith(
                                  canvasColor: StateContainer.of(context)
                                      .curTheme
                                      .background,
                                ),
                                child: DropdownButton(
                                  // this is the drop down button causing error
                                  value: (StateContainer.of(context)
                                                  ?.bankAccounts
                                                  ?.values
                                                  ?.toList() ??
                                              [])
                                          .contains(_selectedAccount)
                                      ? _selectedAccount
                                      : (StateContainer.of(context)
                                                      ?.bankAccounts
                                                      ?.length ??
                                                  0) >
                                              0
                                          ? StateContainer.of(context)
                                              ?.bankAccounts
                                              ?.values
                                              ?.first
                                          : null,
                                  icon: Icon(Icons.arrow_downward),
                                  iconSize: 24,
                                  elevation: 16,
                                  underline: Container(
                                    height: 2,
                                    color: StateContainer.of(context)
                                        .curTheme
                                        .primary,
                                  ),
                                  onChanged: (BankAccountDTO newValue) {
                                    setState(() {
                                      _selectedAccount = newValue;
                                    });
                                  },
                                  items: StateContainer.of(context)
                                      ?.bankAccounts
                                      ?.values
                                      ?.map((BankAccountDTO bankAccountDTO) {
                                    return DropdownMenuItem(
                                      value: bankAccountDTO,
                                      child: Text('${bankAccountDTO.type} ' +
                                          '(...${bankAccountDTO.accountNumber.substring(bankAccountDTO.accountNumber.length - 4)}) ' +
                                          '\$${bankAccountDTO.balance.toStringAsFixed(2)}'),
                                    );
                                  })?.toList(),
                                ),
                              )
                            ],
                          )
                        ],
                      ),
                    ),
            ),
          ),
        ],
      ),
    );