Flutter Clean Architecture with Rorty App

Mesut G.
Innovance Blog
Published in
6 min readJun 30, 2022
Photo from swapps

If you want to check directly the project before continuing reading the introduction, you can do by accessing the following link:

Why Flutter

Flutter is an SDK for building fast-moving and engaging cross-platform mobile apps provided by Google. Dart is a development language for Flutter apps. Flutter supports compiling code on both Android, iOS, Web and Desktop using a single code base written in Dart.

Why Clean Architecture

MVVM/MVC/MVP/MVI architecture is good enough for most of the applications. But when the application grows, it becomes hard to maintain the huge codebase, and sometimes, it requires refactoring efforts to separate the responsibilities of each and every layer and then clean architecture comes into the picture.

An important goal of clean architecture is to provide developers with a way to organize code in such a way that it encapsulates the business logic but keeps it separate from the delivery mechanism.

Introduction

I built a Flutter Rorty Application(Rick And Morty) to reinforce what I’ve learned so far and to improve myself.

Rorty focused on the scalability, testability and maintainability written in Dart, following best practices using Flutter.

What Did I Develop

The project presents a modern, approach to Flutter application development using Dart and latest tech-stack with Flutter.

The goal of the project is to demonstrate best practices, provide a set of guidelines, single module application, scalable, maintainable and testable. This application may look simple, but it has all of these small details that will set the rock-solid foundation of the larger app suitable for bigger teams and long application lifecycle management.

For this project I try to used the Clean Architecture. The MVP Features:

  • Splash
  • Home
  • Characters List
  • Character Detail
  • Episodes List
  • Episodes Detail
  • Locations List
  • Locations Detail
  • Settings
  • Abouts

Screenshots

Android
iOS
Desktop
Web

Application structure

One of the key benefits of clean architecture is supposed to be clear navigation throughout the app and source code. Looking at the root folder of the project, the following structure becomes clear.

Data

The data layer is responsible for selecting the proper data source for the domain layer. It contains the implementations of the repositories declared in the domain layer.

Components of data layer include:

model:

  • -dto: Defines dto of ui model, also perform data transformation between domain, response and entity models.
  • -local: Defines the schema of SQLite database.
  • -remote: Defines POJO of network responses.

local:

This is responsible for performing caching operations using Floor.

remote:

This is responsible for performing network operations eg. defining API endpoints using Retrofit/Dio.

repository:

Responsible for exposing data to the domain layer.

Domain

This is the core layer of the application. The domain layer is independent of any other layers thus ] domain business logic can be independent from other layers.This means that changes in other layers will have no effect on domain layer eg. screen UI (presentation layer) or changing database (data layer) will not result in any code change withing domain layer.

Components of domain layer include:

  • usecase: They enclose a single action, like getting data from a database or posting to a service. They use the repositories to resolve the action they are supposed to do.

Presentation

The presentation layer contains components involved in showing information to the user. The main part of this layer are the Views(widgets) and ViewModels.

Tech Stacks

This project uses many of the popular libraries, plugins and tools of the flutter ecosystem.

  • Stacked — An architecture and widgets for an MVVM inspired architecture in Flutter.
  • Provider — A wrapper around InheritedWidget to make them easier to use and more reusable.
  • Get It — Dependency Injection library.
  • Retrofit — A dio client generator using source_gen and inspired by Chopper and Retrofit.
  • Dio — A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc.
  • Go Router — A declarative router for Flutter based on Navigation 2 supporting deep linking, data-driven routes and more.
  • Flutter Native Splash — Customize Flutter’s default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.
  • Shared Preferences — Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android.
  • Easy Localization — Easy and Fast internationalizing and localization your Flutter Apps.
  • Url Launcher — Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes.
  • Floor — The typesafe, reactive, and lightweight SQLite abstraction for your Flutter applications.
  • Logger — Small, easy to use and extensible logger which prints beautiful logs.

Code Analyze Tools

  • Lints — This package contains a recommended set of lints for Flutter apps, packages, and plugins to encourage good coding practices.

Conclusion

Flutter, easy to learn, due to the same codebase for Android and iOS applications, you can use to launch apps on both mobile OS simultaneously also you can develop an app that is accessible to all features natively in Android and iOS.

How Can You Contribute?

Full Project

You can access the source code of the project from the link below.

You can check and review my other clean architecture training projects and medium link the below.

Thanks 🚀

I hope it helps you. If it is useful to you, you can clap this article and follow me for such these articles.

Happy and healthy coding!

Que tengas un buen día, continuará 😊 🏄‍🚀

--

--

Mesut G.
Innovance Blog

Hola everybody, Sharing Software Development Experience, focus on Mobile. https://developersancho.medium.com/subscribe Continue as long as