Leaf: Flutter Social Media App — Part 1: Getting started

7 min readNov 21, 2019

Hello, good people! Hope you’re having a wonderful day! Today I’m going to start building an app using Flutter. I encourage you to follow along with me.

Today I’m writing about

Setting up the development environment
Creating a flutter project
Running the default flutter application
Setting up source control using Git
Hosting a public repository in GitHub
Setting up continuous integration using Travis CI

Hope you’re excited. It’s going to be an amazing journey. We have a LOT of ground to cover. So, without any further delays, let’s get started!

Step #1: Environment Setup

First thing’s first. Before we can start building an app using Flutter, we need to setup the development environment. This needs to be done only once. For this we’ll need the following things:

Flutter SDK (Duh!)
An IDE (Android Studio) or text editor (VS Code, Sublime, Atom etc. I’ll be using VS Code)
Extension of the IDE or text editor that’ll make it support flutter.
Set up an Android device for running the app (emulator or physical device)

The official flutter doc covers the installation portion rather well. So, I’m not going to write about it again. Follow the documentation and come back here when you’re all done. (Don’t worry I’m not going to get started without you. I promise to wait right here! :D )

Once you’ve installed everything try running the following command in your terminal.

$ flutter doctor

If the output look something like the following you’re good to go. Let’s move on to the next step!

Project creation

Got the environment setup? Nice.

We can now proceed with creating the project. It’s relatively easy to do. I mention 2 ways here. Do either one to create the project.

VS Code: Press Ctrl + P and then type the following and press enter:

> flutter: New Project

Then specify the name of the project and the directory where we want to put it.

2. Terminal

$ flutter create [app name]
$ cd [project directory]

The [app name] will be leaf for my app. You can choose to name it whatever you want. This is the name your app will have throughout its life.

Running the app

*le App

By default, flutter creates a counter app that can be run immediately. And we are going to run it, to make sure that there were no problems with the setup or other stuff (like Android SDK problems or device related issues). So, connect a physical device or run it in an emulated device. 2 ways to run the app are:

VS Code

Press Ctrl + F5 or just F5 to run the app. Select a device if multiple devices are found.

Terminal

$ flutter devices # Checks to see if there are any devices that can run the app
$ flutter run # Runs the app on the device found

Once you do either of the two, your app should be running and ready for use.

If the app doesn’t run and you’re facing some issues then it’s best to google about the issue. Stack Overflow and other sites will have tons of answers to any of the problems at this stage.

Useful tip: Get comfortable with googling, finding and browsing through answers on stack overflow and other sites. Believe it or not it’s an extremely useful skill to have. But if you’re really desperate consider commenting here. Others might have solution to the problem you’re facing.

Source control using Git

So our project runs. Awesome! Now we need a way to manage the source code.

Why?

Because we’ll be constantly changing the project. So we need a way to maintain different snapshots of the projects. You could manually do this by making a separate copy every time you change something (Don’t ever do this. EVER!) Not only is this inefficient, it’s simply a waste of time and energy. It’s hard to maintain and even harder to search. Just use a source control system. Let it take control.

Git be like

I’ll be using Git to manage my project and I suggest you do the same. But if you have experience with some other source control system, then by all means, use it. To setup project with git do the following:

Download and install git if it isn’t in your computer. Get it here!
Setup your user name and email for git. To do so run the following commands in your terminal.

$ git config --global user.name [name]
$ git config --global user.email [email]

3. Setup git source control for the project.

$ cd [project directory path]
$ git init # run while in project directory
$ git add . # Basically we’re staging everything in the project
$ git commit -m “initial commit” # Saving a snapshot of our project

Repository hosting using GitHub

I suggest, using GitHub to host your git repositories. If anything were to happen to your local machine, your project would still be intact and OK.

Hosting in GitHub

Create an account in GitHub if you don’t have one already.
Create a new repository.
Copy the repository URL to add as a remote to your project.
Go to your project directory in your local machine and type the following command to setup the remote with the previously copied URL.

$ git remote add [remote name] [repository url]

Travis CI

What’s a CI?

CI or Continuous Integration is a system to automate testing and deployment. Travis is one such system.

What does Travis do?

Travis will run the tests we will write and check if the code in the latest commit passes all these tests. Upon finishing the tests it’ll notify us about the result through mail. We use a CI to save us the trouble of manually running tests.

Setting up Travis CI

Create an account in Travis website online.
Link your GitHub account.
Import the repository created in the for this project.
In your local machine go to the project. In the main project directory create a file named .travis.yml
In it paste the code below and save it.

I learnt about Travis from Yegor Jbanov’s article. Read it here, if you want to know more.

Pushing code to GitHub

If your Travis CI is setup and connected with your repository run the following command to save your project into GitHub.

$ git push -u [remote name] master

Once you run this command you will see in your Travis account web page that the tests are being run. As we didn’t change anything on the default project, all the tests should pass and a green tick should be visible.

If you take a look at your commit history in your GitHub project repository, you’ll also see a green tick there. This also signifies the same thing.

Now, you should have your project backed up to GitHub. We can now experiment to our hearts content. Cause if we mess up, we can always go back to our previous commits.

Useful tip: Source control is an extremely useful tool. Learn how to use it. This series isn’t going to cover basics of source control. But don’t panic! Here are a few helpful articles to get started with Git and GitHub:
1. An Intro to Git and GitHub for Beginners by Meghan Nelson
2. Follow these simple rules and you’ll become a Git and GitHub master by Ariel Camus
3. A developer’s introduction to GitHub by Flavio Copes
Go through them to learn source control using GitHub and Git.

Summary

That was a lot of stuff we just went through. But for now we’re done.

So whenever you’re starting with a new project you’ll do the following steps:

Create the project.
Run the project to see if it works.
Setup source control.
Host the repository.
Setup CI (Optional)

These are the steps you’re going to be doing for any project you create with flutter, regardless of what type of app it is. This is the foundation to everything that’s going to come afterwards. I know we haven’t coded anything at all. And we haven’t even touched flutter SDK. But this was important! A good foundation is critical to a strong building.

Thanks for reading. Stay happy. Stay safe. Happy coding! See you in tomorrow’s article.

Important links

Support me by

Applauding and sharing this article.
Following me in GitHub and Medium.
Starring the GitHub project.
Starting discussions regarding this project.