Vamos comparar o que você aprendeu sobre MVVM na aula anterior com o que temos até agora e que ainda será feito na próxima aula em vídeo.


Model:

O model em nossa aplicação é a classe Todo.


View:

É o widget TodoListWidget. Nele nós exibimos todas as tarefas.


ViewModel:

Relembrando sobre o ViewModel: "Ele contém a lógica de apresentação e atua como uma camada intermediária entre a View e o Model."

Em nossa aplicação o ViewModel nós chamamos de TodoListController.


Exemplo da aula anterior atualizado para o nosso projeto:

import 'package:flutter/material.dart';

// Model
class Todo {
  final int id;
  final String task;

  Todo({required this.id, required this.task,});
}

// ViewModel
class TodoListController {
  late List<Todo> _todoList;

  TodoListController() {
    // Aqui você poderia inicializar o usuário, buscar dados, etc.
    _todoList = [
      Todo(id: 1, task: 'Task 1'),
      Todo(id: 2, task:'Task 2'),
      Todo(id: 3, task: 'Task 3'),
    ];
  }

  List<Todo> get todoList => _todoList;
}

// View
class TodoListWidget extends StatelessWidget {
  final TodoListController viewModel = TodoListController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Minhas Tarefas'),
      ),
      body: ListView.builder(
        itemCount: viewModel.todoList.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(viewModel.todoList[index].task),
          );
        }
      ),
    );
  }
}


Neste exemplo (versão simplificada do projeto real) está tudo junto, mas nas aulas cada um fica separado em seu próprio arquivo.