Using Flutter and Ruby on Rails to Build a Minimalist Project Management App - My Experiences

Here's a technical overview of how I used Flutter and Rails to built a minimalist app to manage work for my many unrelated projects. I ran into a number of issues along the way, but overall it turned out really great.

Well known names like Monday.com, Trello, Asana, ClickUp and plenty more may feel like they have cornered productivity app space market share. Monday.com is especially popular with businesses, and their software is well put together. I've dabbled in all of these apps, but for personal use I decided to go a different route. I did this because of the overwhelming amount of bloat in these professional grade apps. Just creating an item is difficult b/c there are so many features. I work independently as a solo/indi developer, and I needed a solution to manage my projects that wasn't cumbersome to use.

I also have other non-software projects - I'm building a mini bike and working on a making a backpack. All these projects have tasks that I need to organize and check-off. Writing down each task gives me path forward - a small step that I can do each day. I don't have to do the whole thing today; I can just do one of the tasks in my list and then mark it completed.

Writing My Work Items Should Be Easy
Trying to organize simple projects in Monday or Asana was overkill - I don't need that much capability, and it make creating a work item too much work. The juice wasn't worth the squeeze as some would say.

Why I chose Flutter for the mobile app
I'm familiar with cross platform mobile app frameworks, and I picked up Flutter and use it for everything now. Nothing else I've seen comes close to Flutter. Once you learn it, it's super fast to get an MVP up and running. Everything in Flutter is repeatable using Flutter Bloc. You can make a component that does api calls, communicates with other components, and you can do that the same way for all future components. You can make stateless widgets, the functionality just goes on and on.
Flutter Files - this is a scaffolding tool for generating Flutter Bloc templates. Flutter Bloc is my preferred way of building apps with Flutter. It takes a lot of the decision making out of the process by giving you a framework like roadmap for doing everything. It's kind of like a framework on top of a framework if that makes sense.

Generating a Page with Flutter Files
Here are some screenshots of how I do it. I haven't used all the options here - I just do the same thing each time. This is kind of a high level overview - I'm not going into the actual programming. If you are a developer, you'll figure it out.

This I get another option, and I choose "Mutable", and then I get a set of files:

Everything is an event
For every action in the UI, you create a new event in "you_awesome_event.dart". You copy the state, modify it, do an api call, update another component - whatever you need to do. Then you yield a new state, which updates the UI. It's really a great way to manage state.

Defining State in "you_awesome_state.dart"
The cool thing about a state file, is you define a state so then you yield that state each your event. You can create as many states as you want, and you can inherit from other states. It's super cool, and it organizes everything about your workflow.

Flutter and really Dart is type safe and null safe - so it will tell you if you have a variable that could be null when you're expecting a value. So you have to define all of that. If something can be null, you have to define it with a varName? question mark meaning that it could be null. In the UI, you have to handle possible null values if you've made them possible null. This null safety was required in Dart 3 I believe, and it takes some time to get used to, but I really think it's for the best.

Loading state for initial page load
The following bit of code loads the initial page view, and it yields InYouAwesomeState(0, 'Hello World'). The zero is the version of the state, so it starts at zero, and then you can trigger a re-render by incrementing this version number in another event. Flutter Bloc works by copying the old state, and then rendering a new state. But something in the state has to change for the UI to update, so always incrementing that version number will always trigger a re-render in the UI.

class LoadYouAwesomeEvent extends YouAwesomeEvent {
   
  final bool isError;
  @override
  String toString() => 'LoadYouAwesomeEvent';

  LoadYouAwesomeEvent(this.isError);

  @override
  Stream<YouAwesomeState> applyAsync(
      {YouAwesomeState? currentState, YouAwesomeBloc? bloc}) async* {
    try {
      yield UnYouAwesomeState(0);
      await Future.delayed(const Duration(seconds: 1));
      _youAwesomeRepository.test(isError);
      yield InYouAwesomeState(0, 'Hello world');
    } catch (_, stackTrace) {
      developer.log('$_', name: 'LoadYouAwesomeEvent', error: _, stackTrace: stackTrace);
      yield ErrorYouAwesomeState(0, _.toString());
    }
  }
}

I use this system to make pages
Each set of files generated by the Flutter Files create a screen. It has a you_awesome_page.dart and a you_awesome_screen. The page has the navbar, and then it renders the screen as the body. You can combine these two, but I think they are best organized like this.