Hero Animation Unmasked

Is it a bird... Is it a plane... It's a Widget !!!

Whether you are new to Flutter, or been around for years, you have heard of the famous Hero Animation that makes a widget "fly" from one page to the next when navigating.

Through this presentation, I will embark you through the amazing journey of unmasking this mysterious Hero animation to get a good understanding of how it works under the hood.
On the way, attendees will receive a better understanding of how Flutter works and especially learn how to:
- Listen to navigation events (push, pop...) to trigger some logic
- Browse through Flutter's Element tree to look for certain elements
- Retrieve an element's position on screen
- Use the Overlay widget to display ... well overlaying widgets

...So, ready for take-off ?

Understanding Flutter's handling of Gestures

As a mobile development framework, Flutter provides awesome features to detect and recognise user's gestures.

What gestures can it detect ? How does it recognise different gestures ? How does it respond when several gesture handlers are triggered ? How can I test my widget when gesture detection's involved ? ... so many questions that I've asked while working on an SDK intercepting the user's gestures without disrupting the behaviour of the underlying Flutter app.

In this presentation, we will dive into the general mechanism of how Flutter detects and recognises gestures, understand how it resolves detection conflicts and see how gestures handling widgets can be tested so that Flutter gesture handling has no secrets for you

1 Codebase → 3 Apps, the recipe for white label Flutter apps

As mobile apps developers, sooner or later, we receive the request to create a white label mobile application: writing a single app code base while being able to build and deploy different flavors of it for different clients with changing colours, icons or API urls…

It can be for a client opening theme based shop stores or restaurants and wanting each of them to have an app with its own flavor and theme. One creating an application for hospitals and clinics requiring each to have their own iconography, medical devices and specialty. Or even a airline group that needs to provide specifically branded and featured apps for each of its airline companies… The use cases are numerous, yet the solution is often very similar if we approach the problem the right way:

- What are the part of your codebase that are specific to a target application?
- Where do you assign responsibilities within you code components to be able flexibly adapt to the various requests that will come you way in those kind of projects?
- Which white labelled components shall be on the dart side and which ones will live in the native part of my code base?

At BAM we had to bring answers to all those questions while developing a white labelled application in Flutter for the world’s biggest Ski resort group company.

After only 3 months, we were able to deploy 3 applications to 3 different ski resorts in time for the 2022-2023 winter season from a single code base and are since able to deploy 3 new versions each week.

In this presentation, we will share what we’ve learn building this white label application and cover the following topics:

- Overall code architecture of a white label mobile application
- Setting flavors and environments specifics variables and API calls
- Configuring both Flutter and Native side to be flavor flexible
- Separating assets
- Properly testing our code base
- Deploying applications with a well oiled CI/CD pipeline
- Toggling features independently for each target applications

This presentation shall provide a comprehensive approach to white label application development with Flutter. After this talk, Flutter developers should be able to understand the major obstacles that one can encounter with white label development and be armed to confidently overcome them.

This is a 2 person presentation given by myself (Twitter: @Guitoof) and Matthieu Pernelle (Twitter: @thieumalaperne)