Getting started with Flutter

What is flutter ?

Flutter is a cross platform mobile development framework from Google. It is targeted towards Android and iOS.

Flutter provides you library for crafting high-quality native looking interfaces on iOS and Android in record time. Flutter works with existing code as well, and it is used by developers and organizations around the world. Even though it is still in alpha but that doesn’t stops anyone adopting it.

What is Within?

Flutter took out box approach to deliver performant application. They designed native looking UI from ground using Chrome’s 2D library called Skia. Even though it is C++ library flutter allows you to code in Dart. So, dart compiles down to C++ and then that native code runs on both iOS and Android. Compilation process allows to optimize code and that part is getting better and better.

Why flutter ?

Flutter uses Dart as its programming language which is pretty easy to learn. If you have knowledge of Java and/or Javascript your 70% of work is done. it will take just couple of days to learn about dart.

Flutter provides both design Material and Cupertino (iOS-style) widgets. That makes easy to develop and target two different platform with same code base.

How to install ?

Flutter has way more easy approach then other tool say setting up Android Studio or XCode that you might have used. Here is how you get started.

Hope you already have set up of git and VSCode with flutter plugin installed.

1. Clone flutter from its official repository and set up flutter in path.

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

2. Check flutter dependencies.

$ flutter doctor

when you run this command it will automatically download required dependency files. it will ask for android /iOS SDK to download if it is not installed.

3. Create sample app

$ flutter create sample

5. Run app

Go to your directory and run app using this command.

$ flutter run

it will automatically download all necessary packages and it will run app inside your connected devices or emulator.

6. Editing app

Go to your app directory > lib > main.dart

Now this is the main file that gets executed first. open file and remove all content of it and add this hello world code to your app.

import 'package:flutter/material.dart'; 
void main() {  
    runApp(   
        new Center(        
            child:new Text("Hello, World")          
        )    
    );
}

Go to your console press r and your app will get hot reloaded instantly.

Conclusion:

Flutter requires very less code to write native app compare to native frameworks and other cross platform options. We just wrote hello world app in some less than 10 lines of code and only single file which can work with iOS and android both.

Next we will see some complex UI using Dart2. Stay tuned…