Bdtjtk

I created a CustomMultiChildLayout in order to customize the positions of its children. Then tried to put CustomMultiChildLayout into a Container, with BoxConstraints(maxHeight: 500), then the CustomMultiChildLayout has always the maxHeight 500 as height. It cannot adjust its height according to its children.

So how can I have dynamic height for my CustomMultiChildLayout? If this is not possible, are there any other ways to implement this layout?

Background:

I defined 3 widgets, each of them is a Container, and I need to customize their positions.

SellerWidget should be positioned in the middle of two other widgets.

Please refer to this image:

Here's my code:

class ProductComboWidget extends StatelessWidget {



    final Product _product;



    ProductComboWidget(this._product);



    @override

    Widget build(BuildContext context) {

        return Container(

            constraints: BoxConstraints(maxHeight: 500),

            child: CustomMultiChildLayout(

                delegate: _TitleInfoLayout(),

                children: <Widget>[

                    LayoutId(

                        id: _TitleInfoLayout.title,

                        child: ProductTitleWidget(_product)

                    ),

                    LayoutId(

                        id: _TitleInfoLayout.info,

                        child: ProductInfoWidget(_product)

                    ),

                    LayoutId(

                        id: _TitleInfoLayout.seller,

                        child: SellerWidget(_product.seller)

                    ),

                ],

            ),

        );

    }



}



class _TitleInfoLayout extends MultiChildLayoutDelegate {



    static const String title = 'title';

    static const String info = 'info';

    static const String seller = 'seller';



    @override

    void performLayout(Size size) {

        final Size titleSize = layoutChild(title, BoxConstraints(maxWidth: size.width));

        positionChild(title, Offset(0, 0));



        layoutChild(info, BoxConstraints(maxWidth: size.width));

        positionChild(info, Offset(0, titleSize.height));



        final Size sellerSize = layoutChild(seller, BoxConstraints());

        positionChild(seller, Offset(size.width - sellerSize.width - 20, titleSize.height - sellerSize.height / 2));

    }



    @override

    bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {

        return true;

    }



}

Actual result:

The height of CustomMultiChildLayout always equals to BoxConstraint.maxHeight, it cannot adjust its height according to its children.

Please refer to this image:

There is a useless empty space on the bottom of this widget.

Expected result:

Have its height adapted to its children, like other widgets.

Inspired by the implementation of Column and Stack, I created a custom layout to do this job. https://gist.github.com/jxw1102/a9b58a78a80c8e2f54233b418429fa50

You can use SingleChildScrollView as parent to get the dynamic height of parent as per the number of child widgets.