MVI in Flutter: Model–View–Intent with One State and Intents

View --intent--> reducer(state, intent) --new state--> View

import 'package:flutter/material.dart';

// ---------- Model: one immutable state ----------
class CounterState {
  const CounterState({this.count = 0, this.saving = false, this.message});
  final int count;
  final bool saving;
  final String? message;

  CounterState copyWith({int? count, bool? saving, String? message}) => CounterState(
        count: count ?? this.count,
        saving: saving ?? this.saving,
        message: message,
      );
}

// ---------- Intents: what the user wants ----------
sealed class CounterIntent {}
class Increment extends CounterIntent {}
class Reset extends CounterIntent {}
class Save extends CounterIntent {}

// ---------- Store: turns intents into new states ----------
class CounterStore extends ValueNotifier<CounterState> {
  CounterStore() : super(const CounterState());

  Future<void> dispatch(CounterIntent intent) async {
    switch (intent) {
      case Increment():
        value = value.copyWith(count: value.count + 1);
      case Reset():
        value = const CounterState();
      case Save():
        value = value.copyWith(saving: true);
        await Future.delayed(const Duration(seconds: 1)); // pretend to save
        value = value.copyWith(saving: false, message: 'Saved ${value.count}');
    }
  }
}

// ---------- View ----------
final store = CounterStore();

void main() => runApp(const MaterialApp(home: CounterPage()));

class CounterPage extends StatelessWidget {
  const CounterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<CounterState>(
      valueListenable: store,
      builder: (context, state, _) => Scaffold(
        appBar: AppBar(title: const Text('MVI')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('${state.count}', style: const TextStyle(fontSize: 56)),
              if (state.saving) const CircularProgressIndicator(),
              if (state.message != null) Text(state.message!),
              const SizedBox(height: 16),
              Wrap(
                spacing: 8,
                children: [
                  FilledButton(onPressed: () => store.dispatch(Increment()), child: const Text('+1')),
                  OutlinedButton(onPressed: () => store.dispatch(Reset()), child: const Text('Reset')),
                  OutlinedButton(
                    onPressed: state.saving ? null : () => store.dispatch(Save()),
                    child: const Text('Save'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}