Card image cap

Flutter for Beginners - Setting up and Getting Started with App Development

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.

Flutter efficiently solves this problem of developing "native" applications with a "single" codebase 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 lanugage, 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.

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

https://flutter.dev/docs/get-started/install

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

https://developer.android.com/studio

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.

data/Admin/2020/1/doctor.PNG

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.

Published 18 days ago

Sponsored Links
We use cookies to improve user experience. Learn More