Helper for building advanced multi child layouts.

I'm probably not using this correctly, but I couldn't find a good example.

I want my CustomBoxy's intrinsic dimensions to be calculated based on the intrinsic dimensions of its children. In the simplest case, let's say something like:

class MyDelegate extends BoxyDelegate {
  // ...

  @override
  double minIntrinsicHeight(double width) =>
      children.map((e) => e.render.getMinIntrinsicHeight(width)).fold(0, max);
}

What I noticed is that when I do this, the intrinsic size changes as soon as I interact with the app. By adding some logging, it seems that children returns an empty array on the first pass (and getChild(#id) throws The MyDelegate boxy delegate attempted to get a nonexistent child.). But after any interaction, subsequent calls correctly return the list of children. Because of this, I cannot make the intrinsic size depend on children since on first calculation they are not available.

So my questions are:

• Is this supported at all? (e.g. is there a different way I should get children (or their intrinsic sizes) for this calculation?)
• If not, is that just something that's currently missing, or is it fundamentally difficult because of architectural reasons?

I'm trying to write a list-like custom layout where all the list items are ordered in the screen according to their properties. I have created a list of items List<BoxyChild> using the inflate method of BoxyDelegate and now I would like to sort this list and then position the items on the screen accordingly. But the class InflatedChildHandle (which is inherited by BoxyChild) has _widget as a private field. Is there any other way to get the widget contained by the BoxyChild?

In onLayout(), I have some code like this:

final source = getChild(#source);
final sourceSize = source.layout(constraints);
source.position(const Offset(-10000, 0));

I am using sourceSize to determine source's size and apply this size to another widget. This is working for me. But, I want to remove source completely instead of hiding it at (-10000, 0). How can I do this?

I would like to be able to find Global Offset of a child of Widget nested down below in Widget.

So let's say I have following Widget tree:

W0 |--W01 |--W02 |--W03 W1 |--W11 |--W12 |--W13

I would like to layout W0 and W1, find Offset of W02 and W12 and inflate with widget which is positioned between W02 and W12.

What's the best way to do it?

I believe Boxy took me 1 step closer to achieving that but iterating over children to find their Offset seem problematic, approach I've taken is with

RenderBox rb = element.findRenderObject() as RenderBox;
connectorOffset = rb.localToGlobal(Offset.zero);

...but I'm told I should not read Offset this way by framework.

Hello, I'm using a BoxyRow to size the image on left with the height of the content on the right.

Consider the code:

import 'package:boxy/flex.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Boxy Test')),
      body: ListView(children: [
        Card(
          child: BoxyRow(children: [
            SizedBox(
              width: 100,
              child: Image.network(
                'https://repository-images.githubusercontent.com/31792824/fb7e5700-6ccc-11e9-83fe-f602e1e1a9f1',
                fit: BoxFit.cover,
              ),
            ),
            Dominant.expanded(
              child: Column(
                children: [
                  Text(
                    'some very long text that does not fit in one single line',
                    overflow: TextOverflow.ellipsis,
                    // maxLines: 2,
                    style: Theme.of(context).textTheme.headline6,
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    height: 100,
                    color: Colors.grey,
                    child: Text('Some other widgets'),
                  ),
                ],
              ),
            )
          ]),
        ),
      ]),
    );
  }
}

It works as intended:

However, uncommenting maxLines: 2 in the Text Widget, an overflow occurs.

I'm unsure what's going wrong or if that is the intended behavior.

Im a boxy noob, but stumbled here in what looks promising

My problem

I have a listview of variable sized items. Inside these variable sized items are images loaded from a CachedNetworkImage. These images load at whatever rate the network allows, which then expands the height of the listview item.

This becomes a problem when the user is in the middle of a listview and an image somewhere above their position loads and it invariably pushes their scroll position down, now they aren't looking at the content they were looking at before

My solution so far

What I've done is basically use a MeasureSize widget

typedef void OnWidgetSizeChange(Size size);

class MeasureSizeRenderObject extends RenderProxyBox {
  Size? oldSize;
  final OnWidgetSizeChange onChange;

  MeasureSizeRenderObject(this.onChange);

  @override
  void performLayout() {
    super.performLayout();

    Size newSize = child!.size;
    if (oldSize == newSize) return;

    oldSize = newSize;
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      onChange(newSize);
    });
  }
}

class MeasureSize extends SingleChildRenderObjectWidget {
  final OnWidgetSizeChange onChange;

  const MeasureSize({
    Key? key,
    required this.onChange,
    required Widget child,
  }) : super(key: key, child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return MeasureSizeRenderObject(onChange);
  }
}

MeasureSize(
                    onChange: (size){
                      _processItemSizeChange(index: index, size:size);
                    },
               child: (...) /// My list item

Which detects a change in the widget size in then moves the listview _scrollController by the height of the image. _postHeights is a map that stores the last known widget height for each listview item

  void _processItemSizeChange({index, size})
  {
   if (_postHeights[index] == null)
    {
      //first layout so lets put the height of this widget into the map
      _postHeights[index] = size.height;
    }
    else
    {
      //this item has changed its height, so lets deal with that
      debugPrint(index.toString()+' changed height from: '+_postHeights[index].toString() + '  to:'+size.height.toString());
        _scrollController.jumpTo(_scrollController.position.pixels+(size.height - _postHeights[index]!));

        _postHeights[index] = size.height;
      }
  }

The problem with this 'solution'

The problem with this solution as you might guess is there is frame flicker between when the image starts to display (changes the height of the listview item) and when this hacky solution detects the change and does a scrollController.jumpTo

Can boxy help?

So I started using boxy to try to solve this problem

return CustomBoxy(
              delegate: MyDelegate(scrollController: _scrollController),
              children: [
                BoxyId(
                  id:#body,
                  child: (...) ///My list item

class MyDelegate extends BoxyDelegate {
  MyDelegate({required this.scrollController});
  final scrollController;

@override Size layout(){

  final body = getChild(#body);
  body.layout(constraints);
  
  scrollController.jumpTo(10); //Lets try to jump to position 10 just as an initial test if this would even work

  return body.size;

}
}

But I get a million errors trying to manipulate scrollController like that.

Before I go any further, do you think boxy can help with my situation, of trying to get the listview to jump to a new position at the same exact time the image changes the size of the layout without having a screen flicker as this happens?

Im just not even sure this is the intended use of boxy

Thank you!!

Hi, I need some help on using Boxy.

Basically what I want to make is an expandable card widget. In which it's height can dynamically change depending on the length of the title.

What I basically did is make two widgets. ListCardLayer and ExpansionButtonLayer. The ExpansionButtonLayer's size should depend on the ListCardLayer. And for the most part I got it working. One thing to note (this is what causing my problem) is that the height of the expansion button, should be the same as the ListCard when it is not expanded, and is shortened to 51 px when expanded.

The problem that I face is when animating the expansion button. I tried using AnimatedContainer and gave it a height of null when it is not expanded and 51 when it is expanded. But I got this error.

Cannot interpolate between finite constraints and unbounded constraints.

Some advice on this would be greatly appreciated. If you'd want me to give a recording of the error while animating do tell me. (the error only pops up while animating. After the animation is finished, the expansion button is of correct size)

class ListCardBoxyDelegate extends BoxyDelegate {
  final bool isExpanded;

  ListCardBoxyDelegate({
    required this.isExpanded,
  });

  @override
  Size layout() {
    final listCardLayer = getChild(#listCardLayer);
    final expansionButtonLayer = getChild(#expansionButtonLayer);

    final listCardLayerSize = listCardLayer.layout(constraints);
    listCardLayer.position(Offset.zero);

    layoutData = listCardLayerSize;

    expansionButtonLayer.layout(constraints.tighten(
      width: listCardLayerSize.width,
      height: listCardLayerSize.height,
    ));

    return Size(listCardLayerSize.width, listCardLayerSize.height);
  }

  @override
  bool shouldRelayout(ListCardBoxyDelegate old) => true;

  @override
  bool shouldRepaint(ListCardBoxyDelegate old) => true;
}

CustomBoxy(
              delegate: ListCardBoxyDelegate(isExpanded: isExpanded),
              children: [
                BoxyId(
                  id: #listCardLayer,
                  child: listCardLayer,
                ),
                BoxyId(
                  id: #expansionButtonLayer,
                  child: expansionButtonLayer,
                ),
              ],
            ),

class ExpansionButtonLayer extends StatelessWidget {
  final bool isExpanded;
  final VoidCallback onPressed;

  const ExpansionButtonLayer({
    Key? key,
    required this.isExpanded,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topRight,
      child: AnimatedContainer(
        duration: 350.milliseconds,
        width: 51,
        //height: isExpanded ? 51 : null,
        margin: EdgeInsets.only(right: 6, top: 6, bottom: 6),
        child: Material(
          borderRadius: BorderRadius.circular(20.0),
          color: kcSecondaryLighterShadeColor,
          child: Ink(
            child: InkWell(
              borderRadius: BorderRadius.circular(20.0),
              onTap: onPressed,
              splashColor: Theme.of(context).primaryColor.withOpacity(0.20),
              highlightColor: Theme.of(context).primaryColor.withOpacity(0.15),
              child: Align(
                child: Icon(Icons.expand_more),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ListCardLayer extends StatefulWidget {
  final Function()? onPressed;

  const ListCardLayer({
    Key? key,
    required this.isExpanded,
    required this.onPressed,
  }) : super(key: key);

  final bool isExpanded;

  @override
  _ListCardLayerState createState() => _ListCardLayerState();
}

class _ListCardLayerState extends State<ListCardLayer> with AnimationMixin {
  //late AnimationController animController;
  late Animation<double> view;

  @override
  void initState() {
    super.initState();

    final CurvedAnimation curve = CurvedAnimation(
      parent: controller,
      curve: Curves.fastOutSlowIn,
      reverseCurve: Curves.fastOutSlowIn.flipped,
    );

    view = Tween<double>(begin: 0.0, end: 1.0).animate(curve);

    controller.addListener(() {
      setState(() {});
    });

    widget.isExpanded
        ? controller.play(duration: 350.milliseconds)
        : controller.playReverse(duration: 350.milliseconds);
  }

  @override
  void didUpdateWidget(covariant ListCardLayer oldWidget) {
    super.didUpdateWidget(oldWidget);
    widget.isExpanded
        ? controller.play(duration: 350.milliseconds)
        : controller.playReverse(duration: 350.milliseconds);
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Material(
        color: Theme.of(context).canvasColor,
        child: Ink(
          child: InkWell(
            splashColor: Theme.of(context).primaryColor.withOpacity(0.20),
            highlightColor: Theme.of(context).primaryColor.withOpacity(0.15),
            onTap: widget.onPressed,
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Container(
                        padding: const EdgeInsets.only(
                            left: 24, right: 24, top: 18, bottom: 18),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          allListSGSnip[0].sgName,
                          style: appTextTheme(context)
                              .headline2!
                              .copyWith(fontSize: 20),
                        ),
                      ),
                    ),
                    const SizedBox(width: 51)
                  ],
                ),
                ClipRect(
                  child: Align(
                    heightFactor: view.value,
                    child: Opacity(
                      opacity: view.value,
                      child: Container(
                        margin: EdgeInsets.only(left: 24, bottom: 24),
                        child: Text(
                          allListSGSnip[0].sgDesc,
                          style: appTextTheme(context).bodyText1,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Visual look of an unexpanded and expanded card which I'm trying to make.

Does Boxy support Dominant children that are also Expanded? I have a row where one child should expand to fill as much horizontal space as possible, and the other children should match its height.

Hi @PixelToast :wave:

Thanks for this great package. I am stuck at a place and need some help. Actually, I was experimenting with CustomBoxy.

The thing is, the child of my CustomBoxy is a CustomScrollView itself (To be clear, I am trying to show this: https://pub.dev/packages/implicitly_animated_reorderable_list).

First, let me show code:

class MyDelegate extends BoxyDelegate {
  @override
  layout() {
    final list = getChild(#list);

    final listSize = list.layout(constraints.copyWith(
      maxHeight: 250,
    ));

    list.position(Offset.zero);

    return Size(listSize.width, listSize.height);
  }
}

///
/// Somewhere...
///
return CustomBoxy(
  delegate: MyDelegate(),
  children: [
    LayoutId(
      id: #list,
      child: ImplicitlyAnimatedReorderableList<String>(
        // ... ... ...
      ),
    ),
  ],
);

The error I get:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/widgets/framework.dart': Failed assertion: line 2598 pos 12: '!_debugBuilding':
is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was:
  ImplicitlyAnimatedReorderableList<String>

What I wanted to do?

I wanted to achieve a similar effect of ProductTile example that you have provided where this list would be shown at top with a FAB at bottom.

I am pretty new to this. If this can't be done using CustomBoxy, what I should I try to do??

Thanks...

I want circleavatar's radius to be equal to the text column

BoxyRow(
        children: [
          CircleAvatar(
            backgroundColor: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(5.0),
              child: CircleAvatar(
                backgroundImage: imageProvider,
              ),
            ),
          ),
          const SizedBox(width: 8),
          Dominant(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  authorName,
                  style: Theme.of(context)
                      .textTheme
                      .headline2!
                      .copyWith(color: Colors.black),
                ),
                Text(
                  title,
                  style: Theme.of(context)
                      .textTheme
                      .headline3!
                      .copyWith(color: Colors.black),
                )
              ],
            ),
          )
        ],
      ),

In the code above the circle avatar never takes radius of text column and defaults back to 20. but if I give radius some very large value like 100 then circle avatar never exceeded the boundary of the textcolumn.

The first time BoxyDelegate.layout() is processed, trying to access a child's parentData evaluates to null.

After a hot reload or changing the screen state to rebuild it, layout is called again but parentData is now accessible.

Code example:

import 'package:boxy/boxy.dart';
import 'package:flutter/widgets.dart';

class TestBug extends StatelessWidget {
  const TestBug({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomBoxy(
        delegate: MyBoxy(),
        children: [
          BoxyId<String>(
            id: 'child-0',
            data: "I'm a child",
            child: SizedBox(width: 50, height: 50),
          ),
        ],
      ),
    );
  }
}

class MyBoxy extends BoxyDelegate {
  @override
  Size layout() {
    final child = getChild('child-0');
    print(child.parentData);
    print(child.parentData as String?);
    child.layout(constraints);
    child.position(Offset.zero);
    return constraints.biggest;
  }
}

Putting this widget in a Scaffold's body prints null twice, which is unexpected. Hitting Ctrl+S to save the file triggers a hot reload and prints "I'm a child" twice, as expected.

Hi, I am pretty impressed by what you did with boxy!

I am looking to build Angular FlexLayout for Flutter.

Responsive API - https://github.com/angular/flex-layout/wiki/Responsive-API

I am wondering if I can use Boxy for this. I'd appreciate it if you have any advice/ideas on how to accomplish the example shown below, or if you want to collaborate. I would be more than happy to be a part of it.

Psuedo Code

FxLayout (
 layout: FxLayout.row,                               // by default  - displays as column
 md: FxLayout.column,                             // on medium screen - displays as column
 ltMd: FxLayout.column,                          // less than medium screens - displays as column
 mainAxisAlign: FxLayoutAlign.center,
 crossAxisAlign: FxLayoutAlign.center,
 gap: FxSize(size: 10, unit: FxUnit.dp /*default*/)
  children: [
    FxFlex (
       fill: true                                                   // very similar to Dominant
       order: 0,
       align: FxFlexAlign.start,
       child: Text('1st Child'),
     ),
    FxFlex (
       order: 1,                                                  // You can switch the order of the flex.
       align: FxFlexAlign.center,
       size: FxSize(size: 90, unit: FxUnit.percentage ),
       child: Text('2nd Child'),
     )
  ]
)

Cheers!

Hello, I was just wondering if is was possible to avoid a layout for some child ? I have one child that need to be resized based on a animation value and currently everything is in the layout method.

Here is a small video to illustrate a bit : https://user-images.githubusercontent.com/42180076/187019036-5fd2e168-72c0-4c8e-a875-1d65d26d23e1.mp4

Thank you !

I'm trying to expose an extra property on BoxyChild so the parent delegate can use it in its layout. I tried to understand the overall structure of the Boxy classes but couldn't wrap my head around it. So my question is:

Is it possible to extend BoxyChild and instance it as a child of a CustomBoxy? How could I accomplish that?

My final goal is to build a Widget kinda like OverflowPadding, except that it exposes the child's fullRect (including the overflow) as well. If that should only be possible with a custom RenderObject, please let me know.