How to build a proper card in flutter? - flutter

Question

I am developing a flutter application where I want to use a card but I am not getting the desired result.
I want the this with an image to left side also:
But what I am getting is:
Following is my code:
class CommunityCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Card(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Wrap(
direction: Axis.horizontal,
children: [
SizedBox(
width: 5,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Icon(
Icons.sports_cricket,
size: 15,
color: Colors.blue,
),
),
Text(
'Sports',
style: TextStyle(fontSize: 15),
),
Icon(
Icons.cancel_outlined,
size: 15,
)
],
),
),
);
}
}
Can someone help me how to do this please?

Answer 1

class CommunityCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Card(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Padding(
EdgeInsets.symmetric(horizontal:10.0,vertical:8.0), //Keep experimenting with values till you get the correct one
child: Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.center,//The change
children: [
SizedBox(
width: 5,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Icon(
Icons.sports_cricket,
size: 12,
color: Colors.blue,
),
),
Text(
'Sports',
style: TextStyle(fontSize: 15),
),
Icon(
Icons.cancel_outlined,
size: 15,
)
],
),
),
),
);
}
}
I have added crossAxisAlignment: WrapCrossAlignment.center, which makes it align to the center on the other axis
Also I have added some padding for aesthetics

Answer 2

write crossAxisAlignment: WrapCrossAlignment.center, in wrap widget property

Answer 3

Use ListTile in ClipRRect for the curve and proper alignment.
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child:Container(
color:Colors.green,
child:ListTile(
leading:Icon(Icons.sports_cricket,),
title:Text('Sports'),
trailing:Icon(Icons.close)
),
)
),

Answer 4

You just need a chip Here's an example:-
Chip(
onDeleted: () => (redirection call here),
deleteIcon: Icon(
Icons.sports_cricket,
size: rowIconSize,
color: companyThemeData.primaryColor,
),
labelStyle:
normal12blackish.copyWith(color: companyThemeData.primaryColor),
backgroundColor: companyThemeData.primaryColorLight,
label: Text('Sports'),
);