In Flutter, how can you dynamically assign height to child elements in Card?

Question

I am new to Flutter and I'm trying to create a layout that is responsive to different screen sizes. I've spent a lot of time reading the Flutter documentation, but I haven't been able to figure this out.

The following code works great for a larger phone screen size, but the Cards display an "Another exception was thrown: A RenderFlex overflowed by 13 pixels on the bottom." for smaller screen size. I am fixing the height.

How can I modify the height so that it takes into account the Card size when determining this value?

 return InkWell(
  borderRadius: BorderRadius.circular(15),
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(top: 10),
        ),
        Stack(
          children: <Widget>[
            ClipRRect(
              child: Image(
                image: myimage,
                height: 60,
                fit: BoxFit.fitHeight,
              ),
            ),
          ],
        ),
        Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            children: <Widget>[
              Row(
                children: <Widget>[
                  SizedBox(
                    width: 5,
                  ),
                  Text(mytext),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

}

You can use `LayoutBuilder` as the parent of your widget tree and then use a `SizedBox` for example and then use `Expanded` in `Column` — CopsOnRoad, Aug 15 '21 at 15:17
expanded certainly is the way to fix the issue. you can look here for details. https://fluttercorner.com/flutter-how-to-fix-a-renderflex-overflowed-by-pixels-error/ — Toufiq Ahmed, Aug 15 '21 at 15:24

score 0 · Answer 1 · answered Sep 13 '21 at 14:38

If you are creating responsive layout in flutter then you first read about how to user media query in flutter.

Here is example How to use Media query in flutter

Example:-

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    double h=MediaQuery.of(context).size.height;
    double w=MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        height:h*0.2,
        width: w*0.2,
        color:Colors.red,
      ),
    );
  }
}

if you are use media query next and avoid unusual height width of widget (instead of height and width you can use padding symmetric) now I am sure : A RenderFlex overflowed has gone.

For more information you check it out:-

Flutter Documentation about Media Query Class

I think this is useful for you.

In Flutter, how can you dynamically assign height to child elements in Card?

1 Answers1