CODEWITHSUNDEEP
flutterdart
S. M. Asif
S. M. Asif

Reputation: 3709

How to make card width fixed in Flutter?

In my Flutter project, I want to show each item of a list of data in cards. For that, I have set up all all components(e.g- Image, Text) inside a Card.

It looks like the below image-

enter image description here

Now, the problem is-----

I want to fix the Card width into a fixed size or wrap content. As Card widget has no property of height and width, then what should I do to fix the width of this card.

Here's my code-

  Card showCard(int position, int index, AsyncSnapshot<List<ModelFrontList>> snapshot) {
    return new Card(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(

          height: 250,

          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Image.network(
                snapshot.data[position].products[index].image,
                height: 150,
                width: 50,
              ),

              SizedBox(
                width: 20.0,
              ),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text( snapshot.data[position].products[index].nameEnglish),

                    SizedBox(
                      height: 10.0,
                    ),
                    Text( snapshot.data[position].products[index].nameEnglish),


                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }

This showCard function is called within a Container. So, I need a solution to fix the width of this card.

Upvotes: 5

Views: 17745

Answers (1)

Ike Mawira
Ike Mawira

Reputation: 771

The solution is to wrap the card in a sized box. For example,

Card showCard(int position, int index, AsyncSnapshot<List<ModelFrontList>> snapshot) {
SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(

          height: 250,

          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Image.network(
                snapshot.data[position].products[index].image,
                height: 150,
                width: 50,
              ),

              SizedBox(
                width: 20.0,
              ),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text( snapshot.data[position].products[index].nameEnglish),

                    SizedBox(
                      height: 10.0,
                    ),
                    Text( snapshot.data[position].products[index].nameEnglish),


                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }
)

Upvotes: 10

Related Questions