FLUTTER I - INTRO AND INSTALL

WHAT IS FLUTTER ?

Flutter is a new tool offered by Google that let developers build cross-platform applications that could be executed in different systems such as Android or iOS with just a common codebase.

This tool is is built in C and C++ and provides a 2D rendering engine, a React-inspired functional-reactive framework, and a set of Material Design widgets. It is currently being distributed in its alpha:0.0.20 version, but in spite of its early stage it already allows to create complex interfacing, perform networking and even file management.

Flutter´s approach is different from other solutions, Cordova for example which runs over a WebView executing HTML, CSS and Javascript. Unlike these tools, it just uses Dart as a single programming Language. Dart is pretty easy to learn and if you have Java knowledge, 75% of the job is almost done and getting used to Dart will just take you a couple of days.

Applications will not execute Dart code directly. By the time an app is release built, the code will be compiled to native getting as a result better performance and a better UI response. While developing in debug mode (checking for potential bugs) Flutter also performs several tasks that may make the application run slower. If going through this situation, Flutter will let know placing a red ribbon top right in the screen with the words “Slow Mode” written on it.

Flutter slow mode ribbon

WHY USING FLUTTER ?

It is more than just creating both Android and iOS applications with a single project, very few code is needed compared with native programming in both platforms due to Flutter high expresiveness.

Performance and UI response.

Flutter Gallery Demo

Another good feature is that Flutter is Material Design oriented and offers lots of its specifications.

Google is also using Flutter in order to develop their new System UI called Fuchsia as it seems if we have a look into their repository.


INSTALLATION

This process may vary since Flutter is at an early stage and periodically updated, in order to keep up to date to the latest changes visit Flutter site and get through the installation process.

This one and the following posts will be based on 0.0.20+.alpha version. So, to get Flutter installed next steps are need to be done:

STEP 1 . CLONING

Clone alpha branch from Flutter repository using Git (SourceTree, Github Desktop…) and add bin folder to your PATH.

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

STEP 2. CHECKING DEPENDANCIES

Run Flutter doctor in order to install all dependancies needed.

$ flutter doctor

STEP 3. INSTALLING PLATFORMS

Next step will be installing the platforms to develop for, we can have both or just the one we want to build applications for.

Android choice, requires an Android SDK installation. You may just install Android Studio that already provides the SDK. In case Android Studio is installed in a different location that the default given, ANDROID_HOME variable must be added to the PATH, pointing that new location where the SDK was installed.

iOS choice, requires xCode 7.2 or higher to be installed. In order to run applications in a physical device, an additional tool is needed. This tool can be installed using Homebrew.

$ brew tap flutter/flutter
$ brew install ideviceinstaller ios-deploy

STEP 4. ATOM CONFIGURATION

It is recommended to use Atom editor with Flutter and Dart plugins installed.

Flutter Atom plugin installation:

  • Run Atom.
  • Packages > Settings View > Install Packages/Themes.
  • Fill Install Packages field with the word ‘flutter’, then click Packages button.
  • Select Flutter package and install.

Open Packages > Flutter > Package Settings and set FLUTTER_ROOT to the path where Flutter´s SDK was cloned.

Then Packages > Dart > Package Settings, and set the variable with dart sdk location, typically bin/cache/dart-sdk inside Flutter directory.

If using Mac, then Atom > Install Shell Commands in order to install shell commands.

Last thing to do, running Flutter doctor again in order to check everything is ok.

Following output shows how the installation process was successful and how iOS environment does not meet the requirements yet.

[✓] Flutter (on Mac OS, channel alpha)
• Flutter at /Users/XensS/dev-dart/flutter-sdk
• Framework revision 9a0a0d9903 (5 days ago), engine revision f8d80c4617
[✓] Android toolchain — develop for Android devices (Android SDK 24.0.1)
• Android SDK at /Users/XensS/Library/Android/sdk
• Platform android-N, build-tools 24.0.1
• Java(TM) SE Runtime Environment (build 1.8.0_25-b17)
[✓] iOS toolchain — develop for iOS devices (Xcode 6.4)
• XCode at /Applications/Xcode.app/Contents/Developer
• Xcode 6.4, Build version 6E35b
x Flutter requires a minimum XCode version of 7.0.0.
Download the latest version or update via the Mac App Store.
x ideviceinstaller not available; this is used to discover connected iOS devices.
Install via ‘brew install ideviceinstaller’.
x ios-deploy not available; this is used to deploy to connected iOS devices.
Install via ‘brew install ios-deploy’.
[✓] Atom — a lightweight development environment for Flutter
• flutter plugin version 0.2.4
• dartlang plugin version 0.6.37

FIRST STEPS (Hello World App!)

Let´s see how to create a new project and code some examples in order to see how Flutter works. Following posts should bring more complicated and interesting examples.

Go Packages > Flutter > create new Flutter Project.

Inside lib folder, there is a file called main.dart, open the file and erase the content.

Dart code start its execution from the main function that should be included in main.dart file.

void main() { }

Now import dart material library, this will provide a function to launch applications.

import ‘package:flutter/material.dart’;

That function is called runApp and accepts a Widget as parameter. A Widget could be compared to a View in Android or iOS to get an idea, of course there are differences among them. In Flutter the whole UI is built using widgets and everything is coded using just Dart, Android will use XML in view specification i.e.

Start creating an example about how using a Text Widget in order to show some text in an application.

Now run the application using Atom.

As seen, the text appears over the status bar, this is because it is where Flutter (0,0) coordinates are.

Let´s add some padding to fix it. As Flutter UI is built using widgets, the padding should be a widget as well. This may sound weird if you have some previous experience on Android or iOS where padding is just a View attribute. What has to be done here is adding a new Padding Widget and nest our Text Widget as follows.

In the code above a Padding Widget is created, its padding is set to 24 using an EdgeInsets object and its child is nesting the Text Widget. Run the app and see how the text is placed lower.

Note: If Java previous background, const EdgeInsets.only(top: 24.0) instruction is a call to only, an EdgeInsets constructor. It returns an instance which is a constant at compilation time. This is a difference between Java and Dart, more information about Dart constructors here.

To place the text in the center of the screen, make use of another specific widget called Center.

Both Padding and Center Widgets share an attribute called child. This is in fact, one of the features that make Flutter so powerful. Each widget could have its own child, what let nesting widgets. A Text nested to a Padding nested to a Center i.e.


TO SUM UP

In this first article about Flutter we have seen how easy is creating an application showing a text writing very few code. Following posts are meant to target more complex interfaces and show how easy (compared to the native way) is to implement them.