A RenderFlex overflowed by 224 pixels on the bottom

Question

How to fix the following error?

A RenderFlex overflowed by 224 pixels on the bottom.

on the Column widget

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Read message'),
      ),
      body: Column( //the error is here
        children: [
          Padding(
            padding: const EdgeInsets.all(20.0).copyWith(bottom: 10),
            child: Row( ...

Answer 1

Depending on the device screen, these widgets can overflow, there are few solutions to handle it.

1. Use Column wrapped in SingleChildScrollView

SingleChildScrollView( child: Column(children: children), )

2. Use ListView

ListView( children: children )

3. Use combination of both Column and ListView(you should use Expanded/Flexible, or give a fixed height to the ListView when doing so).

Column( children: [ ...children.take(2).toList(), // show first 2 children in Column Expanded( child: ListView( children: children.getRange(3, children.length).toList(), ), // And rest of them in ListView ), ], )

Answer 2

Wrap your Column with a SingleChildScrollView