How to make your first app with flutter?

February 22, 2022June 9, 2022 ZeeshanAli 179 Comments

Let’s list the things you need to build your first real-world mobile app:

Visual Studio Code(can also use android studio but we will be using visual studio)
Flutter SDK(latest version)

Visual Studio Code

Download VS Code

Open your browser and search visual studio code in it or you can click here to go directly to vs code site. After that, you have to click on the download icon and select the windows option. It will start downloading and after it finishes, then click on that file and read then accept the agreement. After that, you will be asked to set the location. After one or two steps it will give you an option to start the installation. Click it and wait for it to be completely installed.

Launch VS Code

Click the Finish button after installation is done and now you can search the name vs code in your search box. It will appear. Click on it and wait for it to open. Congrats, you have successfully installed VS Code in your pc.

Flutter SDK(software development kit)

Download it

Open your browser and search flutter SDK in it or you can click here to go directly to the flutter site. After that, click on the get started button and choose the windows option then you will be redirected to a page where you will be shown a button through which you can download the SDK. Just press it and the downloading process will start.

Unzip it

After it is completed, go to the location where it is saved and unzip the file. After unzipping, you will see a folder named flutter. Congrats, you have successfully downloaded the flutter SDK.

Let’s install it now

Copy the bin path

If you want, you can change the position of that folder or just leave it there. After that, you have to click on that folder, then click again on the folder named bin. When you are inside the bin folder then you have to copy the path.

Open environment variables

After that, click on the search box of your windows and type edit environment variables, click on it after it is shown in the suggestions. You will see two blocks, one will be named user variables, and the second one system variables. Tap on the path under user variables and click edit. After that, click on the new button and paste the path you have copied before. Now save it and select ok, then close all of them.

Install the flutter extensions

Now launch the visual studio code, you will see some icons on the left corner, click on the extension one, and type flutter in the search box, a flutter extension will appear, just install it. After it finishes installing, search dart and install this extension as well.

Flutter doctor in cmd

Now type flutter doctor in the cmd(type cmd in the windows search box) and press enter. You will see an open folder option on the left side, just click on it and you can select the location where you want all your flutter projects. Navigate to that disk/folder and if you want you can make a folder called flutter projects or any other name you want, then select this folder.

Open the terminal

Now you open the terminal by clicking on the top left horizontally listen to the text named terminal and inside that you will find an option called new terminal.

Let’s install our first flutter app

Use Ctrl+Shift+P

Let’s see how you can create your project. You have two options for creating your project, first one is that you type Ctrl+Shift+P and type flutter, then select flutter new project, it will ask for a folder where you want your project to be, and then just give the name of your project(name should be in lowercase and without spaces), enter it and it will start creating your project.

Use flutter run

The second option is to write flutter create your project name in the terminal and press enter. After the creation of the project is completed, you will see a list of folders on the left side, click on the lib folder, you will see a file named main.dart, just click on it. This is the default app screen that flutter creates for you.

Connect your android phone

Now in order to run your app on a mobile phone, just connect your android phone using a USB cable to your pc, and either you can press Ctrl+f5 or you can write flutter run in your terminal and press enter. Now your project is building, it will take a little longer for the first project creation, maybe a few extra minutes but it will build eventually.

Finally installed

After it is completed, you will see an app installed on your android phone. If you are still with us then congrats to you for successfully building your first flutter app. A simple counter app, in which if you click on the bottom right corner rounded blue-button having an add icon in its center, the number will increase.

Note

Don’t worry we will understand how the functionality is performed and how the number is changing just upon clicking on that bottom right corner button. We are going to cover everything from simple texts to a list of blocks, making beautiful designs and making them responsive so they can change their size according to different screen sizes. We will try to pour every drop of knowledge that we have gained through building beautiful apps. In the next articles, we will cover how different widgets work in flutter and how to use and customize them. Feel free to share your suggestions with us by commenting. Thanks for reading this article. Let’s see you at our next one. Thanks.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.