Mobile

Application
Development

DR. MOMINA MOETESUM

PROFILE: LINKEDIN PROFILE

EMAIL: [email protected]

1
 Agile Software Development

• Agile is a software
development methodology that
focuses on flexibility, collaboration
and efficiency that allow teams to
deliver quality products.

2
Mobile Application Development Week 9: Agile Software Development
 Layered Architecture
Introducing a clear separation of
concerns between different parts of the
system.

This makes our code easier to read,

maintain and test.

• presentation layer
• application layer
• domain layer
• data layer

3
Mobile Application Development Week 9: Layered Architecture
 Model-View Separation

• Models are classes that deal with the data for an app,

• Views are classes that present that data on screen (i.e. Widgets).

• For detailed examples, refer to Handout 7: Basic State Management

(uploaded in LMS)

4
Mobile Application Development Week 9: Model-View Separation
 Domain Model
The domain model is a conceptual model of the domain that incorporates both
behavior and data.

5
Mobile Application Development Week 9: Domain Model
 Model
The Model in Flutter can be any Dart class that contains the data and the
logic needed to manipulate the data.

For example, if you have an application that displays a list of users, the
Model can be a class that contains an array of User objects and methods
to add, delete, and update the users.

It's important to note that the Model folder should not contain any UI code.
The sole purpose of this folder is to store the data and logic of the
application, keeping it separate from the presentation.

6
Mobile Application Development Week 9: Domain Model
 Model

7
Mobile Application Development Week 9: Domain Model
 View
The View in Flutter is created using the widgets provided by the Flutter framework. The
widgets are used to build the UI and display the data from the Model. For example, you
can use a ListView widget to display the list of users from the Model.

The main goal of the View folder is to present the data from the Model layer in a
way that is easy to understand and interact with.

Its important to create different folders for different functionalities to keep your
code organized and maintainable.

By keeping the View folder clean and simple, it makes it easier to manage and update the
visual appearance of your application without affecting the underlying data and business
logic.

8
Mobile Application Development Week 9: View
 View

9
Mobile Application Development Week 9: Views
 How to pass data from model to view?
• Ideally, Data Classes should be in the widget tree to
take advantage of Hot Reload
• But how to place a model on the widget tree, since
Models are not widgets, after all, and there is nothing
to build onto the screen.
• A possible solution, InheritedWidgets.

• Its job is to pass data down to its children, but from a

user's perspective, it's invisible.

10
Mobile Application Development Week 9: Model-View Separation
 InheritedWidgets

InheritedWidget provides an easy way to

grab data from a shared ancestor by
creating a state widget that wraps a
common ancestor in the widget tree.

final studentState = StudentState.of(context);

11
Mobile Application Development Week 9: Inherited Widgets
 .of(context)

The of(context) call takes the build context (a handle to the current widget location), and
returns the nearest ancestor in the tree that matches the StudentState type.

InheritedWidgets also offer an updateShouldNotify() method, which Flutter calls to

determine whether a state change should trigger a rebuild of child widgets that use it.

12
Mobile Application Development Week 9: InheritedWidgets
 Layered Architecture

• Controllers

• Repositories

• Services

MV* Patterns:
• MVC: Model-View Controller
• MVP: Model-View Presenter
• MVVM:

13
Mobile Application Development Week 9: Layered Architecture
 Controllers
• The Controller in Flutter can be a Dart class that connects the Model
and View and handles user input.
• The Controller can listen to events from the View and update the Model
accordingly. For example, if the user clicks on a button in the View, the
Controller can respond to the event and perform some action, such as
adding a new user to the list.
• The Controller folder is responsible for managing communication
between the Model and View layers.
1. Handles user input
2. Update Model
3. Notify the View
4. Validate data
5. Manage navigation

14
Mobile Application Development Week 9: Controllers
 Controllers

LoginController:

This class handles the logic for handling

the login button press. It uses the
Firebase Auth API to perform the
authentication, and if successful,
navigates to the home screen. If the
authentication fails, it sets the error
message to display to the user.

15
Mobile Application Development Week 9: Controllers
 Utils

Utils:

This folder is used to store utility

functions that are used across
the application. These functions
are often used to perform tasks
that are repetitive, such as
formatting dates, validating
input, or making API calls.

16
Mobile Application Development Week 9: Utils
 Constants

Constants:

This folder is used to store constant

values that are used across the
application. In addition to API
endpoint URLs, color codes, and font
sizes, it's also a good practice to store
padding and margin values for the
overall application in this folder.

17
Mobile Application Development Week 9: Constants
 Constants

Constants:

This folder is used to store constant

values that are used across the
application. In addition to API
endpoint URLs, color codes, and font
sizes, it's also a good practice to store
padding and margin values for the
overall application in this folder.

18
Mobile Application Development Week 9: Constants
 Other MV* Patterns (Self-Study)

19
Mobile Application Development Week 9: MV* Patterns
 Repositories
• repositories are found in the data layer. And their job is to:

• isolate domain models (or entities) from the implementation details of the
data sources in the data layer.
• convert data transfer objects to validated entities that are understood by
the domain layer
• (optionally) perform operations such as data caching.

• The repository pattern is very handy if your app has a complex data
layer with many different endpoints that return unstructured data (such as
JSON) that you want to isolate from the rest of the app.
• More broadly, here are a few use cases where the repository pattern is most
appropriate:
• talking to REST APIs

• talking to local or remote databases (e.g. Sembast, Hive, Firestore, etc.)

• talking to device-specific APIs (e.g. permissions, camera, location, etc.)

20
Mobile Application Development Week 9: Repositories
 Services
• Services are classes that offer a specific functionality. A Service is a
class that uses methods that enable it to provide a specialized
feature, emphasizing specialized. A Service class offers just one
distinct input to the app. Examples include:
• ApiService

• LocalStorageService

• ConnectivityService

• ThemeService

• MediaService etc.

21
Mobile Application Development Week 9: Services