Explain like I’m 5: Flutter

Explain like I’m 5 years old — What is Flutter and how to use it to create a mobile application.

If you’re reading this you are not 5 years old but this is my attempt to give a complete and simple guide on Flutter.

In a nutshell

Flutter comes down just to this:

1. mobile UI framework

2. made by google

3. helps to craft high-quality native interfaces on iOS and Android

4. free and open source

5. Fast Development experience

If you need to create a beautiful and high performance Android and iOS application in a reccord time, Flutter is your answer.

What do you need to setup Flutter?

  • Operating System of 64 bit (Windows, MacOs, Linux)
  • Disk Space: Windows — 400 MB, MacOs — 700 MB, Linux — 600 MB
  • Tools: Windows (git), MacOs-Linux (bash, mkdir, rm, git, curl, unzip, which)
  • Get the Flutter SDK
  • run “flutter doctor” on command prompt or POWER SHELL. Running flutter doctor shows any remaining dependencies you may need to install.

What language do you need to create app with Flutter ?

Dart is the programming language used to create application with Flutter.

Dart is a general-purpose programming language originally developed by Google and later approved as a standard by Ecma — Wikipedia

Dart language is a cool language:

it’s familiar and easy to learn for developers

it’s Class-based and optionally typed

It has a cool Asynchronous Library (Future and Stream)

Dart helps to create an easy to understand layout for your UI

Story

“sky” → Flutter Alpha → Flutter Beta

The first version of Flutter was known as “Sky” and ran on the Android operating system. It was unveiled at the 2015 Dart developer summit — Wikipedia

It has been released to the world in May 2017 in a stable release Alpha.

Flutter is now in Beta from February 27, 2018.

Tooling

Flutter comes with a CLI with a bunch of useful commands.

Interesting commands:

doctor: Show information about the installed tooling.

This command is vital to know if there is something dependencies missing.

logs: Show log output for running Flutter apps.
screenshot: Take a screenshot from a connected device.
test: Run Flutter unit tests for the current project.
trace: Start and stop tracing for a running Flutter app.
With this command you can trace and measure wall/CPU time.

Widgets

In Flutter, everything is a widget

What is a widget ?

EACH WIDGET IS AN IMMUTABLE DECLARATION OF PART OF THE USER INTERFACE.
flutter.io

Let’s create some simple widget together:

a text

new Text(“Flutter Quotes”)

a styled text

new Text( ‘Welcome to FlutterAuth,’,
style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.5),
),

a button

new FlatButton( child: const Text(‘FLAT BUTTON’), 
onPressed: () {
// Perform some action
},
),

Stateless versus Statefull

There are two kind of widget:

Stateless Widget — these one don’t changes. Example: A text Widget with a constant string.

Stateful Widget — these one have a state and can change. The state is one or more values. When the state values changes, the Widget will be redrawed on the screen.

Testing

How to test in flutter ?

In Flutter we have 3 kinds of test:

  • Unit testing: when you want to test a piece of code like a function.

Tests are run on local Dart VM with a headless version of the Flutter Engine.

Test are run on a simulator, an emulator or a device.

If you are familiar with Selenium/WebDriver (web), Espresso (Android) or UI Automation (iOS), then Flutter Driver is Flutter’s equivalent to those integration testing tools. In addition, Flutter Driver provides API for recording performance traces (a.k.a. the timeline) from actions performed by the test. — flutter.io

Test are run on a simulator, an emulator or a device.

Use cases

  • Hamilton — Introducing Hamilton — The Official App. Fans’ access to all things Hamilton: An American Musical.
  • Newsvoice — Newsvoice shows all the news and perspectives from high quality sources in one place.
  • Bendometer — “Harmonica tuner”. Learn how to play bends on your harmonica.
  • Ecuestre Digital — Ecuestre Digital provides real-time results and video streaming of Equestrian Events.
  • Hookle — Manage your social media in one place

Example: Master Login

Let’s take a look to this application

UI:

widgets:

Login :

widget = new Padding(
padding: new EdgeInsets.all(32.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text(
'Welcome to FlutterAuth,',
style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.5),),
new Text('Login to continue'),
new Center(
child: new Padding(
padding: new EdgeInsets.symmetric(vertical: 160.0),
child:
new InkWell(child:
new Text('Login'),onTap: _login,)
),
),
]
)
);

Quotes :

widget = new Padding(
padding: new EdgeInsets.all(32.0),
child: new Column(children: <Widget>[
new Flexible(
child: new FirebaseAnimatedList(
query: reference,
sort: (a, b) => b.key.compareTo(a.key),
padding: new EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (context, DataSnapshot snapshot, Animation<double> animation,int x) {
return new Quote(
snapshot: snapshot,
animation: animation
);
},
),
),

Logic:

Authentication

Our application use Auth0 API to authenticate. After the authentication, we use the token from Auth0 server to authenticate to Firebase with custom token.

Firebase Functions

We use Firebase Functions to create an API endpoint wich generate a Firebase JWT Token for custom token authentication.

Show me the code:

https://github.com/WillyShakes/MasterLogin

Conclusion

This was my attempt to explain What is Flutter and how to use it to create a mobile application.

Hope you enjoyed the article.

Until next time may the {code} be with you.

Link and References

wikipedia.com