How I Made my First Open Source Contribution

👀Finding a Project

I occasionally browse GitHub like scrolling through a social media app. A few days ago I stumbled upon an issue that I thought I could solve. This was in a project called AppFlowy. As described by its GitHub page,

AppFlowy is an open-source [customizable and private] alternative to Notion. Built with Flutter and Rust.

I initially found out about AppFlowy about a month before the time of writing. I loved it but I did not start using it because it did not feel ready for everyday use yet. I want AppFlowy to grow so I was excited to get an opportunity to contribute to it. Moreover, the frontend is written in Flutter which I am very familiar with. Familiarity with the tech stack certainly helped me with this first open-source contribution.

⚠️The Issue

I was looking at the issues marked good_first_issue and hacktoberfest, and ended up finding this one.

TLDR: In the table UI, when the column type was set to a specific type, undesirable extra vertical spacing was added to rows. You can see the before & after fix comparison below.

Video demonstrating the issue.

🔨Building the Project

The first step was to get a development build running on my machine. I sought out the official build guide and followed the steps.

Of course, I ran into an issue. I am building on an M1-based Mac, and the installed version of cocoapods on my machine refused to run. It was expecting the x86 version of some module (or something), which was (obviously) missing on my ARM64-based machine. Luckily a quick search took me to this StackOverflow page, and it was a quick and easy fix.

Turns out that the Homebrew version of cocoapods runs flawlessly on ARM64 Macs. So I just had to do,

sudo gem uninstall cocoapods
brew install cocoapods

And I had a build running, setting me up for my first open-source contribution!

👨‍💻The Code

Now I had to find out the code responsible for table UI. I reproduced the issue and used Flutter's widget selector tool to find out the culprit widget. This lead me to the aptly named GridMultiSelectCell widget. Here is the widget tree:

Then I used Flutter's layout explorer to find that a Wrap widget (docs), which houses some levels below in GridMultiSelectCell was responsible for the extra height.

Then I found the code responsible for generating that Wrap.

final children = widget.selectOptions.map(
  (option) {
    return SelectOptionTag.fromOption(
      context: context,
      option: option,
    );
  },
).toList();
 
child = Wrap(
  spacing: 4,
  runSpacing: 2,
  children: children,
);

The spacing: 4 in the constructor for Wrap was responsible for the extra height for some reason. As far as I know, it should just be adding horizontal margins between the children elements. Anyway, commenting out the spacing attribute eliminated the extra height but, unsurprisingly, horizontal spacing between the children was also eliminated.

I added that space back by giving each child a margin, which was accomplished by wrapping the SelectOptionTag constructor in a Padding widget.

Below is the final code:

final children = widget.selectOptions.map(
  (option) {
    return Padding(
      padding: const EdgeInsets.only(right: 4),
      child: SelectOptionTag.fromOption(
        context: context,
        option: option,
      ),
    );
  },
).toList();
 
child = Wrap(
  runSpacing: 2,
  children: children,
);

That was NOT a lot of code. I certainly did get off easy for my first open-source contribution.

✅Creating a Pull Request

I was assigned a mentor when the issue was assigned to me. As this was my first open source contribution I did not want to make any mistake so I reached out to my mentor on Discord. I briefly summed up what I had done, and asked if I should do the fix in another way. He responded and said that my approach seems okay and I should create a pull request, so he could take a look at the changes.

So I staged, commit, pushed, and created a pull request. A few hours later it was merged and I had officially made my first open-source contribution and Hacktoberfest submission.

PS: I thought about if I should write this blog or not because it was a very small, minuscule, and easy fix. Anyways I felt really good and happy about the contribution, so decided to go ahead with it anyways.

✌️Thanks

This is it for this one.

Feel free to reach out to me on LinkedIn, or leave a comment to share your thoughts directly with me. I always welcome criticism.

If you enjoyed your read, then you may wish to check out my other posts.

Wish you a happy day ahead!