Plotting a drop-down menu with a list of cards - flutter

Question

In my flutter project, I want to plot a dropdown list first and then a list of Cards.
Like the above picture, I want to keep a dropdown menu with list of items("All, Visited, Pending, Cancelled") below the appbar and the "All" option selected by default. Below the dropdown box, I want to plot a list of cards.
My main aim is to select the card according to the selected item in the dropdown box. If I select the Pending option from the dropdown then below the cards with only Pending status will be shown. If I choose All option from the dropdown then all of the cards will be shown.
I want to choose the cards according to the dropdown's items.
I have written the code for plotting a list of cards but unable to find out the way to write the code for dropdown menu. Kindly help me plotting the dropdown box (below the appbar & before the cards).
Here is my code for the list of cards:
import 'package:flutter/material.dart';
class AdminHomeContent extends StatefulWidget {
#override
_AdminHomeContentState createState() => _AdminHomeContentState();
}
class _AdminHomeContentState extends State<AdminHomeContent> {
Color getdynamicColor(String status) {
if(status == "Pending"){
return Colors.lightGreen;
}
if (status == "Visited") {
return Colors.green[900];
}
if (status == "Cancelled") {
return Colors.red;
}
return Colors.black;
}
final List<Patient> patients = [
Patient('Person A', 'https://images.unsplash.com/photo-1545996124-0501ebae84d0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
8, 2, 'Pending', '10-08-2015', true),
Patient('Person B', 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTF8fGh1bWFufGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80',
8, 5, 'Cancelled', '23-12-2019', false),
Patient('Person C', 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
8, 7, 'Visited', '01-02-2019', false),
Patient('Person D', 'https://upload.wikimedia.org/wikipedia/commons/e/ec/Woman_7.jpg',
8, 4, 'Pending', '20-09-2018', true),
Patient('Person E', 'https://cdn.pixabay.com/photo/2017/08/07/14/15/portrait-2604283__340.jpg',
8, 6, 'Visited', '28-04-2017', false)
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: aapBarSection('Today\'s Appointments' , Colors.blueAccent[700], context),
body:
Container(
margin: EdgeInsets.only(top: 60.0),
child: ListView.builder(
itemCount: patients.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(9.0),
child: SizedBox(
height: 120,
child: Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Row(
children: [
Expanded(
flex: 3,
child: Container(
child: CircleAvatar(
backgroundImage: NetworkImage(patients[index].imgPath),
radius: 40.0,
),
),
),
Expanded(
flex: 4,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(patients[index].name, style: TextStyle(
fontSize: 23.0,
fontWeight: FontWeight.bold,
color: Colors.black87
),),
SizedBox(
height: 20,
),
Text(patients[index].completedSession.toString() +'/'+ patients[index].totalSession.toString(),
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.black54
),),
],
),
),
),
Expanded(
flex: 3,
child: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
height: 10,
width: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: getdynamicColor(patients[index].status)
),
),
SizedBox(
width: 8.0,
),
Text(patients[index].status,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: getdynamicColor(patients[index].status)
),
),
],
),
),
),
],
),
),
),
),
),
);
},
),
),
);
}
}
Here is my model class:
patient.dart
class Patient {
String name ;
String imgPath ;
int totalSession ;
int completedSession ;
String status ;
String dob ;
bool isActive ;
Patient(this.name, this.imgPath,this.totalSession,this.completedSession,this.status,this.dob,this.isActive);
}

Answer 1

Use ExpansionTile , its Easy
ExpansionTile(
initiallyExpanded: false,
title: Text(
"Settings",
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.white),
),
children: <Widget>[
Container(
color: Colors.grey[100],
child: Column(
children: [
ListTile(
title: Text(
'Charges',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500,
color: Colors.black87),
),
onTap: () {},
),
Divider(
color: Colors.grey[600],
),
ListTile(
title: Text(
'Billing',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500,
color: Colors.black87),
),
onTap: () {},
),
Divider(
color: Colors.grey[600],
),
ListTile(
title: Text(
'Notice',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500,
color: Colors.black87),
),
onTap: () {},
),
],
),