Blog Application — Flutter — Part I
By: Pradyot Prakash
Tags: Flutter, Github, Flutter Ui, Blog App, Flutter App Development

In this part we will be seeing how to set up Flutter projects. This has been divided into various parts, which will help in understanding each step in more detail.

So, first, let’s take note of all the things which we will be using to move forward.

Flutter — Setup the Flutter framework into your system. The official Flutter website has all the details which will be required to set up it. Can go to https://flutter.dev/docs/get-started/install for the steps required for each platform. Any IDE which you are comfortable with. I will be using VSCode for this article but can use any other IDE also which supports Flutter. Make sure you also install the plugins required in the IDE to run and help you write code in the IDE. Usually, it’s Flutter and Dart plugin. Select a VCS system on which you will be using to push the code on the remote. I will be using GitHub. Can use any one of your preferences.

I think these are all the basic things that will be enough as we move forward. If anything is required will be mentioned in the article.

In this part, we will be setting up our VCS and the Flutter project.

So,

Step 1

Create a repository in your preferred VCS system.

The repository name is up to you. I will be giving flutter_demo. Have made it a public repository so that anyone can use it as a template for their project. Will change the repository into a template and share the link of the repo in the last part. When done create the repository. When it’s done an empty repository will be made for you. Now we will be adding our project into this.

Step 2

When the repository is done, it’s time to download the repository into your local system. We will be using GitHub Desktop for this. It’s an application provided by GitHub and is very helpful in managing your repositories. So download the application from https://desktop.github.com.

When downloaded, log in with our account. You will be looking into the below screen when you are logged in.

If not, still go to File -> Clone Repository option. You will get an option to select the repository which you need to clone and where it should be cloned in your local system.

When you click on clone it will start downloading your repository into your local system. And when done you will see the below screen if everything is successful.

Now it’s giving an option to publish branch because currently there is nothing in your repository. It’s just an empty box. But don’t worry we will be filling it with an awesome Flutter project very soon.

Okay by now your VCS system is done. So let’s get started with the Flutter project setup.

Step 3: Create Flutter Project

Open VS Code or any IDE according to your preference. And there will be different ways for how the project would be created. Let’s get started.

In your VS Code open the folder where you cloned the repository. And can follow the steps given in https://flutter.dev/docs/development/tools/vs-code.

So, after creating the project you will see in the file structure that new files had been added, like below

This is the initial setup by Flutter. You will see many folders and files created and would be wondering what are the use of all these. So let’s see what are the use of these folders:

android : This contains the android code which will help in compiling the android build. Can also be used to write android specific code.

: This contains the android code which will help in compiling the android build. Can also be used to write android specific code. ios : Use is the same as android. For iOS specific work.

: Use is the same as android. For iOS specific work. lib : That’s where all the magic happens. This will have the main.dart file from where the Flutter execution starts.

: That’s where all the magic happens. This will have the main.dart file from where the Flutter execution starts. test : This is used to write test code for your widgets and business logic.

: This is used to write test code for your widgets and business logic. web : If you are using the latest Flutter version then this folder will be created because after 2.0.0 Flutter supports web on the stable version. This also does the same work as android and iOS.

: If you are using the latest Flutter version then this folder will be created because after 2.0.0 Flutter supports web on the stable version. This also does the same work as android and iOS. pubspec.yaml : This will contain the dependencies, your project details, fonts, and assets.

These are all the files that you will be looking/working into when working on a Flutter project.

Step 4: Clode Structure Change & Cleanup

Now, you would probably don’t need the default project by Flutter. Probably. If needed still can follow some of the points.

Open pubspec.yaml file and delete all the comments. It’s not needed usually. But can see before deleting. It usually tells what each line is and how to add fonts and assets to your project.

OPTIONAL: Change the value of sdk: “>=2.7.0 < 3.0.0” to sdk: “>=2.12.0 < 3.0.0”. This will make your flutter project run on the latest Dart version. But keep in mind that it will enable the Null Safety feature into your project. And if any packages which don’t depend on Null Safety, you can’t use them. After you enable this, you will see an error in your main.dart file.

Ignore this as of now because we are going to make some changes anyhow for that file.

Now, it’s a good practice to ignore those files which are not required in your VCS system. Normally, all the auto-generated files are added to the .gitignore from before but still, some are left out. One of them is the pubspec.lock file. This is not required to be added to the VCS system. So let’s add it to the .gitignore file which is in your main project directory. Open the file and add pubspec.lock to the file list like below.

Now it will never be pushed to your repository.

Now delete the test folder since it’s not required currently. Will add it as we move forward.

Go to your main.dart file and remove all the comments first. And the MyHomePage class and also remove the error line after removing the MyHomePage class. Now can add the comment which you need. I usually write the below comments.

By now I think all the initial project changes are done. So now go to GitHub desktop and push your code. Before that write the commit message. After writing publish the branch. We are creating folders on our VCS so that we can upload other projects also for this article. After uploading your GitHub repo would be looking like below