Cards as items in the DropdownMenuItem - flutter

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