https://blog-dev.simpleenough.net/tags/mobile/Recent content in Mobile on Simple Enough BlogHugoenTue, 15 Jul 2025 09:24:42 +0200https://blog-dev.simpleenough.net/blog/optimisationflutter/Tue, 15 Jul 2025 09:24:42 +0200https://blog-dev.simpleenough.net/blog/optimisationflutter/<p>This article proposes performance improvements by focusing on three fundamental aspects:</p> <ul> <li><strong>The build() cycle</strong></li> <li><strong>Keys</strong></li> <li><strong>Const widgets</strong></li> </ul> <hr> <h2 id="i-the-build-cycle-understanding-to-optimize" class="heading">I. The build() cycle: understanding to optimize<a href="#i-the-build-cycle-understanding-to-optimize" aria-labelledby="i-the-build-cycle-understanding-to-optimize"> <!-- <i class="fas fa-link anchor"></i> --> <svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><use href="#fas-link"></use></svg>&nbsp; </a> </h2> <p>The <strong>build()</strong> process is at the core of rendering in Flutter. When a state changes or a widget is rebuilt, the <strong>build()</strong> method is called. Mismanaging this method can cause significant slowdowns.</p> <h3 id="a-when-is-build-triggered" class="heading">A. When is build() triggered?<a href="#a-when-is-build-triggered" aria-labelledby="a-when-is-build-triggered"> <!-- <i class="fas fa-link anchor"></i> --> <svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><use href="#fas-link"></use></svg>&nbsp; </a> </h3> <ol> <li>During the first widget creation.</li> <li>When calling <strong>setState()</strong>.</li> <li>When a parent widget is rebuilt.</li> </ol> <h3 id="b-techniques-to-reduce-the-build-impact" class="heading">B. Techniques to reduce the build() impact<a href="#b-techniques-to-reduce-the-build-impact" aria-labelledby="b-techniques-to-reduce-the-build-impact"> <!-- <i class="fas fa-link anchor"></i> --> <svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><use href="#fas-link"></use></svg>&nbsp; </a> </h3> <ol> <li><strong>Use const in the constructor</strong>: Creates immutable instances.</li> <li><strong>Break down the build</strong>: Split the UI into subcomponents to reduce the impact zone.</li> <li><strong>Avoid heavy calculations in build()</strong>: Delegate tasks to pre-computed functions or separate methods.</li> </ol> <p><strong>Example: Optimization with subcomponents</strong></p>