Scalable folder & files structure for Flutter Application

In this article, We will be covering how to structure our large-scale application which solves the separation of concerns also.

6 min readDec 31, 2021

Default Flutter doesn’t provide any file structure only the main.dart file with one stateful widget is present to run the sample counter. Now we will add more files and folders to the lib folder that solves file structure concerns.

Including Assets folder

Now we will add an assets folder at the root of the project which we will use to store images, fonts, raw files, video/audio files, translation files, .json files, and HTML files.

Make sure you have added assets path is added to pubspec.yaml file

Adding the config folder

Inside the lib folder, Now, add the config folder

config folder contains the following folders:

routes:

themes:

Here is how the config folder looks like

Adding Constants

constants which are static throughout the applications

api_path.dart: When using REST API service in dart then we can store all the API endpoints in a separate file api_path.dart
assest_path.dart: Although we have described the assets path in pubspec.yaml but to use that asset in an application we need to give their relative path in any widgets.
If we add all the asset's relative paths in one file then it will be easy for us to get all the paths and update the path if required in the future.
app_constants.dart: This is where all our application constants will be present and this is different for each application.

Here is how the constants folder looks like:

Adding Custom Widgets

Despite flutter default widgets, developers need to make more customized widgets in a large scale application

Here is how the widgets folder looks like

Adding Utils

Utils folder contains the helpers, services, UI utils, mixins that are used throughout the application

Exploring helpers

Helper: It present in lib/utils/helpers/text_helper.dart.
text_helper.dart will contain all the code which are required to convert the String to show in a Text widget or anything like that.

Exploring Services

We will be creating different kinds of service files in the folder lib/utils/services
Note: All the services will be singleton classes

local_storage_service.dart: In this file, we write all the code needed to store and get data from the local storage using the plugin shared_preferences.
In this file, there you can put getters and setters for every data to be stored in the local storage.
secure_storage_service.dart: We do not store user credentials, API tokens, secret API keys in local storage, for that we make use of flutter_secure_storage which stores data in the Android Keystore and Apple keychain with platform-specific encryption techniques.
In this file, there you can put getters and setters for every data to be stored in platform secure storage.
rest_api_service.dart: We do call the rest API to get, store data on a remote database for that we need to write the rest API call at a single place and need to return the data if the rest call is a success or need to return custom error exception based on 4xx, 5xx status code. We can make use of http package to make the rest API call in the flutter
native_api_service.dart: We use multiple packages to access the native services like Camera, Photo Gallery, Location, etc for that we need to write code in a separate file which we can be used from multiple places throughout the application

Exploring UI Utils
All the common UI related things should be present inside lib/utils/ui folder
Here is the list of folders and files which will be present in the directory lib/utils/ui

animations: All the custom animations will be present in this file with separate files like slide_fade_transition.dart, impulse_animation.dart, etc this all custom animations will be used through the application.
app_dialogs.dart: All the custom app dialogs UI will be present in this file.
ui_utils.dart: All the custom UI widgets like an input text box with search icon, autocomplete widgets, Error message banners, custom checkbox chips related utils can be present in this file and will be used throughout the application.

Exploring Mixins:

Mixin is a class that contains methods for use by other classes without having to be the parent class of those other classes.” In other words, mixins are normal classes from which we can borrow methods(or variables) without extending the class.
In the application, we can make different mixins like validation_mixins.dart, orientation_mixins.dart

Here is how the utils folder looks like:

App utils folder & file structure

Adding Core Features

Core features like Login/auth, walkthrough screens (Screens which are only visible after the install), application setting features are the core features that should be added in a folder Core.

auth: Auth folder must contain the features: Register, Login, Forgot password.
walk_through: Walkthrough screens must contain all the screens which will be visible only when the application starts for the first time after the fresh install.
settings: This will be the application setting feature

Here is how the core folders and files look like:

Core features folder and file structure

Adding Application Modules

Before proceeding with modules, I would like to show how every module is implemented. i.e every module and core feature which we discussed above is based on the Bloc pattern which we can find more in this package flutter_bloc.

Bloc design pattern helps to separate presentation from business logic. Following the Bloc, the pattern facilitates testability and reusability. This package abstracts reactive aspects of the pattern allowing developers to focus on writing the business logic.

Let’s take the example with module dashboard in the application which contains the following folders:

bloc: This folder contains the three files dashboard_bloc.dart, dashboard_events.dart, dashboard_states.dart. I will create a separate document describing the bloc pattern and how to incorporate it into the flutter application. For now, you can understand the bloc pattern from flutter_bloc.
models: This folder contains the data models which need to be shown on the dashboard screen.
repositories: This folder contains the repository files which are used to write code for services call and computation work.
screens: This folder consists of all the screens UI widgets that will be visible to the user.

Note: All the modules and core features should contain these four folders to separate the business logic from the UI.

Here is how the module dashboard looks like: