MVVM Architecture

Overview

MVVM stands for "Model-View-ViewModel." It's a software architectural pattern primarily used in applications to separate the user interface logic from the business logic. MVVM has its roots in Microsoft's WPF (Windows Presentation Foundation) and Silverlight technologies, but it's a pattern that has been adopted in many other platforms, including Flutter.

Here's a breakdown of the components in the MVVM pattern:

• Model: Represents the data and business logic. It holds the actual information, rules, and methods to process and manipulate that information. In the context of Flutter, this might be where your API calls, data persistence, and business rules reside.

• View: Represents the UI of the application. It displays the data from the ViewModel to the user and sends user commands to the ViewModel. In Flutter, this would be your widgets.

• ViewModel: Acts as a bridge between the Model and the View. It holds the presentational logic and gets the data from the Model, transforms it into a user-friendly format, and exposes this formatted data for the View to display. Any commands from the View are also processed in the ViewModel, which then communicates the appropriate actions to the Model.

Repository

In the context of MVVM and modern app architectures, the "Repository" pattern is an abstraction layer placed between the data sources and the rest of the application. It provides a clean API to the rest of the app for accessing data, regardless of where the data comes from (like a network source, local database, cache, etc.).

When using the MVVM pattern, the ViewModel interacts with the Repository to fetch, save, or process data, instead of directly calling the data source.

class PlaybackConfigRepository {
  static const String _autoplay = "autoplay";
  static const String _muted = "muted";

  final SharedPreferences _preferences;

  PlaybackConfigRepository(this._preferences);

  Future<void> setMuted(bool value) async {
    _preferences.setBool(_muted, value);
  }

  Future<void> setAutoplay(bool value) async {
    _preferences.setBool(_autoplay, value);
  }

  bool isMuted() {
    return _preferences.getBool(_muted) ?? false;
  }

  bool isAutoplay() {
    return _preferences.getBool(_autoplay) ?? false;
  }
}

Change Notifier Provider

ChangeNotifierProvider is a part of the provider package, a popular dependency injection and state management solution. The provider package offers a range of classes and functionalities to efficiently manage and propagate state changes in your Flutter applications, and ChangeNotifierProvider is one of the most commonly used.

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();  // Notify all listeners about the change
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (context) => CounterModel(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);
    return Scaffold(
      appBar: AppBar(title: Text('Provider Example')),
      body: Center(child: Text('Counter: ${counter.count}')),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}