The Missing Adaptive Partner From The Flutter Adaptive Scaffold Pattern

Because the flutter adaptive scaffold package adapts to platform form factor such as screen size; we have a missing adaptive pattern that needs to be implemented that is desired for big screens.

In this article, I will show you how to implement the center constrained body pattern that places the scrollbar at the edge of the window of the app, even with listview content.

The Problem

In big screens including web we use layouts that have centered content and with the flutter adaptive scaffold package and shared scaffold pattern it is desired to have some repeatable layout that centers content. A layout that is centered and width constrained. This presents content easier to read, since it never expands to fill the max width of very wide big screens.

You might think that you could implement a solution to this with this:

The problem is that with scrolling content, the scrollbar appears at the edge of list view content rather than the edge of the app screen.