GithubHelp home page GithubHelp logo

Ignore layout for somes childs ? about boxy HOT 2 CLOSED

pingbird avatar pingbird commented on June 27, 2024
Ignore layout for somes childs ?

from boxy.

Comments (2)

pingbird avatar pingbird commented on June 27, 2024

You can't avoid calling layout on children, however, the framework does implement optimizations that short-circuit it for you.

If the constraints passed to a child are the same as in the previous layout (and markNeedsLayout wasn't called) then the framework skips calling performLayout: see if (!_needsLayout && constraints == _constraints) { in https://api.flutter.dev/flutter/rendering/RenderObject/layout.html

from boxy.

RomanJos avatar RomanJos commented on June 27, 2024

That is great to hear ! I definitely see an improvement (250 to 80 micro-seconds !) by having the same constraints object for all the children.

However, it appears that, all the widgets still repaints, I already have a RepaintBoundary on the moving wave but they are still painting on window resize or on the animation no matter if the constraints are the same, and only by giving the "has to resize" widget the same constraint the performance move to 80.

image

Only by giving the same constraints to the third widget the time drop, green and blue are when only the third and everyone have the same constraints between layouts, red and yellow are when only the two or nobody have the same constraints between layouts.

I'm a bit lost here :

  • BoxConstraints == operator check if the value reference to the same objects before looking at maxHeight etc. I'm using constraints.copyWith() so the yellow line would differ from the red, even slightly ? (It look like it does a bit lol)
  • Why the blue and green don't too ?
  • I placed a CustomPainter in the "has to not" and it paint every times, even with the same constraints object.
  • The "has to resize" widget is so simple yet add (250-80) micro-seconds to the layout method.
// The entire top widget
class Salut extends StatefulWidget {
  const Salut({Key? key}) : super(key: key);

  @override
  State<Salut> createState() => _SalutState();
}

class _SalutState extends State<Salut> {
  bool open = false;

  @override
  Widget build(BuildContext context) {
// Never printed outside the first frame
    print('rebuild top');
    return GestureDetector(
        onTap: () {
          BottomWaveViewState waveViewState = BottomWaveView.of(context);
          open = !open;
          waveViewState.toogleWave(open);
        },
        child: const SizedBox(
          height: double.infinity,
          width: double.infinity,
          child: Placeholder(child: Center(child: Text('Has to resize'))),
        ));
  }
}

If you have some ideas, I would love to get your directions on this

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.