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

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:

1. There were no built-in UI options to style the timer text.
2. 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.

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

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

1. 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.