Custom Render Objects in Flutter

5 min readJul 2, 2024

Flutter is renowned for its flexible and powerful UI components, allowing developers to create visually stunning and highly performant applications. One of the advanced features in Flutter that provides granular control over the layout and rendering of widgets is the custom Render Object.
This article delves into the core concepts of Render Objects in Flutter, focusing on creating custom render objects.

Source: https://stackoverflow.com/q/64073264

A Render Object is a low-level class in Flutter that handles the layout, painting, hit testing, and accessibility (semantics) of widgets. Render objects are integral to Flutter’s rendering pipeline, which includes the following components:

Widgets: The high-level building blocks that describe the configuration of the UI.
Elements: Instances of widgets that maintain the connection between the widget and the render object.
Render Objects: The objects that actually perform the layout and paint the UI on the screen.

Render objects are responsible for:

Layout: Determining the size and position of their children.
Painting: Drawing themselves and their children onto the screen.
Hit Testing: Identifying which render object is under a specific point on the screen.
Semantics: Providing information necessary for accessibility features.

Creating a custom render object is essential when you need:

Fine-grained Control: Over the layout and painting process.
Customization: When existing widgets and render objects do not meet your specific requirements.
Performance Optimization: By minimizing the overhead of higher-level widgets and focusing on rendering efficiency.

Creating a custom render object involves three main steps:

Define a Render Object Class:

Extend from RenderBox or another suitable base class.
Implement methods necessary for layout and painting.

2. Create a Render Object Widget:

Extend from SingleChildRenderObjectWidget or RenderObjectWidget.
Implement methods to create and update the render object.

3. Use the Render Object Widget:

Let’s create a custom render object that draws a circle with a specified radius and color.

Step 1: Define the Render Object Class

In this example:

class RenderCircle extends RenderBox {
  double _radius;
  Color _color;

  RenderCircle({double radius = 50.0, Color color = Colors.blue})
      : _radius = radius,
        _color = color;

  double get radius => _radius;
  set radius(double value) {
    if (_radius != value) {
      _radius = value;
      markNeedsLayout();
    }
  }

  Color get color => _color;
  set color(Color value) {
    if (_color != value) {
      _color = value;
      markNeedsPaint();
    }
  }

  @override
  void performLayout() {
    size = Size(_radius * 2, _radius * 2);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final Paint paint = Paint()..color = _color;
    context.canvas.drawCircle(offset + Offset(_radius, _radius), _radius, paint);
  }
}

Properties:
_radius and _color hold the radius and color of the circle, respectively.
Methods:
performLayout() sets the size of the render object based on the radius.
paint() uses a PaintingContext to draw the circle on the canvas.

Setters:

radius and color properties mark the render object as needing layout or paint when they change.

Step 2: Create a Render Object Widget

class Circle extends SingleChildRenderObjectWidget {
  final double radius;
  final Color color;

  Circle({Key? key, this.radius = 50.0, this.color = Colors.blue, Widget? child})
      : super(key: key, child: child);

  @override
  RenderCircle createRenderObject(BuildContext context) {
    return RenderCircle(radius: radius, color: color);
  }

  @override
  void updateRenderObject(BuildContext context, RenderCircle renderObject) {
    renderObject
      ..radius = radius
      ..color = color;
  }
}

In this example:

createRenderObject() creates an instance of RenderCircle.
updateRenderObject() updates the properties of the render object when the widget changes.

Step 3: Use the Render Object Widget

class CustomRenderObjectExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Render Object Example'),
      ),
      body: Center(
        child: Circle(
          radius: 100.0,
          color: Colors.red,
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: CustomRenderObjectExample()));

This example integrates the custom Circle widget into a Flutter application.

RenderCircle Class
The RenderCircle class is responsible for the actual rendering of the circle. It extends RenderBox, which provides a base class for render objects that can be sized based on the parent constraints.

Layout:

The performLayout() method sets the size of the render object to be twice the radius, ensuring that the entire circle is contained within the render object.

Painting:

The paint() method draws the circle on the canvas using the provided color and radius. The circle is drawn at the offset position, adjusted by adding the radius to ensure it is centered.

Setters:

The setters for radius and color update the properties and call markNeedsLayout() and markNeedsPaint(), respectively, to indicate that the render object needs to be re-laid out or repainted.

Circle Class

The Circle class is a widget that wraps the RenderCircle render object. It extends SingleChildRenderObjectWidget, allowing it to manage a single child widget.

createRenderObject():

This method creates an instance of RenderCircle with the specified radius and color.

updateRenderObject():

This method updates the properties of the render object when the widget’s properties change.

Hit Testing

Hit testing determines which render object is under a specific point, which is essential for handling user interactions.

@override
bool hitTestSelf(Offset position) {
  return (position - Offset(_radius, _radius)).distance <= _radius;
}

This example ensures that hit testing only returns true if the tap is within the circle’s radius.

Semantics

Semantics provide accessibility information, helping users with disabilities interact with the application.

@override
void describeSemanticsConfiguration(SemanticsConfiguration config) {
  super.describeSemanticsConfiguration(config);
  config
    ..label = 'Circle'
    ..value = 'Radius: $_radius, Color: $_color';
}

This method provides a description of the render object, including its radius and color.

Performance

Performance is crucial when creating custom render objects. Avoid unnecessary calls to markNeedsLayout() and markNeedsPaint(), as these can lead to excessive layout and paint cycles, impacting performance.

Custom render objects in Flutter offer unparalleled control over the rendering process, enabling the creation of highly optimized and tailored UI components. By understanding and leveraging the core concepts of render objects, developers can push the boundaries of what is possible in Flutter, creating unique and performant applications. Whether you need fine-grained control, customization, or performance optimization, custom render objects are a powerful tool in the Flutter toolkit.

You can run the code from here.

You can reach me on: