Flutter - Introduction
Quick introduction to Flutter.
Some weeks ago, I was looking for a way of writing an application for Smartphones, compatible with iOS and Android, to complement my new Website.
I read a lot earlier about React Native (Facebook) and Xamarin (Microsoft) and suddenly, continuing my investigation I came across a brand new mobile UI framework, written by Google, called Flutter.
What does Flutter offer to developers?
Flutter offers a way of building applications for both iOS and Android at once, using the very same code.
Flutter uses a compiled programming language, called Dart, which is compiled “ahead of time” (AOT) into native code for both iOS and Android.
Flutter’s main building blocks are Widgets. They are heavily inspired by React’s JSX syntax, which makes it easy to React Native developers to jump into Flutter development.
Flutter provides a huge range of Material Design inspired components, ready to be used in applications, such as:
- Application structure and navigation: Scaffold, Appbar, BottomNavigationBar, TabBar, TabBarView, Drawer
- Buttons: RaisedButton, FloatingActionButton, FlatButton, IconButton, PopupMenuButton, ButtonBar
- Input and Selection: TextField, Checkbox, Radio, Switch, Slider, Date & Time Pickers, FormField, Form
- Dialogs, alerts and panels: SimpleDialog, AlertDialog, BottomSheet, ExpansionPanel, SnackBar
- Information displays: Image, Icon, Chip, Tooltip, DataTable, Card, LinearProgressIndicator, GridView
- Layout: ListTile, Stepper, Divider
- Basic: Container, Row, Column, Text, RichText
- Support for Canvas
- Cupertino (iOS -style): ActivityIndicator, AlertDialog, Button, Dialog, DialogAction, Slider, Switch, Picker, PageTransition, FullscreenDialogTransition, NavigationBar, TabBar, PageScaffold, TabScaffold, TabView
- Layout: Container, Padding, Center, Align, FittedBox, AspectRatio, ConstrainedBox, Baseline, FractionallySizedBox, SizedBox, OverfloxBox, Transform, Stack, GridView, Flow, Table, Wrap, ListBody, ListView…
- Animation: AnimatedContainer, AnimatedCrossFade, Hero, DecoratedBoxTransition, FadeTransition, PositionedTransition, RotationTransition, ScaleTransition, SizeTransition, AnimatedOpacity…
- Interaction: Draggable, LongPressDraggable, GestureDetector, DragTarget, Dismissible, IgnorePointer, AbsortPointer, Scrollable
- Routing: Hero, Navigator
- Styling: Theme, MediaQuery
- Painting and Effect: Opacity, Transform, DecoratedBox, FractionalTranslation, RotatedBox, ClipOval, ClipPath, ClipRect, CustomPaint, BackdropFilter
- Async: FutureBuilder, StreamBuilder
Not so bad, isn’t it?
Flutter is open-source. In other words, you can learn from the original code, directly.
Is Flutter difficult to learn?
At time of writing this post, Flutter is still in Beta-2 version (version 0.2.8). This means that changes are frequent, which sometimes breaks some code that used to work.
However, Flutter comes with tools to help diagnose source code that requires changes, due to a newer version of the framework.
In order to answer the question “Is Flutter difficult to learn?“, I will say: NO it is not that difficult. After a couple of days, I was able to build the skeleton of my application that interacts with my Web Server without too much trouble.
The documentation is quite extensive and well written. Should I had trouble in understanding it, I used to refer to a sample application, called Gallery, which demonstrates many features. The source code is very clear.
Dart - OOP language
Flutter uses Dart (version 2) as programming language.
The documentation says that Dart is clear and concise, fast and provides optimizing ahead-of-time compilation to get predictably high performance and fast startup across mobile devices and the web. It compiles to ARM and x86 code, so that Dart Mobile Apps can run natively on iOS, Android and beyond. Dart is object oriented and its syntax is close to C++, C#, Objective-C or Java. It supports garbage collector and asynchronous programming.
At first glance, Dart seems easy to approach. However, with version 2, the notion of Type has been strenghtened, which makes the code a bit more complex.
IDE - Editor Integration
Flutter has an excellent editor integration.
Personally, my preference goes to Visual Studio Code and its official Flutter extension (accessible through the VSCode Extension Marketplace) transforms this editor to a very powerful IDE to create, debug and run the app on physical device or a simulator, directly from the editor.
Other editors are Android Studio or IntelliJ. Android Studio comes with a huge list of different simulators and offers a very convenient feature (not yet available with VSCode): the Flutter Inspector which allows to inspect the applications elements.
Both tools, offer a Hot Reload which automatically and directly refreshes the application as soon as you save changes you applied to the source code. In other words, you update the source code, save it and the application is automatically refreshed with the modifications you just made !! Very convenient.
Why do I believe in Flutter?
First of all, because it is supported and developed by Google. Secondly, because a former principal lead program manager for Visual Studio, named Tim Sneath, has joined Google to work on that new mobile app development framework. (Source)
10 to 20 minutes are necessary to install everything from scratch on your computer.
The installation procedure is very detailed. Follow it and you should not experience any trouble.
Of course, when you start with something new, good tutorials are very useful.
Here are some of the ones, I used to view on YouTube. They helped me a lot. Be aware that some of these tutorials were written before the new integration with Dart v2. Some of the examples might no longer work.
- Fluttery - Flutter Challenge - Egg Timer
- Fluttery - Flutter Challenge - Material Page Reveal
- Tensor Programming
- Brandon Donnelson
- Bram Vanbilsen
So far I received lots of support from the community, using Stack Overflow. People are very reactive and helpful.