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 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?
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.
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.
- Basic understanding of Flutter (if you’re a complete beginner, many of us at Flutter Buddies can recommend App Brewery’s course on Udemy — https://www.udemy.com/course/flutter-bootcamp-with-dart/)
- Basic understanding of Git (https://www.freecodecamp.org/news/what-is-git-and-how-to-use-it-c341b049ae61/)
- A GitHub account — https://github.com/join
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’.
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
Next, create your own folder under
/lib/widgets/user_widgets/ and create your own
.dart file (e.g.
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
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
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.
- 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.dartand 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.
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.
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
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.
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.
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.
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.
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