Flutter.io Tutorials - Introduction & Setup

Hello Friends,

As Google launched flutter.io for rapid cross-platform mobile app development. Let's start with some hands-on on it.

What is flutter?

It is an SDK, which supports cross-platform mobile app development that is same source code an compile and runs on Android and iOS as well. as flutter still in development (current version is 0.1.5), It does not support 32 bit ARM devices.

What differentiate from other cross-platform frameworks?

Native OEM

Native OEM is nothing but our native application framework like we write an android app in Java and iOS/iPhone apps in Objective-C.

Native app creates widgets to communicate between widgets and platform services.

 

WebViews

Initially, cross-platform app development is done using Javascript and WebViews like PhoneGap, jQuery Mobile, ionic etc.

As you know (I hope) before Apple releases their iOS SDK they asked devs to use web apps to develop their app.

The main structure of WebView app is using html5, CSS, and JS you can create your beautiful cross-platform apps.

Reactive Views

Reactive web frameworks like ReactJS or mercury have become popular because of the creation of web views through programming which is borrowed from reactive programming.

Flutter

Flutter also does the same thing like react native does by using reactive-style views, but flutter takes a different approach to reduce performance due to JavaScript bridge. 

Flutter uses compiled programming language called Dart. Dart has compiled ahead of time(AOT) for native platforms, which allows flutter to communicate with the platform without JS bridge.

PROS:

• Fast Development
• Expressive and Flexible UI
• Native Performance
• Hot Reload
• Reactive view without javascript bridge
• Great beautiful and customizable widgets

CONS:

• It's still in beta version(not sure when it will release).
• Yet it still not support 32-bit iOS devices (iPhone 4, 4s, 5, 5c)

Setup:

• Let's start with the basic installation of flutter.io on your system.

MacOS &Linux Installation:

To get flutter started you need to clone the git repo.

git clone -b beta https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH

above command will set your PATH variable temporarily, so let's add in global.

• Open/create bash_profile.

nano $HOME/.bash_profile

• Add the following path in bash profile

export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

• Then run following command to refresh current window.

source $HOME/.bash_profile

• To check whether your basic setup is completed or run following command.

flutter doctor

• The first time you run a flutter command, it downloads its own dependencies and compiles itself.

Windows Installation:

• Clone the Git repo
• Then you need to set your PATH environment variable.

IDE:

• You can use any IDE to develop your app, but I would suggest use Visual Studio Code with dart code plugin which support code validation and basic syntax.

Android & iOS setup:

• Install Android SDK  & XCode and required tools as well.

Reference:

Flutter basic setup

Hackermoon link

Getting Started







Now we are done with basics of flutter and its installation, Now its time to run our first flutter program.

I will post our first flutter app soon.

Please follow to get updates for new posts.

Thanks.