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 codebase using a "single" programming language. The term "single" is stressed here because the words "native" apps and "single" codebase 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. And iOS is a closed-source operating system which uses either objective-c or swift programming languages for its app development. And when we talk about native applications which truly levarage the esthetics and features of their respective operative systems, we need to have our codebases written in Java or Swift or Objective-C.
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. The flutter framework 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.
Installing Flutter and Setting up
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 XCode (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.
Android Studio can be downloaded from the official downloads page
Once the prerequisites (Android Studio or XCode 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 doctor
This shall run through the installation and prompts us the possible errors and changes to be done if needed. It generally looks for the successful configuration of the sdk, android studio along with Android SDK and 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 helloworldapp
Flutter doesn’t accept spaces or dashes in the names of its files or project files, instead underscores can be used.
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.
For all the UI designers and developers who’re looking for a simple utility to create and test colors and combinations for their next awesome apps – here’s a simple app for you, which is completely ad-free and is free! check it out here