January 03, 2023

Flutter App Project Structure (Recommended Structure)

It is important to maintain a good, clean Flutter file and folder structure, which helps to make changes easily to the project. This post explains the 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 a recommended and effective Flutter project structure that 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 the "Feature-First" directory structure. In a feature-first structure, each feature like home, profile, and product has its own directory. In each feature directory, the code is further organized or categorized based on the purpose of code like widgets, screens, model blocs etc. The following is an 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 the Flutter directory structure in the above code snippet is as follows. We will explain the home feature with its subdirectories as an example:

  • lib: The main directory of the Flutter application where all the code of the app resides.
  • features: This directory contains further sub-directories for each feature.
    • home: This is the main home feature of the Flutter app.
      • widgets: Contains the widgets of the home feature.
      • screens: Holds the screens or pages of the home feature.
      • models: Contains the model files related to the home feature.
      • repositories: Contains the code file responsible for handling data operations such as fetching data from an 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 throughout 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 the Flutter project organizes the code based on features and makes it easy to locate and work on specific parts of the Flutter application. Each feature has its own set of files, including the screens, business logic (bloc), repositories, models and widgets.

The Feature-First approach of Flutter's directory structure helps organize code in a way that improves code maintainability and re-usability. Each feature is self-contained and can be developed independently, which increases the team's collaboration on the project.

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

Home