DEV Community: friendship

Shipaton: Do0ne Build Journal #5 - Social Feature: Discover Goals & Tasks

friendship — Mon, 15 Sep 2025 15:38:14 +0000

Objective

Implement a feature that allows users to view other people’s Goals and Do0ne items.
Provide a Like feature to cheer for each Goal.

Implementation Plan

Add a Discover menu to display other users’ Goals and Do0ne lists.
Add a field in each Goal document to store the number of Likes.
Create a Likes subcollection under each Goal to track which users pressed Like.
Restrict Likes to once per day per user.
Add a Likers subcollection to record each user’s Like history (when and how many times).

Problem

If one Goal has 20 Do0ne items and a user has 100 Goals, one full read requires 21 × 100 = 2,100 Firestore Reads.
If 10 users perform this action, it results in 21,000 Reads, which is too costly.

Solution

Run a Cloud Function on a schedule to generate snapshot JSON files containing Goals and Do0ne data.
FlutterFlow will load these JSON snapshots via API calls instead of reading directly from Firestore.
This reduces Firestore Reads since users fetch pre-generated JSON instead of live documents.
Some information still requires real-time updates:
Like count and whether the current user has Liked must be up-to-date.
Therefore, Firestore is read only when a Goal is displayed to fetch its latest Like data.

FlutterFlow Implementation

Create an API call to load the snapshot JSON file.
Bind the API response to a PageView, generating Goal pages dynamically.
When a PageView page becomes active, fetch the latest Like data from Firestore for that Goal.
Implement Like / Unlike functionality.

Actual Implementation

Fetching Goal data only when a PageView becomes active didn’t work reliably, so the entire dataset is now loaded when the PageView is first created.
This eliminated the Read-saving advantage, so pagination was introduced when generating snapshots: each JSON file contains only 10 Goals.
When the user reaches the last PageView page, the app requests the next snapshot API and appends the new pages dynamically.

View Likes on my Goal from others

Discover lets you see others’ Goals and Do0ne and cheer them on with Likes

Shipaton: Do0ne Build Journal #4 - Do0ne Timer Built with a Custom Widget

friendship — Fri, 12 Sep 2025 10:16:14 +0000

New Improvement

While entering and executing Do0ne tasks, I noticed a boost in productivity. Then I came up with an idea to make it even better: providing visual stimulation to stay focused and finish faster. To achieve this, I decided to start a timer whenever a Do0ne task is created, so that its elapsed time could be tracked.

FlutterFlow Timer

FlutterFlow offers a built-in timer widget that supports both Count Down and Count Up modes. However, the formatting options are limited, and it couldn’t display time in day units, which I wanted. After exploring different options, I decided to use FlutterFlow’s Custom Widget feature.

Custom Widget

A Custom Widget in FlutterFlow allows you to embed your own Flutter code into the app as a widget. It’s useful for implementing advanced features or designs that default widgets can’t support.

After writing the basic timer logic, I encountered a few issues:

There were no built-in UI options to style the timer text.
The timer text was left-aligned by default, and the alignment property provided in the widget settings didn’t work as expected.

Solution

I resolved all three issues directly in the Custom Widget code. This allowed me to format the timer output and style it exactly the way I wanted.

I added additional alignment code to the widget’s text and its constituent elements.

textAlign: TextAlign.center
child: Center(child: text),

The timer font style can use the color theme defined in FF with the following code.

    final text = Text(
      _elapsed,
      textAlign: TextAlign.center,
      style: FlutterFlowTheme.of(context).bodyMedium.override(
            fontFamily: FlutterFlowTheme.of(context).bodyMediumFamily,
            fontSize: 14.0,
            fontWeight: FontWeight.w400,
            color: textColor,
          ),
      softWrap: false,
    );

Completed Timer

Now the elapsed time for each Do0ne task is displayed correctly. I also added three color variations depending on the situation:

Within 4 hours: Default color
Exceeding 12 hours: Warning color
Exceeding 24 hours: Alert color

A screenshot of the completed UI is attached below.

Additional UI Adjustment

As the number of completed Do0ne tasks increased, the list area started growing too large. I resized the list section to keep the UI clean and easy to read.

Shipaton: Do0ne Build Journal #4 - Do0ne Timer Built with a Custom Widget

friendship — Fri, 12 Sep 2025 10:16:14 +0000

New Improvement

FlutterFlow Timer

Custom Widget

A Custom Widget in FlutterFlow allows you to embed your own Flutter code into the app as a widget. It’s useful for implementing advanced features or designs that default widgets can’t support.

After writing the basic timer logic, I encountered a few issues:

There were no built-in UI options to style the timer text.
The timer text was left-aligned by default, and the alignment property provided in the widget settings didn’t work as expected.

Solution

I resolved all three issues directly in the Custom Widget code. This allowed me to format the timer output and style it exactly the way I wanted.

I added additional alignment code to the widget’s text and its constituent elements.

textAlign: TextAlign.center
child: Center(child: text),

The timer font style can use the color theme defined in FF with the following code.

    final text = Text(
      _elapsed,
      textAlign: TextAlign.center,
      style: FlutterFlowTheme.of(context).bodyMedium.override(
            fontFamily: FlutterFlowTheme.of(context).bodyMediumFamily,
            fontSize: 14.0,
            fontWeight: FontWeight.w400,
            color: textColor,
          ),
      softWrap: false,
    );

Completed Timer

Now the elapsed time for each Do0ne task is displayed correctly. I also added three color variations depending on the situation:

Within 4 hours: Default color
Exceeding 12 hours: Warning color
Exceeding 24 hours: Alert color

A screenshot of the completed UI is attached below.

Additional UI Adjustment

As the number of completed Do0ne tasks increased, the list area started growing too large. I resized the list section to keep the UI clean and easy to read.

Shipaton: Do0ne Build Journal #3 - Do0ne 1.0, First Stable Version Completed

friendship — Thu, 11 Sep 2025 07:23:58 +0000

Day 3 Work

Today, I wrapped up bug fixes and UI improvements for Do0ne 1.0 while working from home. With this, the first stable version of Do0ne is now complete, and all core features are functioning as intended.

Fixes and Improvements

1. Added hint messages for Goal / Do0ne input fields
For first-time users, it may not be clear what to type in the input fields. I added hint messages to guide the user when entering a Goal or Do0ne. This will continue to evolve with further updates.

2. Changed task sorting to newest-first
Completed Do0ne items were previously shown in chronological order (oldest first). I updated the list to display newest-first. Mistakes like this in data sorting are common in the early stages of app development. 😅

3. Fixed negative Goal elapsed days bug
A bug caused Goal elapsed days to show negative values. It turned out to be a simple error in setting the reference date parameter.

4. Removed Do0ne elapsed days
The elapsed days display for Do0ne items was removed. While using the app, I often come up with ideas to help maintain focus. I decided to try a new approach in the next update, and I’m looking forward to seeing how effective it will be in real use.

5. Added Complete / Delete buttons
Added Complete and Delete buttons below the Do0ne input field to improve usability.

Summary

Before moving on to new social features, I focused on polishing the basics and fixing key bugs. While focus during work is important, achieving goals requires steady daily effort.

With Do0ne, I can record and track my progress while completing one essential task each day. This helps me consistently think of and act on the most important item, which is becoming a valuable habit and moving me closer to my goals.

As of today, a total of 11 Do0ne tasks have been completed.

Shipaton: Do0ne Build Journal #2 - Using Do0ne in Practice & Custom Loading Screen with Lottie Icons

friendship — Wed, 10 Sep 2025 05:53:19 +0000

Day 2 Begins

Today, I started the second day of work at a 24-hour café with a cup of coffee. I continued the project by actually using Do0ne, the app I built with basic functionality on Day 1.

For Shipaton, I set the goal as “Launching the Do0ne app.” To reach this goal, I registered and completed the necessary tasks one by one, which also allowed me to validate Do0ne’s workflow from a real user’s perspective.

Benefits from Real Usage

Previously, when organizing app development tasks, I used to write down everything, assign priorities, and schedule them by date—a process that often felt cumbersome and tiring.

With Do0ne, the experience was different:

I only needed to register one immediate task at a time, making it much easier to stay focused.
Having the current task displayed prominently at the center of the screen gave me extra motivation to finish it quickly.
Since I had chosen this task as the most important one, I could work on it without worrying about all the other pending tasks, which gave me peace of mind.

This approach felt refreshingly different from conventional to-do apps.

FlutterFlow: Custom Loading Screen with Lottie Icons

Previous Approach
FlutterFlow has a default loading indicator, but it only shows an animation on the clicked button itself. This made it hard to tell whether the app was truly loading, and visually it wasn’t very appealing.

What I Wanted
I wanted a large loading icon centered on the screen, styled with a more polished animation that fit the overall design of the app.

Solution

Downloaded a preferred loading animation from LottieFiles
Created a Custom Dialog in FlutterFlow and inserted the loading component.
Configured the Action Block to call the Custom Dialog with Non-Dismissible (to prevent it from closing by tapping the screen) and Non-Blocking (to allow subsequent actions to run) options enabled.
The logic was: display the loading component, run the process, and then close the loading component afterward.

Summary

On Day 2, I tested Do0ne in real usage and confirmed its core strength: helping me focus on one task at a time. I also implemented a custom loading screen with Lottie icons, which improved the app’s UI beyond the default FlutterFlow loader. By the end of the day, I could clearly see Do0ne evolving into a more practical tool for real use.

Fun Element

So far, I’ve completed 7 tasks. Compared to predefining dozens or even hundreds of tasks in advance, this approach feels much lighter and more motivating. I’m curious to see how many tasks will have been completed by the time Do0ne is fully launched, and I’m excited to discover just how much I will have accomplished.

Shipaton: Do0ne Build Journal #1 - Project Setup & First Build Complete

friendship — Tue, 09 Sep 2025 07:15:25 +0000

Project Goal

For Shipaton 2025, the key objective is to build a fully functional app in a very short timeframe. It not only needs to work flawlessly but also look visually appealing. Do0ne is designed to run on as many platforms as possible—not limited to just iOS and Android.

To achieve this, I selected the following tools and services for development.

1. FlutterFlow
The core development of Do0ne will be done with FlutterFlow (FF).

Multi-platform support: Build once, deploy to iOS, Android, Web, and even Desktop.
Automatic translation: Quickly localize Firestore data and UI text for multiple languages, enabling easy global expansion.
Easy Firebase integration: Firestore, Authentication, and Storage can be connected seamlessly.
Built-in support for RevenueCat & OneSignal: In-app purchases and push notifications can be integrated directly with prebuilt actions.
Rich UI components: Pre-designed templates, widgets, and themes allow for polished designs with minimal effort.
Custom Action/Widget extensibility: When built-in blocks aren’t enough, developers can extend functionality with custom code.

2. OneSignal
For push notifications and in-app messaging, OneSignal was chosen.

Multi-channel communication: Manage push notifications, emails, and SMS all in one place.
Advanced targeting: Deliver personalized notifications based on user attributes and behavior.
In-app messaging: Display contextual messages inside the app triggered by events like sign-in or purchase completion.
Analytics & optimization: Monitor delivery stats in real time and run A/B tests to improve performance.

3. RevenueCat
In-app purchases and subscription management are handled by RevenueCat.

Cross-platform purchase management: Unifies App Store, Google Play Billing, and Stripe under a single API.
Product / Offering / Package model:
Product: A subscription or purchase item registered in the app stores.
Offering: A collection of products grouped into what users see as a package.
Package: A specific price and duration combination (e.g., monthly, yearly).
This structure allows for flexible pricing strategies and promotions.
No custom backend required: RevenueCat handles receipt validation and syncs subscription states automatically.

4. Firebase
Data and authentication are primarily managed through Firebase, which integrates tightly with FlutterFlow.

Firestore: A real-time database for storing logs, messages, and other user data.
Authentication: Easy setup for Google, Apple, Kakao, and other social logins.
Cloud Functions: Write serverless backend logic for APIs and data processing.
Hosting & Storage: Efficient deployment of static files and image storage.
Seamless FlutterFlow integration: Firestore collections can be directly bound to UI components, speeding up development.

Summary
On the first day, I successfully connected all the major services and built a working version 1.0 of the app. Below are the screenshots of this initial build. While it currently includes only the core functionality and will need many more features in the future, I’m quite satisfied with the outcome—especially considering it was created in just a single day.

Shipaton: Do0ne Build Journal #1 - Project Setup & First Build Complete

friendship — Tue, 09 Sep 2025 06:51:29 +0000

Project Goal

To achieve this, I selected the following tools and services for development.

1. FlutterFlow
The core development of Do0ne will be done with FlutterFlow (FF).

Multi-platform support: Build once, deploy to iOS, Android, Web, and even Desktop.
Automatic translation: Quickly localize Firestore data and UI text for multiple languages, enabling easy global expansion.
Easy Firebase integration: Firestore, Authentication, and Storage can be connected seamlessly.
Built-in support for RevenueCat & OneSignal: In-app purchases and push notifications can be integrated directly with prebuilt actions.
Rich UI components: Pre-designed templates, widgets, and themes allow for polished designs with minimal effort.
Custom Action/Widget extensibility: When built-in blocks aren’t enough, developers can extend functionality with custom code.

2. OneSignal
For push notifications and in-app messaging, OneSignal was chosen.

Multi-channel communication: Manage push notifications, emails, and SMS all in one place.
Advanced targeting: Deliver personalized notifications based on user attributes and behavior.
In-app messaging: Display contextual messages inside the app triggered by events like sign-in or purchase completion.
Analytics & optimization: Monitor delivery stats in real time and run A/B tests to improve performance.

3. RevenueCat
In-app purchases and subscription management are handled by RevenueCat.

Cross-platform purchase management: Unifies App Store, Google Play Billing, and Stripe under a single API.
Product / Offering / Package model:
Product: A subscription or purchase item registered in the app stores.
Offering: A collection of products grouped into what users see as a package.
Package: A specific price and duration combination (e.g., monthly, yearly).
This structure allows for flexible pricing strategies and promotions.
No custom backend required: RevenueCat handles receipt validation and syncs subscription states automatically.

4. Firebase
Data and authentication are primarily managed through Firebase, which integrates tightly with FlutterFlow.

Firestore: A real-time database for storing logs, messages, and other user data.
Authentication: Easy setup for Google, Apple, Kakao, and other social logins.
Cloud Functions: Write serverless backend logic for APIs and data processing.
Hosting & Storage: Efficient deployment of static files and image storage.
Seamless FlutterFlow integration: Firestore collections can be directly bound to UI components, speeding up development.

FlutterFlow: My Experience Publishing a Package to pub.dev and Integrating It with FlutterFlow

friendship — Wed, 03 Sep 2025 07:08:22 +0000

Work Objectives

It was necessary to determine whether users had enabled the custom keyboard implemented as a keyboard extension in Log0ne.
I thought this feature would be repeatedly needed in similar types of apps I plan to build in the future.
I decided to publish a keyboard extension checker directly on pub.dev and integrate it for use.

https://pub.dev/packages/keyboard_extension_checker

After that, I added the published package to the FlutterFlow dependencies and used it in an Action.

I remember there used to be a menu in the Action editor where you could set package dependencies.
After the update, this has been moved to App Settings → Project Dependencies.

Through this process, I was able to confirm that creating and publishing a package on pub.dev can not only solve my immediate needs but also provide a reusable solution for future projects.

Integrating the package into FlutterFlow worked smoothly, and I now feel more confident about building similar features in upcoming apps.

What started as a simple requirement for Log0ne turned into a valuable experience that will save time and effort down the road.

Log0ne: Dev Journal - My Daily Development Journey

friendship — Tue, 02 Sep 2025 23:24:10 +0000

Why a Daily Dev Journal Matters

As developers, we solve countless problems and try new approaches every day. But without writing things down, it’s hard to remember exactly what we did or how we felt about it.

I often struggled with this myself:

I couldn’t clearly recall what I had worked on during a project.
Checklists or code comments felt unpleasant to revisit, so I avoided writing them.
I wanted to keep a development journal, but without the habit, it was difficult to sustain.

In the end, much of my day-to-day experience was lost, leaving little to reflect on later.

Problems Without Logging

When I didn’t keep a development journal, I ran into common issues:

Lost solutions: Fixes I had already found slipped from memory, leading me to repeat the same mistakes.
Unclear progress: After days or weeks, I couldn’t easily summarize what I had actually accomplished.
No trace of growth: Lessons learned and insights faded, making it harder to see personal progress.

How Log0ne Changed Things

Using Log0ne brought small but impactful changes to my workflow:

I now have a clear record of what I worked on and what I tried each day.
Unlike checklists, these notes became records I actually want to revisit.
By writing consistently, I naturally built a habit of journaling as part of development.
Over time, the logs formed a timeline of my development journey.

Different from To-Do Apps

At first, I wondered: “Why use this if I already have Todoist or Notion?”

The difference became clear:

To-do apps = plan forward (what I will do).
Dev Journal = reflect backward (what I actually did).

To-do apps manage the future; a Dev Journal captures the past. That difference makes a big impact on growth.

The Benefits I’ve Gained

By keeping daily logs in Log0ne, I’ve noticed several advantages:

Clarity – At the end of the day, I know exactly what I accomplished.
Fewer repeated mistakes – Past entries remind me of what I’ve already tried.
Better retrospectives – Weekly and monthly reflections became more effective.
Peace of mind – Offloading ideas and thoughts gave me more focus.
Habit formation – Writing logs turned into a natural part of my daily routine.

Closing Thoughts

Log0ne isn’t a complex tool, but it became a simple and powerful way to keep track of my daily development journey.

For me, it turned forgotten experiences into records worth revisiting. Instead of bare checklists, I now have logs that capture both the work and the lessons. Over time, these small entries became visible traces of my growth as a developer.

Writing a daily development journal no longer feels like a chore—it has become a natural habit.

FlutterFlow: Handling App Lifecycle to Run Actions on Foreground Transition

friendship — Mon, 01 Sep 2025 06:30:52 +0000

In FlutterFlow, pages do not provide a built-in Foreground Listener event.

Problem: Logs entered through the custom Log0ne keyboard need to be saved into the app’s internal data. However, since a keyboard extension cannot directly access the app’s data, we used UserDefaults to share the entered logs between the keyboard extension and the app. When the user launches or switches back to the Log0ne app, the logs from the keyboard extension are saved into the app’s data.

Solution

Create a custom widget called ForegroundListener. The widget takes an action as a parameter, which will be executed when the app returns to the foreground.

class ForegroundListener extends StatefulWidget {
  const ForegroundListener({
    super.key,
    this.width,
    this.height,
    this.onForeground,
  });

  final double? width;
  final double? height;
  final Future Function()? onForeground;

  @override
  State<ForegroundListener> createState() => _ForegroundListenerState();
}

class _ForegroundListenerState extends State<ForegroundListener>
    with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      widget.onForeground?.call();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
    );
  }
}

Place the custom widget on any page where you want to detect foreground transitions and run an action. In the property panel, set its size to 0 so it remains invisible, and pass the desired action as a parameter to be executed when the app returns to the foreground.

This way, logs entered through Log0ne’s custom keyboard extension can now be properly processed within the app.

FlutterFlow: My Experience Launching an iOS App with FlutterFlow

friendship — Sat, 30 Aug 2025 10:38:30 +0000

App Introduction

Log0ne: Your Personal Note Assistant
Most note apps feel too heavy, while journals are overwhelming. Log0ne fills the gap with micro-logging — fast, one-line logs that capture life as it happens.

It helps you build a living timeline of fleeting thoughts and emotions, one log at a time. (Currently available on iOS)

👉 Download on the App Store

App Design

The UI was built using shadcn library integrated into FlutterFlow.
It helped maintain consistent components and handle dark mode easily.

Issues I encountered and how I solved them

1. Keyboard Extension
Implemented a custom iOS keyboard extension.
Logs typed via the custom keyboard had to be processed once the app became active.
To solve this, I created a custom ForegroundListener widget
that detects when the app is active and fetches the stored data from the keyboard.

2. Detecting Custom Keyboard Activation
I needed to detect if the custom keyboard was enabled.
Since there wasn’t a direct solution, I built and published
keyboard_extension_checker on pub.dev,
then integrated it with FlutterFlow. It was a fun approach.

3. CloudKit Realtime Sync
Implemented realtime saving and synchronization of Log data across devices using CloudKit.
The sync logic runs as an Action Block triggered at the moment of log creation or update, ensuring instant and consistent data sync.

4. RevenueCat for Subscriptions
Built a subscription-based billing system using RevenueCat.
At first, the concept of registering items in RevenueCat was a bit confusing, but once resolved, the integration with FlutterFlow turned out to be straightforward.

5. OneSignal Push Notifications
Added in-app push notification functionality using OneSignal.
This documentation was especially helpful during setup.

Conclusion

FlutterFlow is a convenient and powerful tool.
Especially from a design perspective, it allowed me to easily create beautiful screens.
Some features couldn’t be handled solely with Action Blocks,
but with Custom Actions and Widgets, I was able to implement everything I needed.
In the end, I was able to build an app that I’m fully satisfied with.