Flutter: Getting Started
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, because with it comes the Android toolchain, which is needed to run any Android app on a device and also for some Android customizations [ 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:
- Clicking on the “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 preoccupied. (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 the 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 will 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 Sign Up to my blog on my website.
The original source of this article is: https://www.souvikbiswas.com/post/flutter-getting-started
If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:
You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!
Happy coding…
Souvik Biswas
