How to upload project from FlutLab to GitHub (step-by-step instruction)
This article is about simple integration between GitHub(cloud-based Git repository hosting service) and FlutLab(Flutter online IDE).
When you just creating your project from a codebase, it is connected to internal FlutLab storage where you can create and restore Project snapshots, just like in some RPGs. It’s very easy and intuitive for beginners because they don’t have to know Git for such operations.
But, if you know Git, and want to use your own repo as a project storage, you can easily switch gears. This is what we’re going to do step by step.
Let’s start.
- Go to FlutLab and open your project. Then press the “GitHub” button.
2. Connect your GitHub account in the opened window. FlutLab is doing it in a standard manner — with GitHub Application:
3. Great! Now you can “Create a new repo from the project”.
4. Fill in two fields: Repo Name and Branch name. Flutlab will do the following:
- it will create a new GitHub repo with a name provided by you
- it will create a master branch from the current state of your project
- it will fork a new feature branch from master to accommodate your upcoming changes.
FlutLab is using a simplified GitFlow model where all new changes are being committed to a feature branch, forked from the master. When the feature is ready, you can merge it to the master and then fork a new feature branch for the next change and so on.
5. Now you should see the message about a successful connection to the new GitHub repo. Also, at the bottom of a FlutLab page, you will see the name of your current feature branch — “demo” inside the blue status bar:
6. Go to GitHub and check that your project was created there:
7. Your new branch “demo” is here too
8.Ok! Let’s edit our code ;) Let’s do some changes inside README.md.
9. It’s time to make a commit. We can do this with Project snapshots:
10. Choose “Create a snapshot”:
11. Give a name to the snapshot and press “Save”.
12. You just created your first commit :)
13. Go to GitHub and select branch “demo”. You can see your new commit here!
14. It’s time to sync our feature branch back to master. Let’s create a Pull Request (PR). Open GitHub menu and select “Open PR to base branch”.
15. Fill all the fields in the opened window. First two of them will be populated automatically from the current master and feature branches. The 3rd field is the name of PR, how it will be shown in GitHub. The last field is the name of the merging commit. Click “Create”.
16. PR successfully created. You can immediately see that the bottom status bar has changed its color to red. This is mean that this feature branch is “closed” for further commits, according to the GitFlow model.
17. Back to GitHub. You can find your PR inside the Pull requests tab. Open it. Check your file changes and press “Merge pull request”.
18. Great! You just finished your GitFlow circle!
19. What’s next? A new feature and its branch! Fork from the existing branch:
20. Give the name of your new feature branch:
21. New branch successfully forked. In the bottom status bar, you can see the name of a new branch on the blue background. It’s ready to accept any changes!
Don’t stop! Develop your fantastic Flutter Apps with the help of FlutLab and GitHub!