Introduction
It has been over 6 months that Flutter 1.0 was released by Google and the Flutter Community is growing day by day. At the time of writing this article Flutter 1.5 is available. Now, Flutter is pretty stable and is gaining attention from developers all around the world.
Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase. You can check it out on the Flutter Official Website.
So, if you haven't yet started developing apps with Flutter, you should get on-board as soon as possible because it is better late than never. For the people who have very little knowledge about Flutter and what it is about, you have come to the right place. I will start for the very beginning.
Many people who want to get started with Flutter app development have a big confusion that Flutter is a language. NO, Flutter is not a language as I have also stated before that Flutter is a toolkit. The language used in Flutter app development is DART.
Things you need to install
Flutter: You will get a detailed guide on how to install Flutter on your dev machine from this link. Please follow the installation guide thoroughly and don't dare to skip any steps.
Android Studio: Another thing that you must install is the Android Studio, which you will need for some part of the Android customization [ Like setting proper launcher icon for the app and some other things ] and if you want to use the Android emulator for testing your app.
Xcode: If you’re on a Mac, you should install Xcode, which you can get from the app store here. You will be needing Xcode to run and test iOS side of your Flutter app as along with it comes the iOS simulator.
Which IDE should you use ?
There are two most famous IDE(s) used for Flutter Development:
1) Android Studio
2) VS Code
Both are really good for Flutter Development and have their own advantages and disadvantages. For the Android developers out there they would be more comfortable with Android Studio so they should go with it. And if you want to publish only the Android version of the app, then you should definitely go with the Android Studio.
VS Code is known as a very powerful code editor, so there is a strong point to go with it as it would always remain updated with the latest version of Flutter and Dart.
Let's run our first Flutter app
First of all, you should run this following command to check if there are any dependencies you need to install to complete the setup:
If you have added the path to Flutter properly by following all the steps, then you can use the keyword "flutter" in your code editor terminal or your system terminal. Now, start your IDE.
In Android Studio, you can start a new Flutter project by the following steps:
1) Clicking on "Start a new Flutter project" option.
2) Select "Flutter Application" option from the list. Then, click "Next".
3) Enter the name of the app in "Project name" text field. You do not need to change anything in the "Flutter SDK path" as it will be pre occupied. (If it is empty, then you will need to provide the path where you placed your "flutter" folder, downloaded from GitHub).
4) Now, specify where you want to store this Flutter project. My suggestion is that, create a folder named "Flutter Projects" in your Desktop and provide the path in "Project Location" text field.
5) You can provide a description of the project in the "Description" text field. Then, click on "Next".
6) Enter "Company Domain" in the text field. If you do not have any specific company domain, then you can provide any name you like and end it with .com, .net, .org, etc. This domain is used to create a unique Package name of the app. Now, click on "Finish" and wait for the project build to finish.
After the build gets over, you will reach the following screen which will be occupied with the Flutter sample app.
Now, if you want to run the app on any device or emulator, first click on the dropdown button where it is written "<no devices>" on the top menu bar and then select the device you want the app to run on.
If you are running on a real device then first connect the device to your system and enable "Developer options" and turn on "USB debugging", then run the app.
If you are running in the emulator then give some time for emulator to start.
Now, press the green play button on the top bar in Android Studio to run the app on your device.
In VS Code you have to use the terminal in the code editor or on your system to create a new flutter project by using the following command:
Navigate to the created my_app directory:
Then you can run the starter app on your connected device or emulator by using F5 key. You can also run the app to any device through the terminal by using the following command:
Conclusion
This sample app is just a basic counter app, which increments when the "+" FAB (Floating Action Button) is pressed. If you have successfully run the app on your device, then you have properly set up Flutter on your system.
At this point of time you might not be understanding any part of the code. So, in my next article I would be showing you how to write a Flutter app from scratch.
Most probably, I will be posting at least one article on Flutter every week. So, if you do not want to miss any article please subscribe to my blog.
If you have any doubt regarding the article feel free to ask in the comments section below.