Blazor vs Flutter — Part 2

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)
2. Blazor vs Flutter — Part 2 (Project Setup) (You are here)
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)

Project Setup​

Before I get too far into project setup, I feel it’s good to give a quick overview of what we’re actually going to build and why. There’s a lot to cover, so it’s not going to be a large or complex project, but it will be large enough to compare several common functionalities between Blazor and Flutter.

Truthfully, there are too many things to compare overall, so I will be limiting the scope of this series to the following:

• Building a web app
• Making API requests to a weather API
• State management at the component and application level
• Basic, single tenant authentication
• Deploying to the cloud
• Exploring how to port the application to windows & android

In addition, I’ll be performing everything on a windows machine, but the process for Mac or Linux shouldn’t be much different.

If you want to take a look at the code as this series progresses, you can find the repo on GitHub.

Prerequisites​

In this section, we’ll take a look at the various software and requirements to get up and running.

Flutter​

There’s a bit more involved with getting Flutter up and running than Blazor, in my opinion, and full setup documentation can be found on the official website.

We need the following Components:

• Powershell (installed by default)
• Git
• The Flutter SDK
• Android Studio
• Visual Studio 2022 (For Windows builds)

Blazor​

For building Blazor apps, we merely need Visual Studio 2022 — During the installation process, we’ll be able to select the various workloads we want to install. For MAUI apps, we currently need the preview version of VS 2022.

Installation​

Now that we have everything downloaded, let’s get to installing!

Most of these things are already installed on my machine, so there may be a discrepancy here or there if you’re doing a fresh install

Flutter​

Let’s start with Flutter. Again, the official guide can be found here

First, I’ll make a flutter directory and clone the repo

mkdir C:\flutter
cd C:\flutter
git clone https://github.com/flutter/flutter.git -b stable

Next, we’ll add the bin folder to the path so we can run commands from any terminal

At this point, we can install Android studio, as well as one or two of the more recent Android SDKs. My preference is to use VS Code, so if you want, you can install that as well.

In order to test on an android device, you’ll need to have an android emulator. That can be setup inside of Android Studio and is fairly simple to do.

If you go the VS Code route, you’ll need the dart and Flutter extensions:

• Flutter

Once that’s completed, we’ll run flutter doctor to see what else needs to be done.

flutter doctor

The first time you run it, there will be some license agreements to accept, and probably some missing components, but the nice thing is it tells you exactly what’s needed.

Eventually you’ll get results that look like some variation of this:

At this point, we should be good to go

Blazor​

As I said earlier, Blazor is much easier to get started with. Download Visual Studio and select the web and maui workloads. If you want to build Flutter for Windows, you’ll need the c++ workload as mentioned in the screenshot above

Project Creation​

Now for the actual project creation. Honestly, it’s super easy for both Flutter and Blazor. Flutter (using VS Code) is a single command with some selections, and Blazor (using VS) is a graphical walkthrough.

Flutter​

The shortcut for commands in VS Code is CTRL + SHIFT + P, so you can use that and then type Flutter. You’ll select “New Project”

From there, you’ll Select “Application” and choose the folder in which to save it. Finally, you’ll enter a name.

There are a lot of files that are created by default, but all of the code lives inside the lib directory. “main.dart” is the entry point, and specifically, the main() method inside of it

void main() {
  runApp(const MyApp());
}

Everything inside of Flutter is a widget, so runApp(const MyApp()) runs the MyApp widget, which is just a stateless widget that returns a material app.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Blazor​

With Blazor, we start up Visual Studio, and choose to create a new project. In this case, we’ll just select a Blazor Webassembly project

Then we configure the project. You have a few different options, but for now I’m just going to use .Net 6, and choose the Progressive Web App option. If you want to add an API or server-side logic, you can choose ASP.Net Core hosted and it will build a small server project for you as well.

In my opinion, the structure for a Blazor project is much more convoluted than a Flutter project. On top of that, file names and directories are slightly different, depending on what kind of project you go with (WASM, Server, or Hybrid / MAUI). Once you get familiar with it though, it’s not bad.

As far as the actual program’s concerned, the entry point is Program.cs

using BlazorApp;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();

Which runs the App.razor file

<Router AppAssembly="@typeof(App).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    <FocusOnNavigate RouteData="@routeData" Selector="h1" />
  </Found>
  <NotFound>
    <PageTitle>Not found</PageTitle>
    <LayoutView Layout="@typeof(MainLayout)">
      <p role="alert">Sorry, there's nothing at this address.</p>
    </LayoutView>
  </NotFound>
</Router>

Which in turn, utilizes the Shared/MainLayout.razor file

@inherits LayoutComponentBase
<div class="page">
  <div class="sidebar">
    <NavMenu />
  </div>
  <main>
    <div class="top-row px-4">
      <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>
    <article class="content px-4">@Body</article>
  </main>
</div>

@Body from MainLayout.razor is where your content actually shows up. In this case, that means our Index.razor, Counter.razor, and FetchData.razor from the Pages directory.

First Build​

Now that the apps are created, let’s try running them.

Flutter​

Flutter gives us a counter to start with. From vs code, create a new terminal and enter the following:

flutter run -d chrome

Blazor​

Blazor gives us a welcome page, a counter, and a weather page. From visual studio, you click the “Blazor App” & green arrow at the top of the screen.

And now we have a basic project created for both Flutter and Blazor. Next time, We’ll start adding some packages that will be used in our demo app.