Cards as items in the DropdownMenuItem

Question

I would like to know if it is possible to have card widgets as the items in a dropdownmenu button in flutter.

I have tried, but I haven't managed to make the cards visible in the dropdown.

Below are the codes

• The class for the cards

class AccountContainer extends StatefulWidget {
  @override
  _AccountContainerState createState() => _AccountContainerState();
}

class _AccountContainerState extends State<AccountContainer> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(15.0),
      margin: EdgeInsets.symmetric(vertical: 15.0),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey[300],
          ),
          borderRadius: BorderRadius.circular(25.0)
      ),
      child: Column(
        children: <Widget>[
          Card(
            margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
            child: Container(
              padding: EdgeInsets.all(10.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('Saving Account',
                    style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),),
                  SizedBox(height: 5.0,),
                  Text('Savings XXX-X-XX563-9',
                    style: TextStyle(
                      fontSize: 10.0,
                      color: Colors.grey[900],
                    ),),
                  SizedBox(height: 15.0,),
                  Container(
                    child: Row(
                      children: <Widget>[
                        RichText(
                          text: TextSpan(
                            text: '56,302.56',
                            style: TextStyle(
                              fontSize: 25.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                            children: <TextSpan> [
                              TextSpan(text: 'THB',
                                style: TextStyle(
                                    fontSize: 15.0,
                                    fontWeight: FontWeight.bold
                                ),),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Card(
            margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
            child: Container(
              padding: EdgeInsets.all(10.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('Salary Account 2',
                    style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),),
                  SizedBox(height: 5.0,),
                  Text('Savings XXX-X-XX563-9',
                    style: TextStyle(
                      fontSize: 10.0,
                      color: Colors.grey[900],
                    ),),
                  SizedBox(height: 15.0,),
                  Container(
                    child: Row(
                      children: <Widget>[
                        RichText(
                          text: TextSpan(
                            text: '89,302.56',
                            style: TextStyle(
                              fontSize: 25.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                            children: <TextSpan> [
                              TextSpan(text: 'THB',
                                style: TextStyle(
                                    fontSize: 15.0,
                                    fontWeight: FontWeight.bold
                                ),),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

• Calling the card class

class AccountSelections extends StatefulWidget {
  @override
  _AccountSelectionsState createState() => _AccountSelectionsState();
}

class _AccountSelectionsState extends State<AccountSelections> {

  int accountSelected = 0;
  var accountNames;

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(width: 419.0, height: 150.0),
      child:
      DropdownButton(
        icon: Icon(Icons.keyboard_arrow_down,
          color: Colors.blue[500],),
        isExpanded: true,
        value: accountSelected,
        onChanged: (value) {
          setState(() {
            accountSelected = value;
          });
        },
        items: accountNames.map((value) {
          return DropdownMenuItem(
            value: AccountContainer(),
            child: Text(value),
          );
        })?.toList(),
      ),
    );
  }
}

Answer 1

Wrap you Text(value) widget with card and give elevation to card