Apr 16, 2018
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.
- Widget testing: helps you test a single widget.
Test are run on a simulator, an emulator or a device.
- Integration testing: for UI automated test.
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.
- Scrumizer — Scrum master and product owner certification trainer by Robert Felker
- 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.
