flutter - Is it possible to force the alignment of a specific child widget in a Wrap widget?

Question

I'm trying to create a layout in flutter consisting of a row with two child widgets, the first aligned to the left and the second aligned to the right, that also will wrap the widgets if the container is too narrow.

This is similar to the question asked here Flutter align two items on extremes - one on the left and one on the right, which can be solved with a Wrap widget with alignment: WrapAlignment.spaceBetween. However when the widgets wrap using this method, the right widget wrapped to a new run is no longer right aligned. (screenshots)

What I would like to happen is for the right widget to stay aligned to the right when it wraps. In css with flexbox this can be achieved with flex-grow:1 or margin-left:auto on the right widget as demonstrated in this codepen (resize the page width to see the layout I want to happen).

So far in flutter I've tried:

• Wrapping the right widget in a Flexible widget to try and make it take up the remaining width when it's wrapped, so I can right align within it, but this throws the error:

   Incorrect use of ParentDataWidget.
   Flexible widgets must be placed inside Flex widgets.

• Wrapping the right widget inside an Align widget, but this always expands to the full width and causes wrapping even when the screen is wide enough for both widgets to be on the same row
• Using CustomMultiChildLayout with a MultiChildLayoutDelegate, which can create the correct layout, (screenshot) however it doesn't seem possible to set the height of the widget based on the child widget heights, forcing you to use an arbitrary height value. The docs for MultiChildLayoutDelegate say

Override getSize to control the overall size of the layout. The size of the layout cannot depend on layout properties of the children.

So is it possible to create a layout where the right widget remains aligned to the right edge when it has to wrap?

Answer 1

Thanks to Rémi Rousselet's advice to use a custom RenderBox here is a basic implementation that solves the layout problem (based off the Wrap widgets RenderBox implementation 1 2)

import 'package:flutter/widgets.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

class LeftRightAlign extends MultiChildRenderObjectWidget {
  LeftRightAlign({
    Key key,
    @required Widget left,
    @required Widget right,
  }) : super(key: key, children: [left, right]);

  @override
  RenderLeftRightAlign createRenderObject(BuildContext context) {
    return RenderLeftRightAlign();
  }
}

class LeftRightAlignParentData extends ContainerBoxParentData<RenderBox> {}

class RenderLeftRightAlign extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, LeftRightAlignParentData>,
        RenderBoxContainerDefaultsMixin<RenderBox, LeftRightAlignParentData> {

  RenderLeftRightAlign({
    List<RenderBox> children,
  }) {
    addAll(children);
  }

  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! LeftRightAlignParentData)
      child.parentData = LeftRightAlignParentData();
  }

  @override
  void performLayout() {
    final BoxConstraints childConstraints = constraints.loosen();

    final RenderBox leftChild = firstChild;
    final RenderBox rightChild = lastChild;

    leftChild.layout(childConstraints, parentUsesSize: true);
    rightChild.layout(childConstraints, parentUsesSize: true);

    final LeftRightAlignParentData leftParentData = leftChild.parentData;

    final LeftRightAlignParentData rightParentData = rightChild.parentData;

    final bool wrapped =
        leftChild.size.width + rightChild.size.width > constraints.maxWidth;

    leftParentData.offset = Offset.zero;
    rightParentData.offset = Offset(
        constraints.maxWidth - rightChild.size.width,
        wrapped ? leftChild.size.height : 0);

    size = Size(
        constraints.maxWidth,
        wrapped
            ? leftChild.size.height + rightChild.size.height
            : math.max(leftChild.size.height, rightChild.size.height));
  }

  @override
  bool hitTestChildren(HitTestResult result, {Offset position}) {
    return defaultHitTestChildren(result, position: position);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    defaultPaint(context, offset);
  }
}

...

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text('App')),
      child: ListView(children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
          child: LeftRightAlign(
            left: Text(
              'Left Widget',
              style: TextStyle(fontSize: 40),
            ),
            right: Text(
              'Right Widget',
              style: TextStyle(fontSize: 40),
            ),
          ),
        ),
        Text('Next Line'),
      ])
    );
  }
}