Flutter Fix BOTTOM OVERFLOWED BY PIXLES Error

Recently when I was coding in flutter and put three Container child inside Column widget with max height then device height. I have seen a error "BOTTOM OVERFLOWED BY PIXLES" at footer side of screen. After reading this error I have read few flutter documentation and understand that this error comes because I am defining 3 Container each with 300 of height Total of 900 in height. Which is grater than my device height. This is why it is throwing overflowed error.

Error Screenshot:

How to solve Flutter Bottom overflowed by pixels Error

1. It is quite easy to solve this error all we have to do is put our main Column widget inside SingleChildScrollView. SingleChildScrollView will enable vertical scrolling in Child and overflowed error will be gone from your screen.

SingleChildScrollView(
                        child: Column(
      children: [
        Container(
          width: 300,
          height: 200,
          color: Colors.green,
        ),
        Container(
          width: 300,
          height: 200,
          color: Colors.red,
        ),
        Container(
          width: 300,
          height: 200,
          color: Colors.purple,
        )
      ],
    ))

Source code for main.dart file:

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: SingleChildScrollView(
                        child: Column(
      children: [
        Container(
          width: 300,
          height: 200,
          color: Colors.green,
        ),
        Container(
          width: 300,
          height: 200,
          color: Colors.red,
        ),
        Container(
          width: 300,
          height: 200,
          color: Colors.purple,
        )
      ],
    ))))));
  }
}

Screenshot after resolving overflowed error: