Blazor vs Flutter - Part 3

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

1. Blazor vs Flutter - Part 1 (Overview)
2. Blazor vs Flutter - Part 2 (Project Setup)
3. Blazor vs Flutter - Part 3 (Package Installation) (You are here)
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)

Now that we have our projects setup, let's take a look at getting some packages installed to add some functionality.

You can see the repository on GitHub

Package Repositories​

Both Flutter (Dart) and Blazor (.Net) have an official package repository where you can search for packages to use in your project.

Dart and Flutter make use of pub.dev, while Blazor and .Net have nuget.org. The functionality is about the same, but pub.dev is much more useful, in my opinion.

When looking at packages to use in your flutter app, pub.dev provides a readme, examples, installation instructions, supported platforms, and more - all on the same page. Nuget.org however, only displays a small summary.

Both display links to the project home page though, so it's easy to find the needed documentation.

So which packages do we need for our project? Well, we're going to need to make API calls, manage application level state, and add authentication. As a starting point, let's try the following:

Flutter Packages​

Flutter doesn't need any additional packages for UI unless you want to use a specialized component somewhere. It also has some basic dart packages for handling async requests when calling an API. We will need something to manage state and authentication though.

There are a lot of different options to choose from, but in this case I'm just going to use the following:

• provider for state
• firebase_auth for authentication with Firebase

Blazor Packages​

Blazor on the other hand, does need some assistance when it comes to UI components. You could always build your own with basic HTML, but that takes additional time and can be a pain to get styling the way you want (at least for me).

Because of that, I prefer to use a package that provides some pre-made components. We shouldn't need anything special for handling state or making API calls right away, but will need something to work with authentication.

Let's start with the following packages:

• Mudblazor for ui components
• Microsoft.Authentication.WebAssembly.Msal for authentication with Azure

Package Installation​

There are multiple ways to install a package for both Dart / Flutter and .Net / Blazor. For Flutter, you can use the command line or update the pubspec.yaml file. With Blazor, you can use the command line, update the .csproj file, or use the Nuget Package Manager within Visual Studio.

Flutter​

Let's take a look at updating the yaml file first. All we need to do is add an additional line to the dependencies section, and the line that we need to add can be found in the "Installing" section of the pub.dev page.

In the case of adding the provider package, we use the following:

provider: ^6.0.3

When saving in vs code, the dart extension automatically runs the command to install the package.

The second option is to run the flutter pub add command. Doing so for the firebase_auth package would look like this:

flutter pub add firebase_auth

This updates the pubspec.yaml file with the firebase_auth package and installs any needed depenencies. Again, the command to run can be found on the pub.dev page for the package.

One thing to note about Flutter packages is that you have a "dev_dependencies" section. So if you want to use a package in development, but not include it in the full release, you can add it here instead of the "dependencies" section.

Blazor​

Lets use the command line first. With .Net, you can use the nuget package manager or .net cli to install via the command line. In this case, we'll use the .net cli to install the Microsoft.Authentication.WebAssembly.Msal package.

dotnet add package Microsoft.Authentication.WebAssembly.Msal

This will add the package to your project and update the .csproj file

Another option is to open Nuget within Visual Studio and search for a package. Let's use that to find the MudBlazor package

We simply click the package we want, choose the version, and click install.

Again, getting packages installed is pretty straight forward. In the next post, we'll actually start building some of the components and pages, so I'll see you there!