How To Teach Flutter App Design

Fred Grott
4 min readJan 7, 2023

While I push some free and paid UI Kits out, I need to talk about why I have to teach Flutter app design differently. One, every Google Developer Expert (GDE) are writing articles on widgets and the flutter docs already covers widgets in a specific way. Thus, to stand-out and have it be memorable, I have to teach Flutter app design a very specific, unique way.

Let me step through some examples to show you.

The Odd-ball Web UX

Web UX is the old-ball as we have several things that are different. For example, in Web UX, the Web Browser controls the view-port in that the top navigation moves with the content in dismal UX examples and in some better UX websites the top navigation bar floats. But, unlike a mobile app top navigation, we have somewhat thinner navigation bar.

And we can implement that with some creative use of a stack widget and some special scaffold settings:

That is from a PWA one-page site flutter web project I am working on. In the PWA specific UX, it’s always implemented with a floating top navigation…

--

--