OverflowBox Widget – Flutter Widget Guide By Flutter Agency

OverflowBox Widget – Flutter Widget Guide By Flutter Agency

Earlier we have gone through SizedOverflowBox Widget which is a widget that is a specific size but passes its original constraints through to its child, which may then overflow. Now in this article, we will go through OverflowBox Widget.

What is OverflowBox Widget?

When imposing constraints on widgets, constraints from parent widget is respected. Respecting parent constraints makes the widget’s layout flexible to adapt use cases sometimes you need a widget to only respect explicitly provided constraints and ignore parent constraints in that users can make use of OverflowBox Widget.

As per the official document, OverflowBox Widget can be defined as below.

” A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent ”

The constructor of OverflowBox Widget will look like below :

OverflowBox({
    Key key,
    AlignmentGeometry alignment: Alignment.center,
    double minWidth,
    double maxWidth,
    double minHeight,
    double maxHeight,
    Widget child,
  });

Properties

• alignment: alignment will define how to align the child.
• minWidth: The minimum width constraint to give the child.Set minWidth to null to use the constraint from the parent instead.
• maxWidth: The maximum width constraint to give the child.Set maxWidth to null to use the constraint from the parent instead.
• minHeight: The minimum height constraint to give the child.Set minHeight to null to use the constraint from the parent instead.
• maxHeight: The maximum height constraint to give the child.Set maxHeight to null to use the constraint from the parent instead.
• child: Child Property is used to define the widget under the current widget in the tree. This widget can have only one child and to set multiple children users needs to make use of Row Widget, Column Widget, Stack Widget, which has a children’s property and then provides the children to that widget.

Example :

Consider a code snippet like below :

Container(
      width: 200.0,
      height: 200.0,
      color: Colors.orangeAccent,
      child: Align(
        alignment: const Alignment(1.0, 1.0),
        child: SizedBox(
          width: 10.0,
          height: 20.0,
          child: OverflowBox(
            minWidth: 0.0,
            maxWidth: 100.0,
            minHeight: 0.0,
            maxHeight: 50.0,
            child: Container(
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );

We will get output like below :

OverflowBox Widget

The complete source code will look like below :

import 'package:flutter/material.dart';

class OverFlowBoxWidget extends StatelessWidget {
  OverFlowBoxWidget({
    Key key,
    AlignmentGeometry alignment: Alignment.center,
    double minWidth,
    double maxWidth,
    double minHeight,
    double maxHeight,
    Widget child,
  });
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.orangeAccent,
        child: Align(
          alignment: const Alignment(1.0, 1.0),
          child: SizedBox(
            width: 10.0,
            height: 20.0,
            child: OverflowBox(
              minWidth: 0.0,
              maxWidth: 100.0,
              minHeight: 0.0,
              maxHeight: 50.0,
              child: Container(
                color: Colors.blue,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Thanks for reading !!!
Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.