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

%[https://github.com/AppFlowy-IO/AppFlowy] 

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](https://github.com/AppFlowy-IO/AppFlowy/issues/1186).

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

![Expected vs Actual UI Comparison](https://cdn.hashnode.com/res/hashnode/image/upload/v1665501031761/DUTmXfbLN.png align="center")

[Video demonstrating the issue](https://user-images.githubusercontent.com/71320345/192566299-f9b28dfb-3db1-4d80-b88b-1e58c974a637.mp4).

# 🔨Building the Project

The first step was to get a development build running on my machine. I sought out the [official build guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/environment-setup) 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](https://stackoverflow.com/questions/64901180/how-to-run-cocoapods-on-apple-silicon-m1) 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,

```markdown
sudo gem uninstall cocoapods
brew install cocoapods
```

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

![A build of AppFlowy running, atop an instance of VScode](https://cdn.hashnode.com/res/hashnode/image/upload/v1665397812339/wHVY9QAMS.png align="center")

# 👨‍💻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:

![GridMultiSelectCell Widget Tree](https://cdn.hashnode.com/res/hashnode/image/upload/v1665405917699/-zt2IZ96o.png align="center")

Then I used Flutter's layout explorer to find that a `Wrap` widget ([docs](https://api.flutter.dev/flutter/widgets/Wrap-class.html)), which houses some levels below in `GridMultiSelectCell` was responsible for the extra height.

![GridMultiSelectCell Widget Tree Culprit Highlighted](https://cdn.hashnode.com/res/hashnode/image/upload/v1665429510093/FxJ0x35N6.png align="center")

Then I found the code responsible for generating that `Wrap`.

```dart
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.

![Extra Height Eliminated](https://cdn.hashnode.com/res/hashnode/image/upload/v1665501379473/XPkSsC-jI.png align="center")

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

![Vertical Spacing Added](https://cdn.hashnode.com/res/hashnode/image/upload/v1665501217525/Ked8zokpv.png align="center")

Below is the final code:

```dart
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](https://github.com/AppFlowy-IO/AppFlowy/pull/1261). 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](https://www.linkedin.com/in/sahej-a-singh/), 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 at blog.sahej.io. (There are no others at the time, but there will be more in the future ;) )

Wish you a happy day ahead!