Using MVI Architecture Pattern in Flutter with RxDart

Introduction

Flutter’s widget-centric design pairs well with reactive architectures. Model-View-Intent (MVI) enforces unidirectional data flow, isolating state and side effects. By combining MVI with RxDart streams, you achieve predictable, testable state management. This tutorial walks through MVI’s principles, setting up RxDart in a Flutter project, building key MVI components, and wiring them into your UI.

MVI Pattern Overview

MVI divides an app into three roles:

• Model: Represents immutable state. Each state emission triggers a UI update.

• View: Renders widgets based on Model and emits user Intents.

• Intent: Captures user actions or lifecycle events as a stream of events.

Data flows from View → Intent → Business Logic (Reducers, Use Cases) → Model → View. This unidirectional cycle prevents state mutations from unpredictable sources. RxDart adds powerful operators (map, switchMap, distinct) to filter, transform, and combine streams.

Setup Flutter & RxDart

1. Create a new Flutter project: flutter create mvi_app

2. Add RxDart to pubspec.yaml:

   dependencies:
     flutter:
       sdk: flutter
      rxdart
   
   

3. Run flutter pub get.

4. Import RxDart in your Dart files: import 'package:rxdart/rxdart.dart';

With RxDart ready, define the Intent and Model classes. Keep them in separate files to enforce decoupling.

Building MVI Components

Intent Stream

Define an enum or class for user actions. Use a PublishSubject to capture Intents:

import 'package:rxdart/rxdart.dart';

enum CounterIntent { increment, decrement }

class CounterIntentStream {
  final _intent = PublishSubject<CounterIntent>();
  Stream<CounterIntent> get stream => _intent.stream;
  void dispatch(CounterIntent action) => _intent.add(action);
  void dispose() => _intent.close();
}

Model (State Object)

Keep state immutable. Expose it via a BehaviorSubject so new subscribers get the latest value:

class CounterModel {
  final int count;
  CounterModel(this.count);
}

class CounterModelStream {
  final _state = BehaviorSubject<CounterModel>.seeded(CounterModel(0));
  Stream<CounterModel> get stream => _state.stream.distinct();
  void update(CounterModel m) => _state.add(m);
  void dispose() => _state.close();
}

Connecting UI to Streams

Wire Intents to Model updates in a controller or ViewModel. Subscribe to Intent stream, map actions to new state, and push to ModelStream:

void bind(CounterIntentStream intents, CounterModelStream models) {
  intents.stream
    .scan<CounterModel>((acc, intent, _) {
      final current = acc.count;
      final next = intent == CounterIntent.increment ? current + 1 : current - 1;
      return CounterModel(next);
    }, models._state.value)
    .listen(models.update);
}

In your Flutter widget, use a StreamBuilder to render state and call dispatch on user interaction:

@override
Widget build(BuildContext context) {
  return StreamBuilder<CounterModel>(
    stream: modelStream.stream,
    builder: (_, snapshot) {
      final count = snapshot.data?.count ?? 0;
      return Column(
        children: [
          Text('$count'),
          ElevatedButton(
            onPressed: () => intentStream.dispatch(CounterIntent.increment),
            child: Text('Increment'),
          ),
        ],
      );
    },
  );
}

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Using MVI with RxDart in Flutter provides a clear, testable architecture with unidirectional data flow. By isolating Intents, Model, and View logic, you prevent tangled state and side effects. RxDart’s rich operator set simplifies stream transformations. Apply these principles to scale your Flutter apps with predictable state management.