DEV Community

Cover image for Flutter: Interactive User Guidance or how to make a hole in the layout
Alex Melnyk
Alex Melnyk

Posted on • Originally published at Medium

Flutter: Interactive User Guidance or how to make a hole in the layout

Hi folks! I wanna show you an interesting Flutter feature. We can build interactive user guidance using blending colors in Flutter.

This simple trick allows you to build interesting user guidance in the app more than just a picture. It could be really interactive with animation etc.

Layout

First of all, to build the overlay, you need to wrap the Scaffold widget of the target page in a Stack widget and left the Scaffold widget as a first item.

For the second place, create an overlay that covers the whole Scaffold with a bit transparent dark/light background. The root ColorFiltered has blend mode “source out” and the inner Container has “destination out” in the background, which allows us to clip widgets to clip them in the root ColorFiltered widget.

1_zVglVM95PiApQJtojxmZ5Q

For example, in this case, we have a Container with size 150x150 and the color white, the color needed for blending and should not be transparent fully otherwise, you will not see it. So color is needed for blending to understand what area to clip out.

Keep in mind that the Stack widget out of Scaffold and doesn’t have any Material support, so wrap it with a Material widget that will be enough.

1_h4j4mN2AlJ7pFIlrh2zQ9w

Animation & Steps

I’ve prepared a simple example of switching guidance from one to another with animating clip area from the rectangle to a circle and moving. Just check my repository and get this experience.
The full project source code available on GitHub.

Demo

There is a light demo that I’ve recorded on the Android Emulator to show you how it works.

YouTube:

Code Samples

See the original article with code samples by the canonical link.

Top comments (1)

Collapse
 
pablonax profile image
Pablo Discobar

wow, that's awesome! I really like it! if you are interested in this topic, then check this article - dev.to/pablonax/free-flutter-templ...