Flutter Buddies
Published in

Flutter Buddies

Your first contribution to Flutter Buddies

This article is going to guide you step-by-step through the process of contributing to the Flutter Buddies “Community App”. But first, a quick introduction…

Flutter Buddies

Flutter Buddies is a Discord community of Flutter Developers. The aim of the server is to meet fellow developers and discuss everything Flutter. There are also a number of ongoing projects which anyone is welcome to participate in. Join the Discord: https://discord.gg/mkp9GvW4e6

The Community App

The “Community App” is an app built by the Flutter Buddies community. The app contains info on upcoming events, active projects and most importantly, a list of members and their custom profiles (this is where you come in).

Why create your own profile?

Some existing profile pages

Learn how to contribute to online projects — Before joining Flutter Buddies I had no idea how to contribute to a project on GitHub. Contributing to the “Community App” was a great, low-stakes, tutorial on this essential skill every developer needs.

Practice your Flutter skills — Building a full app can be a bit much so having just a single page as a blank slate with a simple goal is a great way to try out something new or hone an existing skillset.

Engage with the community — Getting your profile up on the app is a good way of letting people know a bit about you.

The Guide

If you are comfortable with GitHub and want the TL;DR there are less verbose instructions in the project README — https://github.com/Flutter-Buddies/App.

1. Pre-requisites

2. Forking and cloning the repository

Before you can start making your profile page you need to essentially copy the code from the original repository (https://github.com/Flutter-Buddies/App) to your own personal repository (https://github.com/YourUserName/App). This is known as ‘forking’.

Top right of the Community App GitHub page — https://github.com/Flutter-Buddies/App

Once the code is in your own repository, you need to clone it to your local machine. The easiest way is to use your IDE (VSCode or Android Studio) but you can also use the command line.

3. Setup

Before you can start coding, there are a few things you need to do (these steps are also described in the README):

Firstly, you need to copy .env-example file and name the new copy .env (don't delete the .env-example). This is mandatory for the app to build. If you wish to contribute to the “events” part of the app, ask admins to give you the key. Then, put the key instead of XXX in your .env file.

.env and .env-example files

Next, create your own folder under /lib/widgets/user_widgets/ and create your own .dart file (e.g. firstname_lastname.dart).

At the top of the new file add part of user_widgets;.

Under that create a new class that extends WidgetInfo and overrides the getter methods like in the following example. Finally you’ll need to instantiate your WidgetInfo class.

The last step of the setup is to open /lib/widgets/user_widgets/user_widgets.dart and add part <path_to>/<your_file>.dart; to the bottom of the existing list and add your WidgetInfo object to the widgetInfoList list.

If you run into any problems, please feel free to message an admin on Discord.

4. Create your widgets

Now it’s your time to create your own page. However, if you’re looking for ideas it would be great to share something about yourself and/or showcase a custom widget.

Some guidelines:

  • Users must be able to navigate back so be sure to include a back button.
  • If you need a package, add it to lib/widgets/user_widgets/user_widgets.dart and include it in in your pull request.
  • Try to use stateful widgets, setstate and inherited widgets for state management, if you need a state management package be sure to ask.
  • You can add image assets, but keep the filesize as low as possible and try to keep your entire directory under 500KB, if possible.

5. Commit and push your changes

Once you’ve finished and are happy with your page you need to “save” it. To do this, you need make a new commit. This can be done through your IDE or through the command line. The steps are:

Stage changes → Commit changes → Enter commit message

Below is an example using the command palette in VSCode.

Stage changes
Commit staged changes
Commit message

You then need to “upload” this new commit to your personal GitHub repository. This is called pushing your changes. Again, this can be done through your IDE or the command line.

Push new commit
Select remote repository

6. Make a pull request

Lastly, you need to let us know that you would you like your changes added to the main repository. This is called a pull request.

This terminology is a little confusing but you are requesting us to pull your changes into our repository:

Main Repository ← Your Repository

To make a pull request, open up GitHub to your personal repository (e.g. https://github.com/YourUserName/App) and there should be a button to make a pull request.

Start the process of making a pull request

The next screen will give you an overview of your changes compared to the main repository. Here you can double check and make sure everything is as you expect.

Pull request overview

The last step is to leave a message to let us know about your pull request. It doesn’t need to be too detailed but make sure to include anything that might be out of the ordinary.

Pull request message

And that’s it! We may take a few days to merge your changes in but you’ll get a notification when we do.

If you come across any issues please feel free to message an admin or check our contribution guidelines.

What’s next?

There are a few active projects going on, all of which are looking for contributors, so check the Discord project channels or the GitHub repositories to see if there’s anything you like.

If not, and you’ve got a good idea for an app, send the community a message and it’s likely someone will like to join you on your journey.

Flutter Buddies also has weekly and monthly meet-ups for getting help or just talking about Flutter in general so make sure to join the Discord server if you haven’t already.

Join Flutter Buddies: https://discord.gg/mkp9GvW4e6

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store