Flutter vs Xamarin.Forms

Flutter vs Xamarin.Forms

A friend told me Xamarin is on its way out and that Flutter is going to take over. Alarmed by the news, and motivated by the desire to keep my job, I spent some time researching what Flutter has to offer. The long and the short of it is that, while Flutter provides some advantages, Xamarin isn’t going anywhere.

As with many things in life, there are pros and cons to both Flutter and Xamarin. Here is what I found out:

Flutter Offers a Next Generation UI System

How do I know that Flutter is a next generation UI system? While I can’t see into the future, I do remember the past. The reason why Windows became such a popular operating system was that it was easy to develop a Windows Application. You could choose whatever languages you liked, and the UI system would evolve generation by generation:

• First generation – Win32/MFC, which uses message looping
• Second generation – Windows Form, which introduced data binding

Data binding was a brilliant idea, it solved how to update data in UI in an elegant way, and Microsoft has now been using it for almost ten years.

However, WinForms has the problem that all controls come from the system. If you create a button, it calls the WIn32 API to create a button, and the button looks different in Windows XP, Windows 7, Windows 8 etc. This is not ideal for the customer who is often looking for an aesthetically beautiful button rather than a system button.

It would seem that Xamarin.Forms was named as such, instead of Xamarin.WDF or Xamarin.PCL, because it does the same thing with all WinForms. As all controls in Xamarin.Forms come from native platforms, the control looks distinct across different platforms and different Android versions.

The reality is that a customer usually gives you a single design, which is based on IOS. What you need to do is use the Android custom renderer to make the control identical across platforms. This includes doing things like moving the tab bar to the bottom and removing the underline inside the entries. The problem with this approach is that it raises the cost of Xamarin development.

The third generation is WPF/UWP, which use XAML to describe the UI, abandoning the native control. WPF uses DirectX to draw everything, and you can use XAML to control everything, such as the border and corner ratios. As this third generation solution doesn’t use native controls, it looks the same across all platforms, including old Windows systems.

So, why is Flutter a next-generation UI system? It uses Skia to draw everything in the same way as DirectX does in WPF. The result is that it will look the same on each platform and the major advantage is the cost saving from not having to fit the design to each platform.

Flutter Features Hot Reloading

As this is a feature that we are all keen to have in Xamarin.Forms, it is an obvious advantage of Flutter. In my experience, XAML Preview never works, any changes I make need to be deployed to see if they are correct and deploying to IOS devices takes far too long. Powerful platforms need powerful tools such as hot reloading with Xamarin Inspector. With this inbuilt feature enabling effective development, Flutter is off to a good start.

Is Flutter’s use of Reactive is Better than Data Binding?

While data binding is a brilliant idea, it can’t solve all problems. For example with user input validation, when a user types something in the entry, it shows the dropdown list to show the candidate items. Reactive can do this better than binding, but it is not a replacement. Most of the time the UI’s data only needs to be updated once, and binding still offers the most succinct solution. While Reactive is a useful advantage of Flutter, it does not make it superior to Xamarin as it also makes use of the feature.

Flutter’s Description UI with Code isn’t a Great Idea

The UX designer can’t code, and it will take more time to convert the design to Flutter code than to use a tool to convert the design to HTML or XAML. The way that Flutter creates the control makes it hard to locate. If you think of XAML or HTML, if you want to change a label’s color, you can easily find it from the UI files or using Inspector tools. It would be impossible to find it from the code alone as the only variable is the name, which isn’t shown in the UI. On this point, Xamarin.Forms win hands down.

Flutter’s Community Support is Lacking

Flutter uses Dart as the default language and, while this is not a problem as it’s similar to C#, you can’t use Linq, Reflection or Refit. We have been spoilt working in the .Net world for such a long time that we have no idea how to implement these features in a new language. You could try to find a project from GitHub but, unfortunately, the maintainer is always busy, and you can’t count on them to fix the issue. Last time I tried to create a PR to a third party library but couldn’t build its Develop branch, I raised an issue on Develop to try to fix the problem. The guy I dealt with said he was busy but would fix it if I paid him. I was shocked; I was trying to help him maintain his reputation, so surely he should have been paying me. When it comes to community support, Xamarin is well ahead of the game; you’re able to use not only .Net community components but IOS and Android community components.

The Future of Flutter and Xamarin.Forms

As Flutter hasn’t been released as yet, we aren’t able to use it  in commercial Apps and have no idea how much it will cost to fix platform bugs. As far as I’m aware, not all native APIs can be used in Flutter, which should give Xamarin.Forms some time to improve.

While we could potentially use Skia to do the renderer for Xamarin/Forms, XAML is being introduced as the standard, and we will be able to control more things based on that. For example, we’ll be able to control the border or remove the under for Android entry. So, in summary, it really doesn’t matter if Xamarin uses Skia to draw or not. As far as hot reloading is concerned, Visual Studio 2019 is going to bring the hot reloading feature for iOS, so developers will be able to enjoy the same experience as with Flutter.

At XAM Consulting we’re Australian leaders in cross platform app development, if you need help with any mobile project either Xamarin or Flutter then please get in touch.