CustomSingleChildLayout Widget – Flutter Widget Guide By Flutter Agency

What is CustomSingleChildLayout Widget?

CustomSingleChildLayout Widget is a widget that defers the layout of it’s the single child to a delegate.

CustomMultiChildLayout Widget is appropriate when there are complex relationships between the size and positioning of multiple widgets. To control the layout of a single child, CustomSingleChildLayout Widget is more appropriate.

This also means that using CustomSingleChildLayout Widget follows the same principles of CustomMultiChildLayout, but without any ids, because there is only a single child.

CustomSingleChildLayout({
  Key key,
  @required SingleChildLayoutDelegate delegate,
  Widget child,
});

In the above code snippet, fields marked with @required must not be empty.

Properties :

delegate: The delegate that controls the layout of the child.
child: The widget below this widget in the tree. This widget can have only one child. To layout multiple children user needs to make use of the Column Widget, Row Widget, or Stack widget which has a children’s property, and then provide the children to that widget.

Users need to use a SingleChildLayoutDelegate, which has different methods for implementing the layout. They are as listed below :

getConstraintsForChild: getConstraintsForChild which you need to call for every id, every child, provided exactly once and it will give you the Size of that child.
positionChild: This allows you to change the position from Offset(0, 0) to any offset you specify.

Everything else is exactly the same remember that you do not need LayoutId and only have a single child instead of children.

How to use CustomSingleChildLayout Widget in Flutter?

The following code snippet tells us how to implement CustomSingleChildLayout Widget in Flutter.

import 'package:flutter/material.dart';

class CustomSingleChildLayoutWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        height: 60.0,
        width: 60.0,
        color: Colors.red,
        child: CustomSingleChildLayout(
          delegate: _MySingleChildLayoutDelegate(
            //send the size of the viewport to the delegate for computation
            widgetSize: size,
          ),
        ),
      ),
    );
  }
}

class _MySingleChildLayoutDelegate extends SingleChildLayoutDelegate {
  _MySingleChildLayoutDelegate({
    @required this.widgetSize,
  });

  final Size widgetSize;

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    //we expand the layout to our predefined sizes
    return BoxConstraints.expand(
      width: 120.0,
      height: 120,
    );
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    //we place the widget at the cnter, by dividing the width and height by 2 to get the center
    return Offset(widgetSize.width / 2, widgetSize.height / 2);
  }

  @override
  bool shouldRelayout(_MySingleChildLayoutDelegate oldDelegate) {
    return widgetSize != oldDelegate.widgetSize;
  }
}

In the above code snippet, we have created a class called _MySingleChildLayoutDelegate which extends SingleChildLayoutDelegate. It has three override methods getConstraintsForChild and getPositionForChild and shouldRelayout.

getConstraintsForChild is used to expand the layout to our predefined sizes. Code Snippet will look like below :

@override
 BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
   //we expand the layout to our predefined sizes
   return BoxConstraints.expand(
     width: 120.0,
     height: 120,
   );
 }

getPositionForChild is used to place the widget at the center, by dividing the width and height by 2 to get the center. The code snippet will look like below :

@override
Offset getPositionForChild(Size size, Size childSize) {
  //we place the widget at the cnter, by dividing the width and height by 2 to get the center
  return Offset(widgetSize.width / 2, widgetSize.height / 2);
}

Code Snippet for shouldRelayout it will look like below.

@override
bool shouldRelayout(_MySingleChildLayoutDelegate oldDelegate) {
  return widgetSize != oldDelegate.widgetSize;
}

Conclusion:

In this article, we have been through What is CustomSingleChildLayout Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!

Do let us know if you need further assistance?

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.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.