FLUTTER I - INTRO AND INSTALL — [Flutter 1.0]
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.
Updated to Flutter 1.0 — December 2018
Index
- Flutter I: Intro And Install — [Flutter 1.0]
- Flutter II: Material Design — [Flutter 1.0]
- Flutter III: Lists and Items — [Flutter 1.0]
- Flutter IV: MPV Architecture — [Flutter 1.0]
- Flutter V: Material Design II — [Flutter 1.0]
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.
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.
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
In order to install flutter the fastest way, just visit https://flutter.io/docs/get-started/install.
There are several options for working with Flutter such as IntelliJ or VS Code. VS Code Flutter plugin seems lightweight and good enough to begin developing in flutter.
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.
Inside VS Code, using command pallete just select Flutter: New Project . This process will scaffold main.dart file inside lib folder. Open this file and erase all its 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 VSCode by pressing f5 and selective an active device or emulator from the provided list.
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.
