<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="https://musawwer.is-a.dev/blog/feed.xml" rel="self" type="application/atom+xml" /><link href="https://musawwer.is-a.dev/blog/" rel="alternate" type="text/html" /><updated>2026-08-23T20:31:15+05:00</updated><id>https://musawwer.is-a.dev/blog/feed.xml</id><title type="html">Musawwer Rasheed – Flutter Developer &amp;amp; UI Designer</title><subtitle>Flutter developer and UI designer crafting beautiful, responsive mobile &amp; web experiences. Portfolio, projects, and blog.</subtitle><author><name>Musawwer Rasheed</name></author><entry><title type="html">What’s New in Flutter 3.27</title><link href="https://musawwer.is-a.dev/blog/whats-new-in-flutter-3-27/" rel="alternate" type="text/html" title="What’s New in Flutter 3.27" /><published>2026-08-23T00:00:00+05:00</published><updated>2026-08-23T00:00:00+05:00</updated><id>https://musawwer.is-a.dev/blog/whats-new-in-flutter-3-27</id><content type="html" xml:base="https://musawwer.is-a.dev/blog/whats-new-in-flutter-3-27/"><![CDATA[<p>Flutter 3.27 is out and it’s a meaty one. Over 1,400 commits from 187 contributors (49 of them first-timers) landed in this release. Here’s a breakdown of everything worth knowing.</p>

<h2 id="impeller-is-now-default-on-android">Impeller is Now Default on Android</h2>

<p>The biggest headline. Impeller — Flutter’s custom rendering engine — is now the <strong>default renderer on modern Android devices</strong> with Vulkan support. It’s been in preview since Flutter 3.16 (November 2023), and the team has spent the time since then hammering on performance and fidelity based on real-world feedback.</p>

<p>Older Android devices without Vulkan support will continue to use Skia as before. If you need to opt out for any reason, add this to your <code class="language-plaintext highlighter-rouge">AndroidManifest.xml</code>:</p>

<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;meta-data</span>
  <span class="na">android:name=</span><span class="s">"io.flutter.embedding.android.EnableImpeller"</span>
  <span class="na">android:value=</span><span class="s">"false"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<p>Or pass <code class="language-plaintext highlighter-rouge">--no-enable-impeller</code> on the command line. But in most cases, just let it run — the results are noticeably smoother.</p>

<h2 id="ios-gets-120hz-more-consistently">iOS Gets 120Hz More Consistently</h2>

<p>Contributor <code class="language-plaintext highlighter-rouge">@knopp</code> added a new Metal rendering surface implementation that lets raster workloads begin right after the UI workload finishes, instead of waiting on compositor backpressure. The practical result: Flutter now consistently hits <strong>120Hz on high frame-rate iOS devices</strong> like the Pro models. Benchmarks show a significant reduction in average frame rasterization time across the board.</p>

<h2 id="cupertino-widgets-catch-up-to-material">Cupertino Widgets Catch Up to Material</h2>

<p>A lot of polish landed for iOS-style widgets:</p>

<ul>
  <li><strong>CupertinoCheckbox</strong> and <strong>CupertinoRadio</strong> — updated sizes, colors, stroke widths, and press behaviors. Now at feature parity with their Material counterparts.</li>
  <li><strong>CupertinoSwitch</strong> — new <code class="language-plaintext highlighter-rouge">thumbImage</code> and <code class="language-plaintext highlighter-rouge">fillColor</code> properties.</li>
  <li><strong>CupertinoButton</strong> — new <code class="language-plaintext highlighter-rouge">sizeStyle</code> property using the <code class="language-plaintext highlighter-rouge">CupertinoButtonSize</code> enum for iOS 15+ button styles. New <code class="language-plaintext highlighter-rouge">CupertinoButton.tinted</code> constructor for translucent backgrounds. Also gets <code class="language-plaintext highlighter-rouge">onLongPress</code> support.</li>
  <li><strong>CupertinoNavigationBar</strong> — background is now transparent until content scrolls under it, matching native iOS behavior.</li>
  <li><strong>CupertinoDatePicker</strong> and <strong>CupertinoPicker</strong> — now scroll to tapped items.</li>
  <li><strong>CupertinoAlertDialog</strong> — supports the tap-slide gesture.</li>
  <li><strong>CupertinoActionSheet</strong> — haptic feedback when sliding over buttons.</li>
</ul>

<h2 id="row-and-column-spacing">Row and Column Spacing</h2>

<p>Finally. You can now pass a <code class="language-plaintext highlighter-rouge">spacing</code> parameter to <code class="language-plaintext highlighter-rouge">Row</code> and <code class="language-plaintext highlighter-rouge">Column</code> to automatically space children:</p>

<div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Row</span><span class="p">(</span>
  <span class="nl">spacing:</span> <span class="mi">12</span><span class="p">,</span>
  <span class="nl">children:</span> <span class="p">[</span>
    <span class="n">Icon</span><span class="p">(</span><span class="n">Icons</span><span class="o">.</span><span class="na">star</span><span class="p">),</span>
    <span class="n">Text</span><span class="p">(</span><span class="s">'Flutter 3.27'</span><span class="p">),</span>
  <span class="p">],</span>
<span class="p">)</span>
</code></pre></div></div>

<p>No more wrapping every child in <code class="language-plaintext highlighter-rouge">SizedBox</code> or <code class="language-plaintext highlighter-rouge">Padding</code> just to add gaps.</p>

<h2 id="carouselview-gets-weighted-layouts">CarouselView Gets Weighted Layouts</h2>

<p><code class="language-plaintext highlighter-rouge">CarouselView.weighted</code> is new, letting you define flexible multi-item layouts using <code class="language-plaintext highlighter-rouge">flexWeights</code>:</p>

<div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">CarouselView</span><span class="o">.</span><span class="na">weighted</span><span class="p">(</span>
  <span class="nl">flexWeights:</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">1</span><span class="p">],</span> <span class="c1">// multi-browse layout</span>
  <span class="nl">children:</span> <span class="p">[...],</span>
<span class="p">)</span>
</code></pre></div></div>

<p>Use <code class="language-plaintext highlighter-rouge">[7, 1]</code> for a hero layout, <code class="language-plaintext highlighter-rouge">[1, 7, 1]</code> for centered-hero. Very useful for onboarding screens and featured content carousels.</p>

<h2 id="wide-gamut-colors">Wide Gamut Colors</h2>

<p>Flutter now supports the <strong>DisplayP3 color space</strong>, letting you define UI colors that take full advantage of the wider gamut on modern iOS displays. Note: some <code class="language-plaintext highlighter-rouge">Color</code> methods have been deprecated as part of this change — check the breaking changes page if you’re doing low-level color work.</p>

<h2 id="android-edge-to-edge-by-default">Android Edge-to-Edge by Default</h2>

<p>On <strong>Android 15+</strong>, apps now run in full edge-to-edge mode by default. Flutter’s <code class="language-plaintext highlighter-rouge">SafeArea</code> and <code class="language-plaintext highlighter-rouge">MediaQuery</code> have been updated to handle hardware cutouts correctly, including in freeform windowing mode.</p>

<h2 id="swift-package-manager-on-stable">Swift Package Manager on Stable</h2>

<p>Flutter’s migration to Swift Package Manager is now available on the <strong>stable and beta channels</strong> (previously main only). It’s still opt-in while the team smooths out the edges, but plugin authors are encouraged to add SPM support now. Major packages like Firebase have already migrated.</p>

<h2 id="devtools-updates">DevTools Updates</h2>

<ul>
  <li><strong>Deep link validation</strong> now works for both Android and iOS in the Deep Links tool.</li>
  <li><strong>Network data export</strong> as <code class="language-plaintext highlighter-rouge">.har</code> files.</li>
  <li><strong>New Flutter Inspector</strong> (experimental) — condensed widget tree, implementation widget toggle, and an inline layout viewer. Enable it in DevTools settings.</li>
  <li>Memory tool data is now preserved even after an app disconnects or crashes — a huge quality-of-life improvement when debugging OOM issues.</li>
</ul>

<h2 id="other-highlights">Other Highlights</h2>

<ul>
  <li><code class="language-plaintext highlighter-rouge">SegmentedButton</code> gets a <code class="language-plaintext highlighter-rouge">direction</code> property for vertical layouts.</li>
  <li><code class="language-plaintext highlighter-rouge">SelectionArea</code> supports <code class="language-plaintext highlighter-rouge">Shift + Click</code> on desktop to extend selections.</li>
  <li><code class="language-plaintext highlighter-rouge">ModalRoute</code> transitions are now more flexible when mixing different route transitions.</li>
  <li>Kotlin build script (<code class="language-plaintext highlighter-rouge">build.gradle.kts</code>) is now supported. Note: the legacy Groovy apply script method is deprecated in 3.27 and will be removed in the next release.</li>
  <li>Pub Workspaces launched with Dart 3.6 for monorepo support.</li>
  <li>Download counts (30-day) replace popularity scores on pub.dev.</li>
</ul>

<h2 id="upgrading">Upgrading</h2>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>flutter upgrade
</code></pre></div></div>

<p>That’s all it takes. Check the <a href="https://docs.flutter.dev/release/release-notes/release-notes-3.27.0">official Flutter 3.27 release notes</a> for the full changelog and migration guides for any breaking changes.</p>

<hr />

<p><em>Content summarised from the official <a href="https://flutter.dev/blog/whats-new-in-flutter-3-27">Flutter 3.27 release post</a>.</em></p>]]></content><author><name>Musawwer Rasheed</name></author><category term="Flutter" /><category term="Dart" /><category term="Release" /><summary type="html"><![CDATA[A complete breakdown of Flutter 3.27 — Impeller as default on Android, iOS 120Hz improvements, Cupertino widget updates, Row/Column spacing, CarouselView weighted layouts, Swift Package Manager on stable, and DevTools improvements.]]></summary></entry><entry><title type="html">Why I Built My Portfolio with Flutter Web</title><link href="https://musawwer.is-a.dev/blog/why-i-built-my-portfolio-with-flutter-web/" rel="alternate" type="text/html" title="Why I Built My Portfolio with Flutter Web" /><published>2026-07-21T00:00:00+05:00</published><updated>2026-07-21T00:00:00+05:00</updated><id>https://musawwer.is-a.dev/blog/why-i-built-my-portfolio-with-flutter-web</id><content type="html" xml:base="https://musawwer.is-a.dev/blog/why-i-built-my-portfolio-with-flutter-web/"><![CDATA[<p>When I decided to build my personal portfolio, I had plenty of options — plain HTML/CSS, React, Next.js, Astro. I picked <strong>Flutter Web</strong>, and I’d make the same choice again.</p>

<h2 id="why-flutter">Why Flutter?</h2>

<p>I’m a Flutter developer by trade. Writing my portfolio in the same framework I use daily meant I could move fast, reuse patterns I already know, and showcase <em>Flutter itself</em> as a skill right inside the portfolio.</p>

<h2 id="what-actually-impressed-me">What Actually Impressed Me</h2>

<p><strong>Pixel-perfect design across platforms.</strong> Flutter renders on a canvas — no browser quirks, no inconsistent CSS box models. What you see in your editor is what your visitors see.</p>

<p><strong>Animations are first-class.</strong> The <code class="language-plaintext highlighter-rouge">AnimationController</code> API is expressive enough that I could add the rotating ring, fade-in hero, and skill bar animations without reaching for a single external library.</p>

<p><strong>Responsive layout is straightforward.</strong> With <code class="language-plaintext highlighter-rouge">LayoutBuilder</code> and custom breakpoints, adapting the UI from mobile to desktop took minutes, not hours.</p>

<h2 id="the-challenges">The Challenges</h2>

<p>Flutter Web’s biggest weakness is <strong>SEO</strong>. The app renders inside a <code class="language-plaintext highlighter-rouge">&lt;canvas&gt;</code> element — search engine crawlers can’t index your text content easily. That’s exactly why this blog exists separately, as a plain Jekyll site. Important content lives here where Google can read it.</p>

<p>Initial load time is another trade-off. The Wasm/CanvasKit bundle is large. I mitigate this with a loading screen, but it’s something to be aware of.</p>

<h2 id="the-verdict">The Verdict</h2>

<p>For a developer portfolio where you want to <strong>demonstrate Flutter skill</strong> and <strong>wow visitors visually</strong>, Flutter Web is a fantastic choice. Pair it with a statically-generated blog (like this one!) for SEO content, and you get the best of both worlds.</p>

<hr />

<p><em>Have questions about Flutter Web? Reach out at <a href="https://musawwer.is-a.dev">musawwer.is-a.dev</a> or open an issue on my GitHub.</em></p>]]></content><author><name>Musawwer Rasheed</name></author><category term="Flutter" /><category term="Web" /><category term="Portfolio" /><summary type="html"><![CDATA[Why I chose Flutter Web to build my developer portfolio — the benefits of pixel-perfect rendering and first-class animations, the SEO trade-offs, and whether it was worth it.]]></summary></entry></feed>