Flutter: SizedOverflowBox example

Updated: October 6, 2022 By: Pennywise Post a comment

The SizedOverflowBox widget in Flutter, as its name describes itself, is used to create a box with certain width and height but lets its child overflow. You can implement a SizedOverFlow box as follows:

  Key? key, 
  required Size size, // Size(double width, double height)
  AlignmentGeometry alignment = Alignment.center, 
  Widget? child


  • size: The size this widget should attempt to be
  • alignment: Align the child widget
  • child: The child widget


This example displays 2 widgets. The parent widget is purple in color and the child widget is amber. Here’s the screenshot:

The code:

        child: Container(
          color: Colors.purple,
          child: SizedOverflowBox(
            size: const Size(300, 200),
            alignment: Alignment.bottomCenter,
            child: Container(
              width: 150,
              height: 400,
              color: Colors.amber,
              child: const Center(
                child: Text(
                  style: TextStyle(fontSize: 30),

Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles