Implementing the latest from Flutter to build our Guided Journaling Library
Reflection.app is a delightfully minimal private journaling app built with Flutter. A few weeks ago, we officially announced V4, our biggest update yet. In addition to integrating a new guided journaling library and our new look and branding, we also made some major improvements behind the scenes. In this article, we will dive into some of the specific Flutter updates that made this milestone release possible.
Why we are obsessed with Flutter
Before we dive in, an intro for the uninitiated: Flutter is a free and open-source UI framework built by Google and supported by an incredible community.
Over the years, many frameworks have promised the ability to deploy natively-compiled, cross-platform apps from a single codebase — Flutter is the first to deliver it.
As a small team of developers, Flutter has made it possible to move incredibly fast. We ship app updates across all platforms (Reflection.app is available on iOS, Android, Mac, and Web) every two weeks, and our users get to experience the same seamless experience no matter what device they are using – something that is critical for a journaling app where users are consistently engaging on both mobile and desktop.
Leveraging the latest Flutter updates for under-the-hood improvements
Flutter Null Safety Migration
As early adopters of Flutter, much of our app was built before the transition to null safety. Our decision to integrate null safety wasn't just about staying up-to-date with the latest, but it was also to ensure improved stability, upgrade all our packages, and boost performance. Here's how it played out:
Performance Boost & Stability: With Flutter's null safety and with Impeller on iOS, we witnessed a solid improvement in overall app performance. With reduced lags and delays, the app now runs faster with more stability, providing our users with a smoother, more responsive journaling experience.
Before Null Safety Migration:
After Null Safety Migration:
Null safety for a slimmer codebase and smaller app size
One of the standout benefits of the null safety migration is its impact on our codebase and app size. By embracing null safety, we've achieved a 7% reduction in our codebase, leading to a 5% reduction in the app's size. We used cloc to confirm the reduction.
For our dev team, this translates to a more streamlined codebase, easier maintenance, and faster development cycles.
Designing a Unique and Memorable Experience with Flutter’s APIs and Color Paint Class
Designing with Flutter simplifies the process of creating beautiful and responsive interfaces by leveraging the library of widgets and customizable components. And with hot reload, you can get a real-time preview and make quick adjustments.
The rigidity and limitations of using widgets and components help us move fast and keep our design consistent with industry standards. But there are also some moments we want to break the mold and push the envelope a bit. Fortunately, with Flutter, we still get to flex our design chops. Here are a few examples of how we did that with V4.
Custom Navigation
For us, V4 was all about polish — that extra layer that goes beyond functionality but enters the realm of patina and delight. Our new floating navigation bar was an example of that.
With a floating navigation, sometimes the background design can be distracting, so we stretched the navigation a few pixels shy of full width and included a subtle opacity overlay and blurred background effect to create some distance without any distraction. We were able to make this happen with Flutter's versatile APIs.
Mobile Bottom Navigation Bar
Whether you're on a mobile or desktop, we have a custom, fully responsive navigation bar that is unique to our app, speaks to our brand, and reflects the light, delightful, and engaging experience we want our users to have cross-platform, both in light mode and dark mode.
Adaptive Navigation Layout
Bringing text to life with vibrant visuals using Flutter's Color Paint Class
Building a journaling library, we were challenged to make a lot of text still feel engaging while having a clear visual hierarchy. In addition to introducing some new types, like Unbound from the Google Font library, we also explored a lot with color and gradient.
Flutter's Color Paint class has been our go-to to make this happen. This is most evident on our guides page, where we've introduced beautiful color-changing cards and an elegant edge blur effect. Through this bit of Flutter magic, we were able to generate unique gradient colors for each individual guide, making the page feel more dynamic and engaging.
The top card gradients are generated using this utility function. Here is a snippet of the color changes in our guide cards above.
Pushing Performance Further with Impeller for macOS
The Flutter team and community are always very welcoming, open to feedback, and collaborative. When Leigha from the Flutter team reached out a few weeks back with the latest impeller for macOS, we were eager to test it but needed to complete our transition to null safety first.
With the null safety migration complete, we were eager to test an early release of Impeller for Reflection.app’s MacOS app and share our first impressions with the Flutter team.
The early results have been really promising. Here are some highlights:
Baseline Metrics (Before Implementing Impeller):
- Frame Rate (Before): Consistent frame rates with no significant jank.
- Startup Jank: Shader compilation jank warning on initial startup.
- SkSL Warm-up: No SkSL warm-up data collected.
Impeller Testing Results:
- Frame Rate (Impeller Enabled): Consistent and low frame rates with no significant degradation.
- Bug Testing: Increased jank on initial startup but no critical bugs or jank warnings.
- Jank During Navigation: Slight increase in jank during navigation but no jank warnings.
Key Takeaways:
- Impeller improved app performance with stable frame rates.
- No critical bugs or jank warnings.
- Slight increase in jank during navigation, an area for further optimization.
🤓 You can see more details about our experience running impelling on macOS on GitHub.
As always, so grateful for the collaborative energy of the Flutter team and community and excited that we were able to test and contribute, even in a small way, to the platform's progress.
Wrapping It Up: Feeling the love
This latest release has truly been a labor of love. Our team is incredibly proud of what we built, and we are grateful to the Flutter team and community for making all of this possible.
For many of our users, journaling is a foundational tool to help with their mental wellness and personal growth - but they often don’t know where to begin. We’ve set out to make journaling delightful and accessible to as many people as possible.
Launching our new guides platform was a big step in making that dream a reality - and we would have never gotten this fast or this far without Flutter.
Here are a few recent notes from our users:
“This update was a home run for me. I love the new interface for journal prompts and all of the new options for guides.”
“I’m a believer. I was not great at journaling, but this app has made it so simple and actually enjoyable.”
“I look forward to journaling every day. This takes personal reflection and gives it contextual meaning. Love it!!!”
“What a beautiful update this is! The app interface is truly stunning, especially the dark mode. Great work; kudos to all!”
And we love that we get to build something that our users love as much as we do :-)
If you haven’t yet, download Reflection.app, experience the latest Flutter updates, and let us know what you think!
Written by Isaac Adariku
Isaac is the Lead Developer at Reflection.app, a guided journal for wellness and growth; he is currently pursuing a computer science Master's degree at the Nigerian Defense Academy. He specializes in mobile and backend development using Google's Flutter SDK. Additionally, he is an active mentor and founded the Flutter Kaduna community. Follow Isaac on LinkedIn and Twitter for more technical learnings and explorations of Flutter.
Reflection.app is a delightfully minimal private journaling app built with Flutter. A few weeks ago, we officially announced V4, our biggest update yet. In addition to integrating a new guided journaling library and our new look and branding, we also made some major improvements behind the scenes. In this article, we will dive into some of the specific Flutter updates that made this milestone release possible.
Why we are obsessed with Flutter
Before we dive in, an intro for the uninitiated: Flutter is a free and open-source UI framework built by Google and supported by an incredible community.
Over the years, many frameworks have promised the ability to deploy natively-compiled, cross-platform apps from a single codebase — Flutter is the first to deliver it.
As a small team of developers, Flutter has made it possible to move incredibly fast. We ship app updates across all platforms (Reflection.app is available on iOS, Android, Mac, and Web) every two weeks, and our users get to experience the same seamless experience no matter what device they are using – something that is critical for a journaling app where users are consistently engaging on both mobile and desktop.
Leveraging the latest Flutter updates for under-the-hood improvements
Flutter Null Safety Migration
As early adopters of Flutter, much of our app was built before the transition to null safety. Our decision to integrate null safety wasn't just about staying up-to-date with the latest, but it was also to ensure improved stability, upgrade all our packages, and boost performance. Here's how it played out:
Performance Boost & Stability: With Flutter's null safety and with Impeller on iOS, we witnessed a solid improvement in overall app performance. With reduced lags and delays, the app now runs faster with more stability, providing our users with a smoother, more responsive journaling experience.
Before Null Safety Migration:
After Null Safety Migration:
Null safety for a slimmer codebase and smaller app size
One of the standout benefits of the null safety migration is its impact on our codebase and app size. By embracing null safety, we've achieved a 7% reduction in our codebase, leading to a 5% reduction in the app's size. We used cloc to confirm the reduction.
For our dev team, this translates to a more streamlined codebase, easier maintenance, and faster development cycles.
Designing a Unique and Memorable Experience with Flutter’s APIs and Color Paint Class
Designing with Flutter simplifies the process of creating beautiful and responsive interfaces by leveraging the library of widgets and customizable components. And with hot reload, you can get a real-time preview and make quick adjustments.
The rigidity and limitations of using widgets and components help us move fast and keep our design consistent with industry standards. But there are also some moments we want to break the mold and push the envelope a bit. Fortunately, with Flutter, we still get to flex our design chops. Here are a few examples of how we did that with V4.
Custom Navigation
For us, V4 was all about polish — that extra layer that goes beyond functionality but enters the realm of patina and delight. Our new floating navigation bar was an example of that.
With a floating navigation, sometimes the background design can be distracting, so we stretched the navigation a few pixels shy of full width and included a subtle opacity overlay and blurred background effect to create some distance without any distraction. We were able to make this happen with Flutter's versatile APIs.
Mobile Bottom Navigation Bar
Whether you're on a mobile or desktop, we have a custom, fully responsive navigation bar that is unique to our app, speaks to our brand, and reflects the light, delightful, and engaging experience we want our users to have cross-platform, both in light mode and dark mode.
Adaptive Navigation Layout
Bringing text to life with vibrant visuals using Flutter's Color Paint Class
Building a journaling library, we were challenged to make a lot of text still feel engaging while having a clear visual hierarchy. In addition to introducing some new types, like Unbound from the Google Font library, we also explored a lot with color and gradient.
Flutter's Color Paint class has been our go-to to make this happen. This is most evident on our guides page, where we've introduced beautiful color-changing cards and an elegant edge blur effect. Through this bit of Flutter magic, we were able to generate unique gradient colors for each individual guide, making the page feel more dynamic and engaging.
The top card gradients are generated using this utility function. Here is a snippet of the color changes in our guide cards above.
Pushing Performance Further with Impeller for macOS
The Flutter team and community are always very welcoming, open to feedback, and collaborative. When Leigha from the Flutter team reached out a few weeks back with the latest impeller for macOS, we were eager to test it but needed to complete our transition to null safety first.
With the null safety migration complete, we were eager to test an early release of Impeller for Reflection.app’s MacOS app and share our first impressions with the Flutter team.
The early results have been really promising. Here are some highlights:
Baseline Metrics (Before Implementing Impeller):
- Frame Rate (Before): Consistent frame rates with no significant jank.
- Startup Jank: Shader compilation jank warning on initial startup.
- SkSL Warm-up: No SkSL warm-up data collected.
Impeller Testing Results:
- Frame Rate (Impeller Enabled): Consistent and low frame rates with no significant degradation.
- Bug Testing: Increased jank on initial startup but no critical bugs or jank warnings.
- Jank During Navigation: Slight increase in jank during navigation but no jank warnings.
Key Takeaways:
- Impeller improved app performance with stable frame rates.
- No critical bugs or jank warnings.
- Slight increase in jank during navigation, an area for further optimization.
🤓 You can see more details about our experience running impelling on macOS on GitHub.
As always, so grateful for the collaborative energy of the Flutter team and community and excited that we were able to test and contribute, even in a small way, to the platform's progress.
Wrapping It Up: Feeling the love
This latest release has truly been a labor of love. Our team is incredibly proud of what we built, and we are grateful to the Flutter team and community for making all of this possible.
For many of our users, journaling is a foundational tool to help with their mental wellness and personal growth - but they often don’t know where to begin. We’ve set out to make journaling delightful and accessible to as many people as possible.
Launching our new guides platform was a big step in making that dream a reality - and we would have never gotten this fast or this far without Flutter.
Here are a few recent notes from our users:
“This update was a home run for me. I love the new interface for journal prompts and all of the new options for guides.”
“I’m a believer. I was not great at journaling, but this app has made it so simple and actually enjoyable.”
“I look forward to journaling every day. This takes personal reflection and gives it contextual meaning. Love it!!!”
“What a beautiful update this is! The app interface is truly stunning, especially the dark mode. Great work; kudos to all!”
And we love that we get to build something that our users love as much as we do :-)
If you haven’t yet, download Reflection.app, experience the latest Flutter updates, and let us know what you think!
Written by Isaac Adariku
Isaac is the Lead Developer at Reflection.app, a guided journal for wellness and growth; he is currently pursuing a computer science Master's degree at the Nigerian Defense Academy. He specializes in mobile and backend development using Google's Flutter SDK. Additionally, he is an active mentor and founded the Flutter Kaduna community. Follow Isaac on LinkedIn and Twitter for more technical learnings and explorations of Flutter.
.svg)
.svg)
.svg)