CODEWITHSUNDEEP
flutterdart
Ankit
Ankit

Reputation: 679

How to build a proper card in flutter?

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:

enter image description here

But what I am getting is:

enter image description here

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?

Upvotes: 0

Views: 95

Answers (4)

Piyush Kumar
Piyush Kumar

Reputation: 482

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'),
      );

Upvotes: 0

Siddharth Agrawal
Siddharth Agrawal

Reputation: 3156


    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

Upvotes: 1

Deepak Lohmod
Deepak Lohmod

Reputation: 2282

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

Upvotes: 0

Hamza Siddiqui
Hamza Siddiqui

Reputation: 716

write crossAxisAlignment: WrapCrossAlignment.center, in wrap widget property

Upvotes: 1

Related Questions