January 03, 2023

Flutter App Project Structure (Recommended Structure)

It is important to maintain a good clean flutter files and folder structure which helps to make changes easily to project. This post explains recommended flutter folder structure to have for flutter apps.

Flutter App Project Structure

When building flutter apps its important to maintain a clean, modular and scalable directory structure for easier collaboration. In this post we will explain recommended and effective flutter project structure which will make flutter app development easier and maintainable.

 

Recommended Flutter App Structure

While there are many approaches developers use for flutter directory structure, the most commonly used and recommended structure is "Feature-First" directory structure. In feature-first structure each feature like home, profile, product has its own directory. In each feature directory the code is further organized or categorized based the on the purpose of code like widgets, screens, models blocs etc. Following is the example of flutter project structure adapting the feature-first approach.

lib/
├── features/
│   ├── home/
│   │   ├── widgets/
│   │   │   ├── home_screen.dart
│   │   │   ├── home_button.dart
│   │   ├── screens/
│   │   │   └── home_page.dart
│   │   ├── models/
│   │   │   └── home_model.dart
│   │   ├── repositories/
│   │   │   └── home_repository.dart
│   │   ├── blocs/
│   │   │   ├── home_bloc.dart
│   │   │   ├── home_event.dart
│   │   │   └── home_state.dart
│   ├── profile/
│   │   ├── widgets/
│   │   │   ├── profile_screen.dart
│   │   │   ├── profile_avatar.dart
│   │   ├── screens/
│   │   │   └── profile_page.dart
│   │   ├── models/
│   │   │   └── profile_model.dart
│   │   ├── repositories/
│   │   │   └── profile_repository.dart
│   │   ├── blocs/
│   │   │   ├── profile_bloc.dart
│   │   │   ├── profile_event.dart
│   │   │   └── profile_state.dart
├── shared/
│   ├── widgets/
│   │   ├── button.dart
│   │   ├── text_field.dart
│   ├── services/
│   │   └── api_service.dart
│   ├── utils/
│   │   └── validator.dart
└── main.dart

Explanation of flutter directory structure in above code snippet is as below. We will explain home feature with its sub-directory as an example:

  • lib: The main directory of flutter application where all code of app resides.
  • features: This directory contains further sub-directories for each feature.
    • home: This is the main home feature of flutter app.
      • widgets: Contains the widgets of home feature.
      • screens: Holds the screens or pages of home feature.
      • models: Contains the model files related to home feature.
      • repositories: Contains the code file responsible for handling data operations such as fetching data from API.
      • blocs: Contains the business logic components for state management features.
  • shared: This directory contains shared and reusable components such as widgets, services and utilities that can be used through-out the app.
    • widgets: Contains the shared widget files.
    • services: Contains the shared service files to handle business logic, network requests and data parsing etc.
    • utils: Contains the shared utility files.
  • main.dart: This is the entry of any flutter application.

This structure of flutter project organizes the code based on features and makes it easy to locate and work on specific parts of  flutter application. Each feature has its own set of files including the screens, business logic (bloc), repositories, models and widgets.

Feature-First approach of flutter directory structure helps organizing code in a way that it improves code maintainability and  re-usability. Each feature is self-contained and can be developed independently which increases the team collaboration of project.

Keep in mind that this is just one example of flutter app structure and it can be adjusted and evolved as application grows.

Home