flutter design list item - flutter

Question

I want to design something like the below image:
the main widget is Card and the skill's widget is Chip. skills length can be between 3 words to 12 words, so the number of chips that can show is variable. this is my model:
class NurseListItem {
late String imageUrl;
late String nurseName;
late String userType;
late List<String> skills;
late bool isBusy;
}
how can I create this listItem widget?

Answer 1

Try to below code I have try above image like Widget hope its helpful for you.
Card(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.green.shade300,
),
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
children: [
ListTile(
leading: Icon(Icons.check),
title: Text('User Name'),
subtitle: Text('User Type'),
trailing: FlutterLogo(size: 100),
),
ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(5),
),
child: Text('Skill 0'),
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(5),
),
child: Text('Skill 1'),
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(5),
),
child: Text('Skill 2'),
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(5),
),
child: Text('Skill 3'),
),
],
)
],
),
)
Your Screen Look like this ->