Bottom Navigation Bar with nested Scaffolds

<p>On the Android developer documentation there is a guide on&nbsp;<a href="https://developer.android.com/jetpack/compose/navigation#bottom-nav" rel="noopener ugc nofollow" target="_blank">how to integrate the bottom navigation bar into your app</a>, which uses a top level&nbsp;<code>Scaffold</code>&nbsp;and a&nbsp;<code>NavHost</code>&nbsp;as its content.</p> <h2>The problem</h2> <p>The issue I encountered with this setup is the fact that it&rsquo;s hard to nest material 3 scaffolds in the&nbsp;<code>NavHost</code>&nbsp;as they might end up with weird paddings around the edges, especially when managing insets yourself with&nbsp;<code>WindowCompat.setDecorFitsSystemWindows(window, false)</code>&nbsp;in your activity.</p> <p>Nesting scaffolds is often necessary when you need to add different top app bars or floation action buttons depending on the screen, and moving that conditional logic to the main scaffold often requires view models filled with ui properties that shouldn&rsquo;t be there.</p> <h2>My approach</h2> <p>I&rsquo;ve tried multiple solutions, and the one that worked best for me was to replace to top level&nbsp;<code>Scaffold</code>&nbsp;with a simple&nbsp;<code>Column</code>&nbsp;and add the&nbsp;<code>NavHost</code>&nbsp;and&nbsp;<code>BottomAppBar</code>&nbsp;to it!</p> <p><a href="https://medium.com/@giuliopime/bottom-navigation-bar-with-nested-scaffolds-e7db3a0a1656">Click Here</a></p>