This is the first article in the Flutter for Beginners series, wherein we shall look at how we can develop a simple blog list mobile application with a single source code using flutter. In this article, we shall try to get familiar with what flutter is about and how we setup the environment for getting started.
What is Flutter?
Simply put, Flutter is a “tool” that helps us build truly native cross platform mobile applications with a single code base using a “single” programming language. The term “single” is stressed here because the words “native” apps and “single” code base never go hand in hand.
We know that there are two major mobile ecosystems used across the world – Android or iOS.
Android is an open-source operating system which needs its applications be developed using the Java programming language by default.
iOS is a closed-source operating system which uses either objective-c or swift programming languages for its app development.
When we talk about native applications which truly leverage the esthetics and features of their respective operative systems, we need to have our code written in Java or Swift or Objective-C.
Flutter efficiently solves this problem of developing “native” applications with a “single” code using a “single” programming language. The programming language used is Dart, which is developed by Google inspired from some of the best features of several programming languages such as JavaScript, React, Swift, C# and such.
Flutter is basically a framework built on top using Dart language, where we use Dart scripts to develop UI components and their interactions with the operating system. Flutter provides all the Widgets and Utility libraries which can help us in developing the features we would need to add to our systems.
Cool Features of Flutter
Everything is a Widget
In Flutter world, everything we see on an app view is a widget in action. Starting from the View container on which the app runs till the smallest possible component such as a text or a label; everything is built and considered in the form of Widgets.
Flutter provides libraries for almost all widgets and components which are frequently used in the applications. And we wire up all these widgets on our root view component, which is again a widget so as to weave one app screen.
Widgets are not Native Translated
Unlike other popular cross-platform native frameworks such as Reactive Native, the widgets provided by the Flutter library are NOT translated into their respective native equivalents in Android or iOS.
Instead, Flutter uses a “Custom Implementation of the View Components” wherein each and every view component represented by the widgets are drawn on the app screen pixel by pixel.
This provides flutter more control over what components are being drawn on the screen and how they are being presented to the user. This also adds flexibility to the applications when built and adds to the performance.
How to Install Flutter in your Machine
In order to start developing applications on flutter, we would need to install the latest flutter SDK which provides the tools and runtime for the flutter code to run. This installation also configures the dart programming language along with the bundle so no need to worry about that.
In order to run flutter applications, we would need to install Android Studio (for Android applications) and X Code (for iOS applications; can only be installed on a Mac machine) depending on what kind of operating system the application code shall be debugged.
You can select the respective operating system and download flutter from the official downloads page
Once downloaded, extract the zip file and copy the Flutter SDK contents to any directory (say C:flutter in windows) and add the path to the environment variables, so that the flutter commands are available globally in the system.
You need to install Android Studio to have the necessary tools for Android app compilation, and X Code for iOS app compilation. I’m using a Windows machine and I’m looking to build Android applications using Flutter, so I’ll install Android Studio in my machine.
You can download the latest version from the official downloads page
Once the prerequisites (Android Studio, X Code or both) and Flutter SDK are downloaded and installed, you can let the flutter verify the installation by using the command below in a command prompt or a terminal –
> flutter doctorThis shall run through the installation and prompts us the possible errors and changes to be done if needed.
It validates the installations of Flutter SDK, Android Studio with Android SDK & NDK along with any available Virtual Devices configured and shows up error if anything is missing or required to be re-configured.
It also looks for flutter plugin in Android Studio and in Visual Studio Code, which we shall be using for our development and shows up the errors.
Once these plugins are installed (Marketplace in VS Code and Configure -> Plugins in Android Studio: Look for Flutter and Dart plugins and install them) and when we run the command again, the errors vanish. Once we fix all these errors, we are good to start developing.
Finally we can create a new flutter application by running the command,
> flutter create helloworldappFlutter doesn’t accept spaces or dashes in the names of its files or project files, instead underscores can be used.
Found this article helpful? Please consider supporting!
This way we get started in our journey into developing applications using flutter. In the next article, we shall see how we can design a simple screen and get started with our blog list application.
Found this article helpful? Please consider supporting!
