Making Custom UX Easier, Declarative Overlay Not In The Flutter 4.0 SDK

UX-wise, I have to make my design folio website app-like as far as story-telling my brand. Thus, I need an easier way to implement and use declarative overlays as they are at the core of both onboarding and feature discovery patterns which is somewhat on the web platform a replacement of the carousel UX pattern. There are of course other custom UX patterns that can also be implemented using declarative overlays such as FAB-dial pattern, so it’s a very important thing to know as far as implementing custom UX.

In this article, I will cover using a package called Flutter Portal which implements declarative overlays.

Why Declarative Overlays

With the non-declarative Flutter SDK overlay, we have these cons:

-Cannot easily theme as it’s not in the widget tree due to not being declarative

-Cannot easily align as it’s not in the widget tree due to not being declarative

-Context is goofed up which is why Theme.of fails etc.

-Restoration of state is also goofed up as it’s not in the widget tree due to not being declarative

And we have these pros with declarative overlays