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.

  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...
} void doSomething() {
// do something...

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 {
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.
  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;

  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

  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: () {
        body: Center(
          child: Text(viewModel.title),

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

  void initialise() {
    title = 'initialised';

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


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

Références :




Articles récents
Commentaires récents
fatima dans Bienvenue !
AdminDroid dans Bienvenue !
fatima dans Bienvenue !
%d blogueurs aiment cette page :