RenderBox

Lay out a box with RenderBox.

RenderBox

RenderBox is a render object that uses a fixed-size box model; it derives from RenderObject. constraints carries the size bounds from the parent, and size holds its own size after layout. Boxes are always used for square/rectangular areas.

class MyBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.biggest;
  }
}

BoxConstraints

BoxConstraints are the min/max width and height bounds coming from the parent. constraints.biggest returns the largest allowed size, constraints.smallest the smallest. size is assigned as a Size within these bounds.

Exercise Define a RenderBox

Define MyBox as a RenderBox. In performLayout, set size = constraints.smallest. In main, create a MyBox instance and print its runtimeType.

Show example solution

import 'package:flutter/rendering.dart';

class MyBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.smallest;
  }
}

void main() {
  final box = MyBox();
  print(box.runtimeType);
}

Test yourself

When is size determined in RenderBox?
- Never
- At compile time
- During paint
- After performLayout is called
Show answer

After performLayout is called — size is assigned inside the performLayout method; it is computed using the constraints from the parent and becomes valid once layout finishes.

Use constraints.smallest

final minSize = constraints.____;

Show answer

final minSize = constraints.smallest;

RenderBox matches

RenderBox

Box render object
constraints

Parent bounds
size

Size after layout
BoxConstraints

Min/max bounds

Next lesson: performLayout

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies