flutter design list item

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 ->