Flutter Professional Folder Structure: Feature-first or Layer-first?

E commerce app

This tutorial will guide you through the creation of a well-organized Flutter Professional Folder Structure. Flutter, being flexible and not enforcing any predefined structure, allows for customization based on project needs. The aim is to design a structure that is not only professional but also enhances reuseability, teamwork, and efficiency, addressing the challenges of file navigation in the absence of a specific folder structure. We’ll specifically explore the folder structure for a Flutter e-commerce application, providing insights into its advantages and considerations.

In this tutorial, we will first learn what are the two principal Folder Structures. Why do we need a folder structure in Flutter? In the end, we will learn which folders we are using in our  Flutter e-commerce application.

You can also download the complete source code of our Flutter e-Commerce Application.

Watch Youtube tutorial

 

The Two Principal Folder Structures:

1. Layer First:

              In a Layer First structure, the organization is based on dividing the application into distinct layers, each responsible for specific functionalities. The layers often align with the MVC (Model-View-Controller) pattern or similar architectural patterns.

Key Components:

  • Models: These blueprints, defined as Dart classes, shape your data objects.

  • Views: The UI’s heart, encompassing app pages/screens and their individual components.

  • Controllers (or Services): These ensure smooth communication between the Model and the View in Flutter, also handling API tasks and data processing.

Advantages:

  • Separation of Concerns: Clear separation makes it easier to manage and maintain different aspects of the application.
  • Scalability: Suitable for small to medium-sized projects where clear divisions between layers are beneficial.

Drawbacks:

  • Rigidity: Layer First could be like handling a big puzzle; as your project grows, it might get more confusing and challenging.
  • Learning Curve: Developers must grasp and follow set layering rules, like following a specific recipe to bake a cake.

2. Feature First:

In a Feature First structure, the organization revolves around the features or modules of the application. Each feature encapsulates all layers necessary for its functionality.

Key Components:

  • Feature Folders: Each distinct app feature gets its space, hosting related model, view, and controller files.

  • Shared Components: This ‘common’ directory is where universally-used widgets or tools reside.

Advantages:

  • Eases app scaling. New features are added without fuss.
  • All related files for a specific feature are neatly bundled together.

Drawbacks:

  • Potential learning curve for developers rooted in traditional structures.
  • Possible redundancy due to shared components across features.

Why do we need Folder Structure in Flutter?

Flutter, known for its flexibility without predefined structures, introduces specific challenges that can be addressed with a well-thought-out folder structure. Let’s explore the key reasons of why we need flutter professional folder structure:

  • Flexibility at its Core: Flutter offers the flexibility to define your folder structure, and it doesn’t enforce any rigid conventions. This flexibility is advantageous, especially for small projects. However, as applications grow in size and complexity, having a clear and well-defined folder structure becomes imperative.
  • Ease of Reusability: A well-defined folder structure enhances the ease of reusing code in other projects. Organized directories provide a clear structure that promotes the seamless extraction and integration of components across different applications.
  • Team Collaboration: Clear conventions fostered by a standardized structure simplify teamwork. Developers working on the same project or across various teams can easily navigate the codebase, leading to a more efficient and collaborative development experience.
  • Mitigating Costly Operations: Without a specific folder structure, finding files and folders can become a time-consuming and costly operation. An organized structure streamlines the process, reducing the effort required to locate and work with specific code segments.

Which Structure Fits Your Needs?

Whether “Layer First” or “Feature First” depends on project scale and team preference:

 

  • Project Size: Small to medium projects might find “Layer First” handy, whereas extensive, feature-rich apps may lean towards “Feature First”. Imagine seamlessly adding a new feature, like a chat module, without disrupting the existing codebase. For that we will use Feature First.
  • Team Dynamics: If different developers handle separate features, “Feature First” can minimize potential hitches, fostering independent development.
  • Anticipated Expansion: If your project’s horizon foresees feature additions, “Feature First” can offer a robust, future-proof foundation.

Which Folder Structure we are using for our Flutter e-Commerce APP?

Certainly! When using a feature-based approach in your Flutter e-commerce application, the organization of your project’s folder structure revolves around features or modules. Each feature encapsulates all the necessary components, such as models, views, and controllers, within its dedicated folder. Here are some details on what you might include in your project:

==>How to create Folder/Directory in flutter?

Creating a folder in Flutter is as simple as right-clicking on your project or directory in which you want to create a directory and selecting “New” followed by “Directory.”

1) Resource Management:

    • Include folders for assets, such as images, fonts, or other resources. You have to add every asset in the specified folder.
    • To create an asset folder right click on the project and then select new and the Directory. 

“Flutter T-Store[t_store]” => New => Directory

    • After creating the assets directory, right click on assets directory and then click on new, following the directory. Then give the name of the directory like in our case it will be either fonts, icons, images or logos.

“assets” => New => Directory

Flutter T-Store[t_store]
├── /assets
│   ├── /fonts
│   │   └── ...
│   ├── /icons
│   │   ├── /brands
│   │   ├── /categories
│   │   └── /payment_methods
│   ├── /images
│   │   ├── /animations
│   │   ├── /banners
│   │   ├── /content
│   │   ├── /on_boarding_images
│   │   ├── /products
│   │   └── /reviews
│   └── /logos
│       └── ...
└── /lib
    └── ... 

You can also download the asset folder containing all the fonts, icons, images and logos that we will use in our Flutter e-commerce app.

To download the assets, click on the link.

 

 

2) Utility Folders:

    • Include folders for assets, such as images, fonts, or other resources. You have to add every asset in the specified folder.
    • To create a utils directory, right-click on the lib and select new and then Directory. After that name that directory as “utils”
    • Now create the required directories in the utils directory as follows: right-click on the utils directory select new and then select the Directory.
    • In the end, you have to get the files of the specified directory from the tabs at the end.

 

Flutter T-Store[t_store]
    /assets
        ...
    /lib
        /utils
            /constants
            /device
            /formatters
            /helpers
            /http
            /local_storage
            /logging
            /theme
            /validators

3) Additional Project Directories:

     In addition to the core utility and resource directories, our project includes specific folders to cater to distinct functionalities:

    1. Bindings:
        • The “bindings” directory serves as a central place for managing data bindings. Data bindings establish connections between different parts of your application, ensuring smooth communication and synchronization. This directory may contain:
          • Feature Bindings: Individual feature-specific bindings connecting views, controllers, and models.
          • Global Bindings: Bindings that span across multiple features, catering to application-wide functionalities.
    2. Common:
        • The “common” directory is a repository for shared styles and reusable widgets. It promotes code reusability and consistency throughout the application. Contents may include:
          • Styles: Shared design patterns, color schemes, and themes.
          • Widgets: Reusable UI components that are used across different features.
    3. Data:
        • The “data” directory is dedicated to managing repositories and services, crucial for handling data throughout the application. This directory may comprise:
          • Repositories: Classes responsible for abstracting data sources and providing a clean interface for data access.
          • Services: Implementation of various services such as API services, database services, and other external data services.
    4. Features:
        • The “features” directory is the heart of the application, organized into subdirectories for different features or modules. Each feature contains its dedicated components, following the feature-based development approach:
          • Authentication: Contains authentication-related components like login, registration, and authentication services.
          • Personalization: Encompasses user-specific functionalities, including controllers, models, and screens.
          • Shop: Manages e-commerce features such as product listings, shopping carts, and checkout processes.
    5. Routes:
        • The “Routes” directory is responsible for managing the routing between different screens in your Flutter application. It helps in navigating between various parts of the app seamlessly:

Flutter T-Store[t_store]
    /assets
        ...
    /lib
        /bindings
        /common
        /data
        /features
            /authentication
            /personalization
                /controllers
                /models
                /screens
            /shop
        /routes
        /utils
            ...

Flutter App Project Starter Kit:

Introducing the Flutter App Project Starter Kit! Get all the essential files you need to kickstart the development of a professional app in Flutter.

What’s Included:

  1. Assets:
      • A rich collection of images tailored for various Flutter app needs.
  2. Utility Directory:
      • Constants: Pre-defined colors, sizes, text strings, and more.
      • Device Utility: Functions facilitating device-related operations.
      • Formatter: Utility for formatting data efficiently.
      • Helper Functions: Handy functions to simplify common tasks.
      • HTTP Client: Streamlining HTTP requests and responses.
      • Storage Utility: Simplifying local storage operations.
      • Logger File: Efficient logging for debugging purposes.
      • Theme File: Pre-configured themes for buttons, chips, text fields, app bars, etc.
      • Validator: Tools for data validation and verification.
      • And More: A range of additional tools to enhance your development experience.

How to Get Started:

  1. Click on the Download button.
  2. Select the “E-Commerce App Project Starter Kit” variation.
  3. Download the kit and kickstart your Flutter app development journey.

Conclusion:

In summary, this Flutter Professional folder structure guide has walked you through creating a well-organized folder structure for your Flutter e-commerce app. We emphasized Flutter’s flexibility, allowing custom structures, and explored “Layer First” and “Feature First” approaches.

The necessity for a clear folder structure in Flutter arises as projects expand. Flexibility suits smaller projects, but a defined structure becomes crucial for collaboration, code reusability, and reducing file navigation complexities.

Introducing the Flutter App Project Starter Kit – a comprehensive resource with essential assets and utilities. Download the kit from the Source Code page, selecting “E-Commerce App Project Starter Kit” to jumpstart your Flutter app development.

Use these insights and tools to elevate your Flutter app development experience, whether starting anew or optimizing existing projects.

 

Happy coding!

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
Access Admin Panel, Premium Tutorials, Live Chat, 50% off Codes, and More on Patreon!
This is default text for notification bar