Implementing the MVI Design Pattern in Flutter: A Journey toward Scalable State Management

emmanuelCode — Sun, 25 Jan 2026 17:54:38 +0000

A while back, I worked on a small Flutter project while I was learning about Providers. I tried mimicking a simple MVI design pattern from this repo and attempted to create a Flutter version of it. At the time, it received a quick review that was fairly critical because I hadn't fully understood or applied the core concepts yet. Today, I am salvaging that old project in my quest to implement a proper design pattern for scalable projects.

The original Android app tracks how many times you press the thumbs-up and heart buttons and displays those numbers on the screen. When I revisited my old Flutter version, I couldn't even get it to run. I had to migrate it twice because the Android v1 embedding and the imperative apply of Flutter's Gradle plugins have since been deprecated. If you are working with an old Flutter project created prior to version 1.12, you may need to use these two migration setups as well.

What is MVI?

After updating the project, I took a step back to ask: what exactly is MVI? MVI stands for Model-View-Intent, where the Model represents the app state, the View is the UI, and the Intent represents user actions.

In MVI, the model must be immutable. You typically need several methods, such as copyWith to update the state, comparison operators, toString, and hashCode. Writing these manually is extremely error-prone. In Android development, Kotlin provides data classes that handle this automatically, but what about Dart? Fortunately, we have the freezed package to help us out.

Defining the Model

In this Flutter app, the model needs to track the number of thumbs-ups and hearts. By using Freezed annotations, I can generate all the methods I need. Keep in mind that you will need to install the latest version freezed package dependencies and generate the code using build_runner by running dart run build_runner build (or watch if you want it to update every time the code changes). As of version 2.7.0, you no longer need to pass the -d flag to build_runner as it is now automatic. For the best performance, consider using the latest version of build_runner, as it is expected to receive more performance boosts in the near future; you can follow the progress here for details

Here is the code I used for the model:

import 'package:freezed_annotation/freezed_annotation.dart';

part 'upvote_model.freezed.dart';

//uncomment this line if parsing factory json constructor
//part 'upvote_model.g.dart';

//creating an immutable data class /hashcode/copyWith/toString etc..
//similiar to kotlin language data class
@freezed
abstract class UpvoteModel with _$UpvoteModel{

  const factory UpvoteModel({
    required int hearts,
    required int thumbsUp,
   }) = _UpvoteModel;
}

Handling User Intent

In the Android version, Kotlin uses sealed classes (or sealed unions) to help identify user intents. You can think of these as enhanced enums. With Dart 3.0, we can now use the sealed class modifier. For this app, I only needed to track two specific user properties.

// this is the same as a declaring a sealed class in kotlin
// it similar to enums but have more functionnality
// some example: https://www.baeldung.com/kotlin/sealed-class-vs-enum
sealed class MainViewEvent {}

class ThumbsUpClick extends MainViewEvent {}
class LoveItClick extends MainViewEvent {}

State Management with Riverpod

For state management, I took this opportunity to learn more about Riverpod. It is a significant improvement over the original Provider package. Providers can be automatically generated for you when using Riverpod annotations. To get started, make sure you have all the necessary dependencies and add the riverpod_generator.

A Note on Linting

I want to highlight a challenge I faced while installing the riverpod_lint package. I had some trouble enabling it properly because the official website provides very little installation information. I initially tried placing it under the analyzer tag in analysis_options.yaml, but it didn't work. I asked Gemini and Claude for help, but they suggested outdated methods, such as adding a custom lint package, which wasn't what I wanted.

After digging for hours, I looked into the analysis_server_plugin that Riverpod uses. Instead of just reading the docs, I prompted an AI to explain how it works and how to install and enable your own plugin. With that information, I was able to properly install riverpod_lint plugin.

To install it, add it as a dev dependency in your pubspec.yaml. Here is a snippet of how that file should look:

name: upvote
description: an example using riverpod state management with mvi design pattern 

publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: ^3.10.7

dependencies:
  flutter:
    sdk: flutter


  cupertino_icons: ^1.0.8
  riverpod_annotation: ^4.0.0
  flutter_riverpod: ^3.1.0
  freezed_annotation: ^3.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.10.5
  riverpod_generator: ^4.0.0+1
  riverpod_lint: ^3.1.0 # your riverpod lint package
  flutter_lints: ^6.0.0
  freezed: ^3.2.3


flutter:

  uses-material-design: true

To enable it, your analysis_options.yaml file should look like this:


include: package:flutter_lints/flutter.yaml

# riverpod package lint rules
plugins: 
  riverpod_lint: ^3.1.0

analyzer:

linter:

  rules:

Implementing the Intent Factory

To handle view events, I created a class that generates a provider for my widgets.

import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:upvote/Model/upvote_model.dart';
import 'package:upvote/View/main_view_event.dart';

part 'upvote_intent.g.dart';

// the annotation here create a provider for me and declare it
// all I need is to add the method I need for when the state change
// and get the "ref" in our flutter widget with "mainViewIntentFactoryProvider"
// variable 
// https://riverpod.dev/docs/concepts2/refs#how-to-obtain-a-ref
@riverpod
class MainViewIntentFactory extends _$MainViewIntentFactory {
  // add my model here to begin with initial values
  // I need to override the build method here
  // the "state" variable here is the model itself 
  @override
  UpvoteModel build() => const UpvoteModel(hearts: 0, thumbsUp: 0);

  void toIntent(MainViewEvent mainViewEvent) {
    state = switch (mainViewEvent) {
      ThumbsUpClick() => state.copyWith(thumbsUp: state.thumbsUp + 1),
      LoveItClick() => state.copyWith(hearts: state.hearts + 1),
    };
  }
}

In the code above, I could have created two separate methods like addHeart() and addThumbsUp() while omitting MainViewEvent entirely. However, in MVI, using sealed classes is a great way to describe your models and makes it much easier to write tests for your state machine.

Building the UI

For the widgets, I created two rows inside a column and extended the MyHomePage class with ConsumerWidget. This allows me to call my provider methods and listen for changes to rebuild the widgets with their new state. I could have wrapped my column with a Consumer() widget instead, but I find extending ConsumerWidget and getting the ref from the build() method to be much simpler and less verbose.
there are a few example of using the Consumer from the Riverpod docs.

// instead of the StatelessWidget we use ConsumerWidget
// to get access to the provider variable
class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  // here we get the WidgetRef ref variable to access our provider
  Widget build(BuildContext context, WidgetRef ref) {
     // share the provider variable to it children 
     // the watch here is to listen for changes for the upvote model
    final UpvoteModel upvoteModel = ref.watch(mainViewIntentFactoryProvider);
    return Scaffold(
        appBar: AppBar(
          title: const Text('Upvote Flutter Version'),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      '${upvoteModel.hearts} ❤',
                      style: Theme.of(context).textTheme.displaySmall,
                    ),
                    const SizedBox(width: 10),
                    Text(
                      '${upvoteModel.thumbsUp} 👍',
                      style: Theme.of(context).textTheme.displaySmall,
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ElevatedButton(
                        child: const Text('+❤'),
                        onPressed: () {
                          // use the notifier inside read to call our intent
                          // method from upvote_intent.dart
                          ref
                              .read(mainViewIntentFactoryProvider.notifier)
                              .toIntent(LoveItClick());
                          debugPrint('heart');
                        },
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ElevatedButton(
                        child: const Text('+👍'),
                        onPressed: () {
                          ref
                              .read(mainViewIntentFactoryProvider.notifier)
                              .toIntent(ThumbsUpClick());
                          debugPrint('thumb');
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ));
  }
}

Wrapping Up

And that's it! When I tap on either button, a view event is fired through my intent method. Then, my provider copies the old model state and returns a new one while also listening for any changes to update the view.

You can view the full Flutter app on GitHub here. I'm still relatively new to MVI and looking to improve, so if you spot any errors or have suggestions, please let me know!

This article has been reviewed and refined with the assistance of NotebookLM to ensure technical accuracy and clarity.

How to Fix FlutterFire CLI Errors in the "Get to know Firebase for Flutter" Codelab

emmanuelCode — Thu, 22 Jan 2026 13:08:29 +0000

I wanted to share a specific hurdle I encountered while working through the "Get to know Firebase for Flutter" codelab and explain how to resolve it. For context, I was using VS Code on Nobara OS.

Everything went smoothly from Step 1 through Step 3. However, I ran into a bit of trouble at Step 4, where you're required to add the FlutterFire libraries. If you're a beginner, you might struggle here because, while the documentation mentions the Firebase CLI, it’s easy to overlook the authentication requirements or the specific installation nuances.

If the CLI isn't set up correctly, running flutterfire configure will return an error in your terminal like this:

··• flutterfire configure

i Found 0 Firebase projects.

Failed to fetch your Firebase projects. Fetch failed with this: FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

COMMAND: firebase projects:list --json

ERROR: Failed to authenticate, have you run firebase login?

✔ Would you like to create a new Firebase project? · yes

✔ Enter a project id for your new Firebase project (e.g. my-cool-project) · fir-flutter-codelab-2d9cc

⠦ Creating new Firebase project fir-flutter-codelab-2d9cc...
FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

COMMAND: firebase projects:create fir-flutter-codelab-2d9cc --json

ERROR: Failed to authenticate, have you run firebase login?

The Fix

To resolve this, you first need to ensure Node.js is installed on your system. If you haven't set it up yet, you can find the installers at the official Node.js website.
Once Node.js is ready, run the following command to install the Firebase CLI globally: npm install -g firebase-tools
While there are other ways to install the Firebase CLI—such as using standalone binaries or auto-install scripts—I've found it much easier to maintain via npm. Using npm automatically sets up the firebase global command in your PATH.

In contrast, some binary scripts require you to manually configure your PATH or rename the file so that the terminal recognizes the firebase command. If the FlutterFire CLI can't detect that command, it will throw an error. Using npm simply makes it easier to manage and update in the long run.

Final Steps

After the installation is complete, make sure to run the login command in your terminal: firebase login
Once you've authenticated your Google account, you can proceed with flutterfire configure in your project directory. After getting past this CLI hurdle, the rest of the codelab went perfectly.