How to change height of a card in flutter

Question

Card(
  semanticContainer: true,
  clipBehavior: Clip.antiAliasWithSaveLayer,
  child: Image.network( 'https://placeimg.com/640/480/any',fit: BoxFit.fill),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  elevation: 5,
  margin: EdgeInsets.all(10),
)

You can wrap it with a Container: Container(height: 100, child: Card( semanticContainer: true, clipBehavior: Clip.antiAliasWithSaveLayer, child: Image.network( 'https://placeimg.com/640/480/any',fit: BoxFit.fill,), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), elevation: 5, margin: EdgeInsets.all(10), )) — Stel, Sep 26 '19 at 11:01

J. S. · Accepted Answer · 2020-02-24T15:56:25.710

79

To modify the width or height of a card you can wrap it in a Container Widget and provide height and/or width properties to it.

Please see below your code wrapped with a container set with height at 500:

Container(
  height: 500,
  child: Card(
    semanticContainer: true,
    clipBehavior: Clip.antiAliasWithSaveLayer,
    child: Image.network(
      'https://placeimg.com/640/480/any', fit: BoxFit.fill,),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    elevation: 5,
    margin: EdgeInsets.all(10),
  ),
),

edited Feb 24 '20 at 15:56

answered Sep 26 '19 at 11:30

J. S.

8,905
2
34
44

10

If the Container is nested in another widget, the width & height may not get applied as expected. You can [overcome this by wrapping that Container in an Align widget](https://stackoverflow.com/a/54717843/3291390). – Stack Underflow Jun 02 '20 at 19:48

score 15 · Answer 2 · edited Jul 11 '20 at 20:41

Time is moving, prefer you that: https://api.flutter.dev/flutter/widgets/SizedBox-class.html

SizedBox(
  height: double.infinity,
  child: Card(
    semanticContainer: true,
    clipBehavior: Clip.antiAliasWithSaveLayer,
    child: Image.network(
      'https://placeimg.com/640/480/any', 
      fit: BoxFit.fill,
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    elevation: 5,
    margin: EdgeInsets.all(10),
  ),
),

How to change height of a card in flutter

2 Answers2