A Web Adaptive Scaffold

You cannot create a good website using Flutter without a good custom adaptive scaffold. Well, you can if you like writing scaffolds three times; once for mobile, once for tablet, and once for desktop.

And, if you look, you even find some Flutter IO conference attendees doing such non-best-practice backwards scheisse. How about we do this the best practice way of not writing scaffolds out three times and web pages three times!

SetUp

For this custom scaffold, you need to use the adaptive breakpoints package:

dependencies:

adaptive_breakpoints: ^0.1.1

Now, let me state the use case:

1. On mobile, it has a drawer that can open from the left side.

2. On tablet, is has a drawer that can open from the left side.

3. On desktop, it has a top tabbar in the appbar.

4. I am only dealing with a limited one level tabbar, i.e. no stacked tabbars.

So now let’s see some code.

The Implementation

First, the Material IO team did such a good job on their adaptive navigation scaffold that it’s worth borrowing from. The source is at: