DESIGN CHALLENGE

Complex layout in Flutter - example

Dribbble design recreated with NO ASSETS.

Yesterday I was scrolling through Dribbble designs and one really cached my eye:

Complete design can be found here. I really loved the clean UI but still innovative components and lovely colors. Can I code this screen without using ANY assets?

After few hours of coding, this is how it looked like:

I used only material icons and default font, so it does not look exactly the same, but those things can be easily changed.

Complete code can be found here. I didn’t perform ANY code cleanup or polishing, because I wanted to write this as fast as possible. Everything is in one file, so just copy provided code into your main.dart. It took me like 4 hours.

I’ll try to explain only the interesting components:

The bulb had to be in the Stack, to be able to position itself above the white surface and the bulb is also a Stack, because we need to cover teal space below it and put white overlay over upper part.