Flutter : MVVM

The architecture is very simple. It consists of 3 major pieces, everything else is up to your implementation style. These pieces are:
**View**: Shows the UI to the user. Single widgets also qualify as views (for consistency in terminology) a view, in this case, is not a « Page » it’s just a UI representation.
**ViewModel**: Manages the state of the View, business logic, and any other logic as required from user interaction. It does this by making use of the services
**Services**: A wrapper of a single functionality/feature set. This is commonly used to wrap things like showing a dialog, wrapping database functionality, integrating an API, etc.

*Pour activer le modèle :*

1°) Dependency

Ajout du pakage staked pubspect.yaml.

dependencies:
  stacked: ^2.2.5

2°) View Model

Créez un fichier, exemple my_screen_viewmodel.dart et ajouter une classe Dart qui étends ChangeNotifier:

import 'package:flutter/foundation.dart';class MyScreenViewModel extends ChangeNotifier {
  int _someValue = 0;
  int get someValue => _someValue;  Future loadData() async {
    // do initialization...
    notifyListeners();
  }  void doSomething() {
    // do something...
    notifyListeners();
  }
}

3°) View

Créez un ficher my_screen.dart qui contiendra les widgets pour l’affichage

Add a ViewModelBuilder to the top of your MyScreen widget tree. The easiest way to do this is to use a shortcut to wrap the top widget with a new widget. Instead of having a child, though, use => to return the top widget from the builder parameter.

import 'package:stacked/stacked.dart';class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<MyScreenViewModel>.reactive(
      viewModelBuilder: () => MyScreenViewModel(),
      onModelReady: (model) => model.loadData(),
      builder: (context, model, child) => MyTopWidget(
          
        // your widget tree      ),
    );
  }
}

Then within your widget tree you can access the view model like this:

model.someValue
model.doSomething()

Demo : incrémentation d’un compteur

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    // Using the reactive constructor gives you the traditional ViewModel
    // binding which will execute the builder again when notifyListeners is called.
    return ViewModelBuilder<HomeViewModel>.reactive(
      viewModelBuilder: () => HomeViewModel(),
      onModelReady: (viewModel) => viewModel.initialise(),
      builder: (context, viewModel, child) => Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            viewModel.updateTitle();
          },
        ),
        body: Center(
          child: Text(viewModel.title),
        ),
      ),
    );
  }
}

//-- ViewModel
class HomeViewModel extends ChangeNotifier {
  String title = 'default';
  int counter = 0;

  void initialise() {
    title = 'initialised';
    notifyListeners();
  }

  Future updateTitle() async{
    for (int i = 0; i < 4; i++) {
      counter++;
      title = '$counter';
      notifyListeners();
      print("--> $counter");
      await Future.delayed(const Duration(milliseconds: 1000));
    }
    title='FINISH';
    notifyListeners();
  }

}

A TESTER : https://medium.com/flutter-community/how-to-show-download-progress-in-a-flutter-app-8810e294acbd