UX Lesson One, Logos

Fred Grott
5 min readMar 24, 2022

Could you create how this logo is situated?

So let me show you this trick to align your logo with your App name on the baseline.

The Implementation

Obviously, if you put the logo image in a row with the App Title as a text, the two items will not align with the baseline of the text. Now, so let’s ask; which widget allows us to align dissimilar items?

It’s a combination of three widgets; RichText, TextSpan, and WidgetSpan:

So how does this work? That WidgetSpan will act as a leaf node and inline it in an inlinespan which results in it aligning with the baseline of any included TextSpans per the flutter docs:


That is just one of the UX recipes in making the user interface of a flutter app awesome. More lessons to come.

The blunt truth, the programming and design world both are filled with those who took to learning something and on that learning path mixed in their own experiences and invented something brand new and worth while.

It would be immoral of me to shortened your journey to save time as it then would then derive the world of that thing that you will invent in the developer and design worlds.

Some of you might recoginize this as a re-statement of Zed Shaw’s The Hard Way to learn programming tennets. In both developer worlds and design worlds they do work and bring some new value to the world through your unique inventions invented on that self education journey you embark upon.

Fred Grott