Designing a collaborative note-taking app in Flutter
For the last few weeks, I’ve been working on my note-taking app in Flutter (which you can find on GitHub here) so I thought I’d go through the design process.
Initial Ideas
It can be quite daunting first opening Figma, and trying to create a design from nothing, but what proved invaluable was a free UI kit I found from a single Google search. I had recently heard of a design trend called Neumorphism, and so I did my research.
What I found is that neumorphism is essentially the next-generation of material design, which of course is very exciting and so I rapidly started piecing together my ideas on a Figma document.
After a lot of tinkering, this was the product of my work.
Next I had to implement it.
Implementation
From my very limited experience with Flutter (the same to-do app and weather app that everyone makes), I thought it would be an up-hill struggle to implement my ideas for the app’s design. However, an amazing Flutter package that helped was Flutter Neumorphic. I could now quickly prototype a polished scaffold UI for my app, within only a few hours.
I made sure to stay fluid between my design document and my implementation, making changes as I saw fit. In my eyes at least, the design document is a sketch, and I made minor adjustments as I went along.
One of the most important things I found to speed up the process, was a good file-structure.
By structuring it like-so, I could separate the functionality from my design, and focus on only one at a time — helping to avoid the 1000 lines of inheritance that can be a nightmare with Flutter.
After only a week I had a fully designed note-taking app, which I’m turning into a start-up. Here’s the home-page:
I’m very happy with this, considering the small time-frame that I managed to piece it together in.
If you want to see further updates on the app’s development make sure to follow it on Twitter!
