Flutter Designer Keylines

A design tool that makes your flutter custom widget work easier is keylines, i.e. those visual set-able guides to UI element placement. It is even better if you have it set up as design build variant. Let me show you how.

What Are We Building

That typically is what design keylines look like when you use them in designing the custom widget or screen. I am using a recent new package called, design tools:

design_tools | Flutter Package

First to use, we set some vertical and horizontal colored intervals:

Then you define some keylines: