Mooodify: The Home Page

In today’s story, we will start with from nothing to a functional home page.

Let’s discuss what should be the goals of today’s work:

• A Mood slider that will allow users to swipe to their desired mood.
• A button to set the desired mood.
• A date in text that displays the selected date.
• Forward/Backward buttons to change the selected date.

I am not discussing much about the architecture of the app in this story, I will discuss it separately as it is a separate topic.

Mood Slider

The idea of this slider is to use PageView widget to create a carousel slider, allowing users to swipe across the available moods.

I like the idea of being able to see other options (pages) hanging on the side, so I set the PageController to have a 0.8 of viewportFraction.

PageView(
  controller: PageController(viewportFraction: 0.8),
  ...  
)

Select Mood Button

The button is pretty straightforward, the idea is to set the mood for that particular date, and update the state of the widget to reflect the change.

void selectMood() {
  /// get the moood selected
  final selectedMood = moods.elementAt(moodIndex);
    
  /// update the moood selected through a service
  _moodService.addMood(selectedDate, selectedMood)

  notifyListeners(); // to rebuild the state.
}

Date Widget

The date widget will have three elements, the two buttons for changing the date, and the text widget to display the selected date in predefined format.

Forward/Backward buttons

Thanks to Dart awesome DateTime.add() and .subtract() method, we can easily go forward and backward by adding or substracting the DateTime object directly. Here is an example of going one day forward:

void forwardDate() {
  final tomorrow = selectedDate.add(const Duration(days: 1));

  selectedDate = tomorrow

  notifyListeners();
}

Displaying the date

I want the date to be in the format of “X, dd MMM yyyy”, where X is determined based on the date. I am handling this in the viewmodel, more about this in the architecture story.

String formatDate(DateTime now) {
  final date = DateFormat('dd MMM yyyy').format(now);

  /// if it is today or yesterday, show that instead of the day of the week
  final isToday = now.day == DateTime.now().day;
  final isYesterday =
      now.day == DateTime.now().subtract(const Duration(days: 1)).day;

  /// if it is not today or yesterday, show the day of the week
  final dayOfWeek = DateFormat('EEEE').format(now);
  final prefix = isToday
      ? 'Today'
      : isYesterday
          ? 'Yesterday'
          : dayOfWeek;

  return '$prefix, $date';
}

Conclusion

This is just a short update for this project, if want to follow along my month long journey, consider following me to get the latest update.

To check out the full development of this project, do check out the public repo of this project here: https://github.com/timsedev/mooodify.

Last but not least, I really appreciate any feedback in any form so do give some feedback if you have any.

That’s it for today, see you in the next story.