GithubHelp home page GithubHelp logo

How could I extend BoxyChild? about boxy HOT 8 CLOSED

pingbird avatar pingbird commented on June 27, 2024
How could I extend BoxyChild?

from boxy.

Comments (8)

MikeFP avatar MikeFP commented on June 27, 2024 1

Here's an example.

I have a column containing children with some padding between them. The children themselves are containers with dynamic height that may have some "ornaments" floating around them, which initially could be Positioned children of a Stack. The ornaments are also dynamic, and thus, only know their size after layout.

Basic structure:
issue-layout

Example with ornaments around children:
issue-layout-problem

The problem is that sometimes those ornaments overlap, which is not desired. I'd like to increase the padding accordingly only if there are overlaps. And for that, I need to know the rects of those ornaments, or worst case scenario, the rect of the column children including the ornaments, so I can compute the minimum amount of padding necessary so they don't overlap.

Desired result after pushing overlaps:
issue-layout-after

The real problem though is not laying out the children. A Stack can do it just fine. What I need is access to the child rect during layout phase including the space of floating children.

from boxy.

pingbird avatar pingbird commented on June 27, 2024

The framework makes very strong assumptions about how data is passed between RenderObjects during layout, specifically, only constraints can go down and only geometry can go up, any communication outside of that would break layout optimizations.

Adding more properties to the geometry (Size / SliverGeometry) would require writing a RenderObject subclass and handling its new protocol in the parent.

Luckily if the information is known during build, you can just use parent data: https://gist.github.com/PixelToast/2d51cc484d9a7a6a15c1bd405712a3d4

image

from boxy.

MikeFP avatar MikeFP commented on June 27, 2024

@PixelToast I see. In that case, I think I'll have to dive in custom RenderObjects.

While I'm at it, may I ask if using a lot of GlobalKeys to access deep nested children impacts on performance or is just not a good practice in general?

from boxy.

pingbird avatar pingbird commented on June 27, 2024

The only significant cost to GlobalKey is when its used to reparent the child widget, accessing it alone is usually fine.

You shouldn't use it to access descendants during layout though, that would break a lot of the assumptions the framework makes (there are a bunch of assertions that should prevent you from doing that too).

from boxy.

pingbird avatar pingbird commented on June 27, 2024

Also the gist I posted above implements what I thought you wanted to do, and it doesn't require subclassing RenderObject.

from boxy.

MikeFP avatar MikeFP commented on June 27, 2024

In my use case, I don't know the size of the children during build time.

Actually, what I'm looking for is more accurately described as a Stack with non-positioned children whose size are not know until layout.

from boxy.

pingbird avatar pingbird commented on June 27, 2024

The gist doesn't rely on the size of the child being known at build time, only OverflowingChild.padding

Do you have a diagram or example of the layout you are trying to achieve?

from boxy.

pingbird avatar pingbird commented on June 27, 2024

Moving to #24

from boxy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.