What is Flutter? — Installation and first steps
A few years ago I heard about a new open source mobile technology being developed by Google but I didn’t pay enough attention to it then because I wasn’t <and wasn’t going to be> involved in the development of a mobile app.
Some months later, I heard about it again but I also heard that it is not only for mobile development, as it will also be able to be used for Web and Desktop too, and THAT caught my attention.
Flutter is “Google’s UI toolkit” <or just framework> which uses Dart as code language, has an engine written mostly in C++ and uses each platform’s SDK (Software Development Kit) to build the apps in a native and optimized way (according to comparisons with other frameworks).
Desktop development is not available just yet and Web development is only in Beta but as Flutter’s popularity continues to grow I decided to give it a try, so in this post I will guide us through the steps to install and start our first app.
Installing Flutter
First thing to do is install everything, to do so, go to Flutter’s “Get started” page and download the version for your platform (it can even be developed on Chrome OS). Then open the terminal and go to the desired installation folder, mine will be right inside the user.
Then, we should add Flutter to the PATH. One way to do it is to run in the terminal export PATH="$PATH:`pwd`/flutter/bin" but in this case It will only work in the current terminal window. If we want this to work at any time, we will have to add it to the $PATH.
To do this, open the rc file (if you are using Catalina, the file is named .zshrc and you might have to create it), which is a hidden file (How to show hidden files) located inside your user folder, and add the following line:
# Add Flutter
export PATH="$PATH:/Users/[PATH]/flutter/bin"Then, we can verify that the new path has been added with the following command:
which flutter
With a medical degree
The next part is even easier, just by running the following command, Flutter will tell you what your environment is missing to start developing.
flutter doctor
The result is like a bulleted list with everything necessary for Android and iOS development.
To install the Android SDK just install Android Studio (you can download it from the official website) and it should work just fine, and as I will be using VS Code, I will install the extension which enables the running and reloading of the apps, plus some more useful features for writing code.
Once Android Studio is installed, open it and create a new AVD (Create and manage virtual devices) so we can emulate the app (you can also use a connected device).
Once this is done, run the doctor command again and check if everything is ok. If you are still having problems with the Android SDK, go to “Configure > SDK Manager” and select the following checkboxes.
Last steps
Now is finally time to create the starter app. To do this, open VS Code, and open the command palette (“View > Command Palette” or Cmd+Shift+P) and select “Flutter: New Project”. This creates the basic structure of the app with all the necessary code and configuration files.
The last step is to press F5. If you don’t have the AVD opened, it will show you a list of the devices and just by selecting it, the AVD will start. The first time you run it, it takes some time to install everything that is needed, so don’t get nervous.
And there you go! Our first simple app is working and we can start playing with the code.
Conclusion
Of course I am no expert in the mobile department, but after seeing how easy to install is, the support it has in the community and the wide variety of platform possibilities it will give us, I am definitely giving Flutter a try.
