On our last Flutter application at BAM, we worked with a designer, who had never worked with a Flutter team. The purpose of the application was to transmit information in a clear and effective way for an e-learning app around human anatomy.

The collaboration with the development team went well and the designer noticed some points that made the design work more fluid thanks to Flutter.

To have the complete context, you should know that the application developed had an Android, iOS but also Web version. Indeed, thanks to Flutter Web, we were able to make a completely cross-platform product without compromise and without having to rework the components. It also allowed us to have a coherent design on tablets, especially on iPads, a type of device that is often forgotten during mobile development.

1. Three platforms, one design

One of the things that came up the most during the project was the quality of the integration of the designs and the absence of compromise during the integration, regardless of the design.

Indeed, at Bam, we are often used to having to rework certain parts of the design according to the technology used. For example, on React Native, you sometimes have to work with simpler shadows in order to have a similar rendering depending on the platform. On Android in particular, shadows can be poorly managed by some devices.

On Flutter, the entire display is managed by a Skia engine. While it sometimes has the disadvantage of not reusing the design of the native platform, it does, on the other hand, allow for a unified graphical interface on all devices.

This allows you to have a strong and consistent branding for your application without compromising on appearance.

On the development side, this also makes it possible to streamline processes. Indeed, developers, when developing a feature, can focus only on a device. No need to go back and forth between an iOS phone and 2 Android phones to be sure you have the right design.

2. Faster integration with Flutter

The designer also noted that integrations were happening more quickly on the designs. Indeed, the team can unify design testing. This means that during development, we can test the rendering of Widgets on a single device (for example an iPhone) and be sure that the rendering will be similar on the other platforms. This allowed us to save time on integration. This allowed us to focus on small UI details that facilitate immersion for the end user.

For example, thanks to the Hero widget, you can easily create an animation between 2 pages in Flutter. In particular, you can read The article by GuillaumeDM who dissected this animation in order to better understand it.

The fact that the components are similar on all platforms also frees up time during design validation by the PO. Indeed, by testing directly on the web, it is possible by adjusting the size of the web page to have a very quick overview of the rendering on all types of devices without having to turn on all of them (we have a very extensive device lab at BAM that precisely allows you to manage them all).

All this allows us to focus on the business part of the product, the UI being just a support for our client's business.

3. Time freed up to improve the user experience

Now that we have seen what it was possible to achieve with Flutter on design, there is still the next step, optimizing the designs and focusing on details that would not be possible to do as quickly in other technologies.

Today, the majority of large applications introduce micro animations in order to strengthen user involvement. For example, when Twitter added an animation to its' Like 'button, the use of this button increased significantly.

By focusing and adding micro animations within an application, you can therefore increase user retention.

We can also imagine generalizing the fact of having a web version for mobile applications. Indeed, the rendering of web applications on the latest versions of Flutter is amazing. The majority of plugins are directly available without any modification, which makes it possible to port an application without any modification.

We can therefore imagine an application that has a preview in web mode available. This can make it possible to try an application without having to install it and therefore facilitate the onboarding of users. For a social or sharing application, this can be particularly useful for growing a user base.

Conclusion

Today, Flutter is mostly used for mobile applications. But as the framework grows, we can improve the quality and speed of delivery. This means that we can then spend more time adding features that are optional, but that can add real value to our customers.