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.
You might also like:
Best JavaScript Guide Book For Developers
Best React Native Book-Start Developing Hybrid Apps
Flutter Textfield Onchanged Explained With Example-Best Flutter Guide
Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide
Flutter Textfield Border Radius Explained With Example-Best Flutter Guide
Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022
How To Change Flutter Textfield Border Color-2022 Guide
Flutter Textfield Align Center With Example-2022 Guide
How To Change Flutter Textfield Color-2022 Guide
Flutter App Development Cookbook: Over 100 Techniques And Solutions For Hybrid App Development
How to Choose the Right React Native Elements for Your Next App- 2022 Guide
Why Should I learn React Native Framework In 2022
Flutter App Development In 2022: Future of Mobile App Development?
Flutter App Development In 2022: Future of Mobile App Development?
How to make your first app with flutter?
Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
Flutter Vs Android Studio: Which Is Better For You In 2022?
Flutter App Framework: The Future of Mobile App Development 2022?
Top Benefits Of Using Flutter Mobile App Development In 2022
How To Customize Flutter Container Border? 2022 Guide
Top Secrets About Flutter Development Kit-2022 Guide
Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter
ListView Builder In Flutter Apps
How To Design Beautiful AppBar in Flutter
How To Use Rows In Flutter Apps
What’s New in Flutter 2.10 release?
How To Use Columns In Flutter Apps
How To Use Beautiful Lottie Animations In Flutter App
Flutter Range Slider Beautiful Customization With Example | Syncfusion
Flutter Carousel Slider Beautiful Customization With Example
Flutter Glassmorphism Login UI Template With Source Code
Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
Flutter App Stack Widget Detailed Explanation With Example
Textfield In Flutter App Detailed Explanation With Example
Comments on “How to make your first app with flutter?”