-1.1 C
New York
Wednesday, February 21, 2024

Flutter: SizedOverflowBox example

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

The Example

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:

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


Related Articles

Latest Articles