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.

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.

The Figma design document

Next I had to implement it.

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.

File structure for the project

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!

18 year old developer and support engineer from the UK

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store