Screener: a sample application Uses MVVM pattern

by Flutter Awesome

screener

  • This is a sample application.
  • Uses MVVM pattern
  • Tries to encourage the use of boundaries (by using the concept of packages)

Getting Started ??

  • Download the repo
  • Make sure you are on the Flutter Stable Channel (1.22.6)

flutter channel stable
flutter upgrade
  • Install dependencies, when asked, after downloading the project.
  • Run the cmd

flutter run
  • You should see the app working at this point..

Architecture ??

  • The app follows MVVM approach

  • Their is a shared folder, which comprises of all the common entities.

  • Common entites like assets, extensions, services etc

  • Take a folder, let’s say home

  • It is broken down into components, models, utils (utilties if any), view and view_models

  • Let’s discuss each of them

Components

  • They contain the building blocks of UI.
  • A UI may comprise of a button, or card, or a list.
  • All these items are created under their respective folders
  • Let’s say for a list component,

home/components/list/xyz.component.dart

Model (from MVVM)

  • They are usually simple classes
  • For instance, let’s take home
  • It would contain models folder, including all the models needed for home

home/models/xyz.model.dart

View (from MVVM)

  • These are the screens visible to the user on their device.
  • For instance, home would have views folder

home/view/xyz.view.dart
  • We have 3 views
  1. HomeView. Now home has 2 options (Egestas scleri) and (Consectur)
  2. On click of Egestas scleri, you see the PellenView
  3. On click of Consectur, you see the FringillaView

Templates

  • They are some cases, when a view has a piece of UI, that is somewhat big.

  • We extract those bits of UI, into the templates

  • Let’s say for the home view, we have a template as,

home/templates/carousel/xyz.template.dart

ViewModel (from MVVM)

  • They help in transforming the data into models.
  • For instance, home would have view_models folder

home/view_models/xyz.viewmodel.dart

Utils

  • Any additional helpers or strings are put inside the utils
  • For instance, home would have utils folder, containing all the strings needed

home/utils/strings.dart

Shared

  • Their is a folder called shared, which includes all the common entities inside the app

  • For instance, all the styles, colors are placed under styles

shared/styles/xyz.dart
  • For instance, all the services are placed under the services folder

shared/services/xyz.service.dart

Data

  • Sample data files are put inside the assets
  • When needed they are fetched within the app.

Testing ??

  • Uses golden tests https://pub.dev/packages/golden_toolkit
  • Integration tests

flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/app_test.dart


flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/app_test.dart
-d "9B4DC39F-5419-4B26-9330-0B72FE14E15E"