<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Akhilesh kumar</title>
    <description>The latest articles on DEV Community by Akhilesh kumar (@akhilesh002).</description>
    <link>https://dev.to/akhilesh002</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3994923%2F809d84eb-b521-4eb6-af2f-e75a7ad4c4d3.png</url>
      <title>DEV Community: Akhilesh kumar</title>
      <link>https://dev.to/akhilesh002</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/akhilesh002"/>
    <language>en</language>
    <item>
      <title>Migrating off the discontinued flutter_adaptive_scaffold — keeping go_router and your state</title>
      <dc:creator>Akhilesh kumar</dc:creator>
      <pubDate>Sun, 21 Jun 2026 06:01:46 +0000</pubDate>
      <link>https://dev.to/akhilesh002/migrating-off-the-discontinued-flutteradaptivescaffold-keeping-gorouter-and-your-state-3cem</link>
      <guid>https://dev.to/akhilesh002/migrating-off-the-discontinued-flutteradaptivescaffold-keeping-gorouter-and-your-state-3cem</guid>
      <description>&lt;p&gt;Google &lt;a href="https://github.com/flutter/flutter/issues/162965" rel="noopener noreferrer"&gt;discontinued &lt;code&gt;flutter_adaptive_scaffold&lt;/code&gt;&lt;/a&gt; in April 2025 — not because it was unpopular (it still pulls thousands of downloads a week), but to refocus on core framework work. The ask was for the community to rally around &lt;strong&gt;one&lt;/strong&gt; sustainable fork instead of a dozen one-offs.&lt;/p&gt;

&lt;p&gt;Most of the forks that appeared renamed the package and added cosmetic options — but the ones I found didn't address the two things you actually hit in a real app:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;go_router&lt;/code&gt; integration.&lt;/strong&gt; The original predated &lt;code&gt;StatefulShellRoute&lt;/code&gt;, so wiring adaptive navigation to a router meant a pile of glue code (tracked upstream as &lt;a href="https://github.com/flutter/flutter/issues/129850" rel="noopener noreferrer"&gt;flutter#129850&lt;/a&gt;).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;State loss on resize.&lt;/strong&gt; The original assigned a different body slot/key per breakpoint, so dragging a desktop window narrow — or a foldable unfolding — rebuilt your whole body subtree, wiping scroll position, form input and in-memory state.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://pub.dev/packages/adaptive_scaffold_router" rel="noopener noreferrer"&gt;&lt;code&gt;adaptive_scaffold_router&lt;/code&gt;&lt;/a&gt; is a drop-in successor that fixes both.&lt;/p&gt;

&lt;h2&gt;
  
  
  Migrating is a one-line import change
&lt;/h2&gt;

&lt;p&gt;The core API (&lt;code&gt;AdaptiveScaffold&lt;/code&gt;, &lt;code&gt;AdaptiveLayout&lt;/code&gt;, &lt;code&gt;SlotLayout&lt;/code&gt;, &lt;code&gt;Breakpoint&lt;/code&gt;, &lt;code&gt;Breakpoints&lt;/code&gt;) is compatible with &lt;code&gt;flutter_adaptive_scaffold&lt;/code&gt; 0.3.x. Swap the dependency and the import:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;dependencies&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;adaptive_scaffold_router&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;^0.3.1&lt;/span&gt;   &lt;span class="c1"&gt;# was: flutter_adaptive_scaffold&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:adaptive_scaffold_router/adaptive_scaffold_router.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Existing &lt;code&gt;AdaptiveScaffold(...)&lt;/code&gt; code keeps compiling.&lt;/p&gt;

&lt;h2&gt;
  
  
  The upgrade: wire it to go_router
&lt;/h2&gt;

&lt;p&gt;Instead of hand-rolling glue, hand a &lt;code&gt;StatefulNavigationShell&lt;/code&gt; to &lt;code&gt;AdaptiveNavigationShell&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;router&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;GoRouter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;initialLocation:&lt;/span&gt; &lt;span class="s"&gt;'/inbox'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nl"&gt;routes:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="n"&gt;StatefulShellRoute&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;indexedStack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nl"&gt;builder:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;navigationShell&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;AdaptiveNavigationShell&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nl"&gt;navigationShell:&lt;/span&gt; &lt;span class="n"&gt;navigationShell&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nl"&gt;destinations:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
          &lt;span class="n"&gt;NavigationDestination&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;icon:&lt;/span&gt; &lt;span class="n"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Icons&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;inbox&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nl"&gt;label:&lt;/span&gt; &lt;span class="s"&gt;'Inbox'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
          &lt;span class="n"&gt;NavigationDestination&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;icon:&lt;/span&gt; &lt;span class="n"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Icons&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;article&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nl"&gt;label:&lt;/span&gt; &lt;span class="s"&gt;'Articles'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
          &lt;span class="n"&gt;NavigationDestination&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;icon:&lt;/span&gt; &lt;span class="n"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Icons&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nl"&gt;label:&lt;/span&gt; &lt;span class="s"&gt;'Settings'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="p"&gt;],&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="nl"&gt;branches:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="n"&gt;StatefulShellBranch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;routes:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;GoRoute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;path:&lt;/span&gt; &lt;span class="s"&gt;'/inbox'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;builder:&lt;/span&gt; &lt;span class="p"&gt;...)]),&lt;/span&gt;
        &lt;span class="n"&gt;StatefulShellBranch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;routes:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;GoRoute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;path:&lt;/span&gt; &lt;span class="s"&gt;'/articles'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;builder:&lt;/span&gt; &lt;span class="p"&gt;...)]),&lt;/span&gt;
        &lt;span class="n"&gt;StatefulShellBranch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;routes:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;GoRoute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;path:&lt;/span&gt; &lt;span class="s"&gt;'/settings'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;builder:&lt;/span&gt; &lt;span class="p"&gt;...)]),&lt;/span&gt;
      &lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's the whole adaptive shell. On a phone you get a bottom navigation bar; on a tablet, a navigation rail; on desktop, an extended rail. Each tab keeps its own navigation stack via go_router branches.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why state survives a resize
&lt;/h2&gt;

&lt;p&gt;Under the hood the shell feeds &lt;strong&gt;one&lt;/strong&gt; body to &lt;code&gt;AdaptiveScaffold&lt;/code&gt; (not a per-breakpoint body), so the underlying &lt;code&gt;SlotLayout&lt;/code&gt; keeps a single stable key for every width. Changing the breakpoint swaps only the navigation chrome — the body subtree is never torn down. Drag the window from desktop to phone width mid-scroll and the scroll position (and any half-filled form) is exactly where you left it. That's the bug the original couldn't fix without a key-per-breakpoint redesign.&lt;/p&gt;

&lt;h2&gt;
  
  
  New in 0.3.0: the full Material 3 progression
&lt;/h2&gt;

&lt;p&gt;Material 3's adaptive navigation guidance is &lt;code&gt;bottom bar → rail → drawer&lt;/code&gt; as the window widens. Set one flag and the largest breakpoints render a permanent &lt;code&gt;NavigationDrawer&lt;/code&gt; instead of the extended rail:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="n"&gt;AdaptiveNavigationShell&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;navigationShell:&lt;/span&gt; &lt;span class="n"&gt;navigationShell&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nl"&gt;permanentDrawer:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nl"&gt;destinations:&lt;/span&gt; &lt;span class="n"&gt;destinations&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The rail still shows at medium widths, and — because the drawer lives in the navigation slot, not the body — switching between rail and drawer preserves branch state too.&lt;/p&gt;

&lt;h2&gt;
  
  
  Also in the box
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cupertino / platform-adaptive bottom bar&lt;/strong&gt; — &lt;code&gt;bottomNavigationBuilder&lt;/code&gt; (or &lt;code&gt;cupertino: true&lt;/code&gt;) swaps the small-breakpoint bar for a &lt;code&gt;CupertinoTabBar&lt;/code&gt; on Apple platforms.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Badges&lt;/strong&gt; — compose a Material &lt;code&gt;Badge&lt;/code&gt; straight into a destination's icon.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rail header / footer&lt;/strong&gt; — &lt;code&gt;leadingExtendedNavRail&lt;/code&gt; and &lt;code&gt;trailingNavRail&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Two-pane&lt;/strong&gt; &lt;code&gt;body&lt;/code&gt; + &lt;code&gt;secondaryBody&lt;/code&gt; for list/detail, foldable-aware.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;160/160 pub points, BSD-3 licensed, actively maintained. Issues and PRs welcome on &lt;a href="https://github.com/igloodev/adaptive_scaffold_router" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you've got a &lt;code&gt;flutter_adaptive_scaffold&lt;/code&gt; app gathering dust on a pinned version, this is the path forward — change the import, optionally add the shell, and you're on a maintained package again.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>dart</category>
      <category>mobile</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
