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,
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:
- 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.
Comments
Post a Comment