Blazor vs Flutter — Part 1

Original article published at kevinwilliams.dev.

This is the second article in a 10 article series: Blazor vs Flutter.

1. Blazor vs Flutter — Part 1 (Overview) (You are here)
2. Blazor vs Flutter — Part 2 (Project Setup)
3. Blazor vs Flutter — Part 3 (Package Installation)
4. Blazor vs Flutter — Part 4 (Components & Pages)
5. Blazor vs Flutter — Part 5 (State Management)
6. Blazor vs Flutter — Part 6 (Navigation)
7. Blazor vs Flutter — Part 7 (API Requests)
8. Blazor vs Flutter — Part 8 (Authentication)
9. Blazor vs Flutter — Part 9 (Deployment)
10. Blazor vs Flutter — Part 10 (Multi-Platform)

I first tried Flutter back in 2018, prior to the first major release. Then, a year or so later (if I remember correctly), I came across Blazor. Both platforms have come a long way since then, and I’ve seen several “Blazor vs Flutter” posts, which give some pros and cons, but no in-depth comparison of the development experience between the two.

That’s why I thought I would start this series of posts. First, I’ll take a look at various features of both frameworks. Then I’ll go into the setup process to compare what’s needed to get started with each. Finally, I’ll make the same app using both Blazor and Flutter, implementing a variety of common features such as state management, authentication, and api requests. So, let’s get started!

Overview​

First, a quick overview comparing the two. If something in this section is super important, then the choice of which to use may already be made for you.

Language​

Both Blazor and Flutter utilize strongly typed languages which, in my opinion, is a huge reason to go with them over something that utilizes javascript. Sure, Typescript can be used to add a bit of structure, but it’s still not my favorite.

Flutter utilizes Dart, while Blazor sticks with C#. In terms of utilizing a single language to build an entire application, front end and back end, I think Blazor wins. At one point, there were some api frameworks and ORMs using dart, such as Aqueduct, but I believe development was stopped. If there’s one out there, though, let me know!

That being said, if you’re going to build an API or additional services, you’ll probably need a second language if you choose Flutter. With Blazor though, you can continue using C# to build everything.

Documentation​

We all know that most of our time will be spent going through documentation, especially if we’re just starting out. Both Blazor and Flutter have well-written documentation and examples.

Blazor’s documentation is all on the official Microsoft docs site, but it’s mixed in with the rest of the .Net 6 docs. One thing I don’t like about the Blazor docs, is that I’ve found myself having trouble trying to find something again after having found it once before. That could just be an issue with me though.

Flutter’s documentation is all accessible from the main Flutter site. I think that Flutter’s docs (and site in general) is much nicer than what Blazor has, and I like that Flutter has both an easy to find cook book section showing examples of common tasks, as well as a showcase with apps that have been made with Flutter.

IDEs​

In terms of IDEs, I’ve used both VS Code as well as Android Studio for building a Flutter app. Both work really well, and I could make arguments for either.

When it comes to Blazor, however, the only real choice is Visual Studio. Rider may work, but I’ve never tried it. Also, if you’re wanting to utilize MAUI, the only option right now is Visual Studio 2022 Preview.

If you have a preference on IDEs, or have to use a specific OS, that could also play a role in whether you choose Flutter or Blazor. For Flutter, I’ve used Windows, Mac, and Linux, and the experience has been great for all of them.

For the best Blazor experience however, I almost feel like you’re limited to Windows. Sure, you can use Visual Studio for Mac, and there are options to utilize VS Code, but QoL and a ton of features are missing compared to Visual Studio, so the other options haven’t really appealed to me much.

Target Platforms​

In terms of target platforms, Flutter definitely wins. With Flutter, you can build and deploy to Android, iOS, web, Mac, Windows, and Linux. You can target the same platforms with Blazor, minus Linux. One other caviot is that in order to target web in addition to Android / iOS / Mac / Windows, you have to have at least two projects:

1. A Blazor Hybrid (MAUI) project to target Android / iOS / Mac / Windows
2. A Blazor app to target web

One way I was able to do this was:

• Create a Blazor WASM app
• Create a Blazor Hybrid (MAUI) app
• Add a reference to the WASM app within the Hybrid app
• Modify the Hybrid BlazorWebView to use the WASM App.razor file

UI​

Flutter utilizes material design, and comes with a ton of nice looking widgets. Blazor, on the other hand, utilizes plain html/javascript/css for display and doesn’t have any out of the box components aside from what comes with the default app template.

In order to get up and running quickly, you’ll need to add an external component library such as MudBlazor, Blazorise, or FluentUI. Unfortunately, I was a bit dissapointed to find out that the FluentUI library for Blazor is not the equivilent of the FluentUI library for React, although both are managed by microsoft.

Authentication​

In terms of authentication, you can use a variety of options for both Flutter and Blazor. That being said, Flutter works quite well with Firebase, and Blazor integrates well with the Microsoft Identity Platform

I should note that with the newest Blazor Server templates, I’ve run into some issues getting it integrated with Azure B2C Authentication, but one way around that is to use the blazorserver2 template and just change the framework from netcore3.1 to net6.0

Overall Score​

This is subjective of course but, in my opinion, judging from what I’ve seen so far, and taking into account the categories above, I would probably score the two as follows:

• Language: Blazor +1
• Documentation: Flutter +1, Blazor +1
• IDEs: Flutter +1
• Platforms: Flutter +1
• UI: Flutter +1
• Authentication: Flutter +1, Blazor +1

Total:​

Blazor: +3
Flutter: +5

Note: Even with Flutter having the “higher score”, depending on your particular situation, Blazor could still definitely come out ahead. With me, for example, most of my development is web based and the majority of my time is already spent on Windows with Visual Studio / Azure, so I feel it makes perfect sense to stick with Blazor over Flutter. If I need to migrate something to Android, I can spend a little bit of time creating the MAUI app and be good to go.

In the next post, I’ll compare the setup process and requirements for getting a dev environment running for Blazor and Flutter.