Everything you need to know about Flutter Europe 2020
Flutter Europe is an initiative driven by European Flutter Communities to gather every passionate and learn how to create beautiful apps! The main goal is to share knowledge, improve skills and expand the community. This conference gave us the opportunity to meet the most recognizable Flutter developers from Europe and talk with some of them.
The framework is targeting mobile, desktop and web platforms with a single codebase. And it just works! It is now the most popular UI portable framework for the ambient computing world, and we could feel the hype during those two days.
Because it is a new cross platform framework, going full Flutter in companies is still quite rare. Only a few companies went all the way. The Flutter Europe conference was the right place to meet some of those companies. They all came with precious and strategic advices, talks and demos to convince our clients that choosing Flutter is a win-win situation that we have to take part in.
During those two days, we attended several talks around Flutter of course. Some talks were more interesting than others, and this article will highlight those that caught our attention.
Building Voice-First Flutter apps
Elaine Dias Batista, a french 🇫🇷 developer at SFEIR, showed us how to easily add voice commands to a Flutter application.
To add voice control on an app, you will have to pick libraries to handle
- Wake word detection, as “Ok Google”
- Speech-To-Text, transform a voice into a literal String
- Natural Language Processing, trying to find the intention of thee user
- Then you can perform programmatically the action on your app
- And optionally, answer by voice response, using a Text-To-Speech SDK
The implementation can depend on the platform where your application will run (android / iOS), because some SDK like Siri are only available on one platform.
But a lot of SDK are available on Flutter, some are cloud-based, some are bridges to native SDK, but all of them work perfectly with Flutter!
She finished her talk by showing us a live demo of an application she adapted adding a voice control to switch to Dark Theme, impressive!
Bring Flutter to web
Rihanna Kedir, a Google Developer Exert on web technologies showed us what are the possibilities of FlutterWeb. The first use-case is to give the customer access to the application without having to download it from a store, but by just giving him access to an http link. It can be enforced by adding the Progressive Web App concept inside the Flutter’s project.
Another great use-case shown is to perform showcases of our app by directly adding a sample of the real application directly inside the static webpage, instead of a simple video or GIF. With this you’ll surely have a WOW effect!
This is a killer feature of Flutter, now it can really run everywhere, the sky’s the limit!
Flutter at work / Is Flutter ready for enterprise-grade applications / How to convince business to Flutter? Real-life cases
Flutter is a new technology, and like anything new, it divides thoughts. Developers will gain in productivity due to the power of the framework, but how to convince customers to embark on the Flutter adventure? This is a question that many companies are asking themselves, and which is currently the #1 obstacle to the adoption of this tool.
First of all, just explain to them why Flutter is not as any MultiPlatform language or Native SDK, Flutter is:
Simple, Productive, Cost efficient and Robust!
Time is a critical factor
For many companies, time is the main factor in the success of a project. And as we all know, time management is strongly linked to money management.
A developer carried out the 4 project natively on Android and iOS, then in React Native, in Xamarin and in Flutter, in order to expose the productivity on each SDK.
We can directly see that Flutter comes out as the big winner, followed shortly by React Native, while still being very far from the native (remember that for android and iOS, development must be done twice).
We can observe that the realization of these projects was done in
- 14 hours on Flutter
- 40 hours on android & iOS
Who’s using Flutter ?
A question each client asks us, “who’s really using flutter”? Take a look at this picture and you will see that many large companies have trusted Flutter, and the list is only growing!
Flutter in my hand
Your customers especially need to touch Flutter. You need to quickly create a small POC for them, with beautiful designs, beautiful animations, and let them try your product! Then once they are amazed, you can tell them that it was done in Flutter, and how long it took you to develop it!
To finish convincing them, ask them for a quick update to develop. Sit down next to them, and show them that in no time, with Flutter and the Hot-Reload, you can fulfill their wishes!
Performance: Optimizing your Flutter app
By the famous Google’s Flutter developer Filip Hráček, this talk showed us how we can find the origin of some lags on our application, using the flutter’s profiler and observatory. Then he explained to us some simple samples to improve performance of some codes. Like using ListView’s Builders, perform complex code into the “compute” method, try to wrap a large tree into widgets, reducing image’s size before adding them to the project, and so on…
Flutter, what are Widgets, RenderObjects and Elements?
Norbert Kozsir dug deep inside the Flutter architecture to explain to us how it renders UI elements on our Screen. And why re-creating widgets don’t infer to the app performances, because it’s only bound to a Render, which is not recreated when the widget changes.
He continued by implementing the same view using only dart:ui (the SDK which interacts directly with skia), then wrapping it using the Flutter’s RenderObject, then directly with a flutter widget. He started from 100 lines of code to finish with only 1 line of code with the power of Flutter’s reactive tree!
He concluded with an amazing demonstration of how to create a flutter widget using inside a renderer. He recreated the Center widget, showing us how to manage widgets size, positioning and constraints.
Implementing complex UI with Flutter
A simple and efficient presentation which shows how to achieve complex UI with just some tricks.
The main thing to remember is that with Flutter it’s now possible to create complex interfaces without any constraints, so let’s walk hand by hand with the UX designers and let our imagination run wild to best immerse the end user.
The different illustrated examples are available by following the link below.
Everything you need to know about Provider
Remi Rousselet , another famous French 🇫🇷 Flutter Developer, showed us how and why he created the package Provider. https://pub.dev/packages/provider
“A mixture between dependency injection (DI) and state management, built with widgets for widgets.
It purposefully uses widgets for DI/state management instead of dart-only classes like Stream. The reason is, widgets are very simple yet robust and scalable.”
This is a powerful solution to manage dependencies inside the reactive tree, and to facilitate testing.
He explained to us how to handle this with more boilerplate using the stock flutter widget named InheritedWidget, then how to perform this using only few lines of code using Provider.
The last steep of his talk was about the last update of Provider, using the Dart 2.7 new feature named “extensions method”, allowing adding method on a class without extending it. With this he added the features
- “watch”, which register any widget to a provider
- “read”, access to the value of a provider
- “select”, register only of a field of a provider
Painting with Rive and Flutter
Umberto Sonnino, Software Engineer at Rive explained to us the stack behind Rive, the powerful animation creator which allows us to create awesome widgets just by exporting the designer’s work and use it directly inside any Flutter app using their SDK.
For example we can use directly this switch (with gestures, animation controllers) with few lines of code on any app :
The talk explains how they manage to have better performances using flutter & RenderObjects.
Rive is an amazing solution, that should be in all projects, so give it a try :
Here’s a sample screen extremely hard to develop without Rive
Flutter for desktop — what is it good for ?
macOS
Is the most developed of the desktop platforms, and has entered as an alpha release of 1.13, is the only one who appears in TargetPlatform.
Windows and Linux
Are an early technical preview.
Plugins
Currently only a few officials plugins are available for desktop development.
User interactions
Flutter is basically made for digital screens. Here the interaction between the user and the content is no longer done via his finger but by the mouse. It’s therefore necessary to redefine the different behaviors of the cursor when it interacts with elements (photos, links, texts, etc …)
Conclusion
Navigator and Routes and Transitions… Oh, My!
Flutter provides two ways to configure and modify the history stack of a Navigator.
The initialRoute property and the imperative API (push(), pop(), pushNamed(), pushAndRemoveUntil(), etc.).
This presentation is a reminder of the different ways there are to navigate in a Flutter application. For more details it is possible to refer to the Flutter documentation which describes the different ways with concrete examples.
After those two days, what about Flutter ?
Flutter is an amazing technology!
Compared to the native you do not feel any limit to what you are able to achieve, and all the talks have proved it to us, you can realize magnificent, fluid and full of animations in record time, while having an application robust and full of unit and graphics tests.
You want to add voice commands or augmented reality, this is done very simply in a few lines of code. Do not change anything! Your application is also compatible with your browsers and all desktops, try to find another technology capable of doing this!
At Idean we strongly believe that Flutter is the technology to adopt and we spread the good word so that all our customers are aware of it!
Want to learn more about Flutter? Is your mobile project not up to your expectations? contact us, we’ll be happy to show you what we can do using Flutter
Thanks to Idean for making us live this adventure and sponsor this event. I just want to add a small personal thank you to
for organizing this trip and offering the opportunity to participate in Flutter Europe 😊.This article was written by
, and
