MVVM с Flutter (часть 2){Freeze}

прежде чем перейти к этому, пожалуйста, посмотрите предыдущий пост первый MVVM с Flutter (часть 1)

Снова вернулись!

Продолжая предыдущий пост, в этом посте мы сосредоточимся на репозиториях и слое модели.

Помните, мы хотели бы создать нашу кодовую базу таким образом:

так что теперь мы собираемся сделать это уже в предыдущем посте.

Теперь мы сосредоточимся на этом слое, используя API в качестве источника данных.

В нашем случае у нас есть

и у нас есть

как инструменты для (ViewModel) для получения (Model)…

И, возможно, в дальнейшем XModel может управляться XRepository и так далее…

Давайте посмотрим на код,

Во-первых, вы создадите абстрактный класс, действующий как интерфейс.

abstract class ITaskRepository{
  Future<List<TaskModel>?> getAllTask();
  //and all the method regarding add, update, delet, getById   etc..
}
Вход в полноэкранный режим Выход из полноэкранного режима

а теперь посмотрим на код реализации

@singleton 
class TaskRepositoryImpl implements ITaskRepository{
  final String baseUrl = "run.mocky.io";

  @override
  Future<List<TaskModel>?> getAllTask() async{
    var url = Uri.https(baseUrl, "/v3/6bb86bda-08f1-4d7d-99c6-a975bc1201e0");
    final response = await networking.get(url);
    final responseBody = GetTaskDTO.fromJson(jsonDecode(utf8.decode(response.bodyBytes)) as Map<String,dynamic>);
    return responseBody.tasks;
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Как видно из приведенного выше кода, мы регистрируем TaskRepositoryImpl в нашем Dependency Injection и предоставляем его как Singleton Object, когда он нам нужен.

Также у нас есть метод getAlltask(), отвечающий за получение всех задач, которые есть у пользователя, то есть возвращающий список TaskModel, полученный из API, который мы используем http_package.

Как вы можете видеть, в этой строке кода мы конвертируем весь json-ответ непосредственно в объект, из этого json-объекта

{
  "tasks": [
    {
      "title": "makan",
      "description": "makan di rumah",
      "isDone": false
    },
    {
      "title": "olahraga",
      "description": "jangan lupa olahraga",
      "isDone": false
    },
    {
      "title": "mindfulness",
      "description": "you have to mindfull",
      "isDone": false
    }
  ]
}
Вход в полноэкранный режим Выйти из полноэкранного режима

в объект GetTaskDTO, как показано ниже

GetTaskDTO.fromJson(jsonDecode(utf8.decode(response.bodyBytes)
Вход в полноэкранный режим Выйти из полноэкранного режима

теперь давайте посмотрим на GetTaskDTO

@unfreezed //--> this DTO are muttable
class GetTaskDTO with _$GetTaskDTO {
  factory GetTaskDTO({
    required final List<TaskModel> tasks,
  }) = _GetTaskDTO;

  factory GetTaskDTO.fromJson(Map<String, dynamic> json) =>
      _$GetTaskDTOFromJson(json);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Этот GetTaskDTO действует как наш (Data Transfer Object), чтобы обернуть все ответы от API. и внутри этого DTO есть список TaskModel и будет преобразовывать все tasks объекты из json ответа в список TaskModel…
Теперь давайте посмотрим на TaskModel.

@freezed //--> This object immutable
class TaskModel with _$TaskModel {
  factory TaskModel({
    required final String title,
    required final String description,
    //to set defaultValue using freezed
    @Default(false) bool isDone, 
  }) = _TaskModel;

  factory TaskModel.fromJson(Map<String, dynamic> json) =>
      _$TaskModelFromJson(json);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

одна вещь о freezed, ВЫ ДОЛЖНЫ УБЕДИТЬСЯ, что все ваши названия полей и регистр соответствуют JSON ответу от API.

и теперь вы поняли, как ваша viewModel может получить доступ к модели через API… и преобразовать все Json-ответы от API непосредственно в модель.

Ссылки
http_package
замороженный_пакет

Далее
Как использовать Flutter с Freeze
Как использовать флаттер с инъекциями

Оцените статью
devanswers.ru
Добавить комментарий