Flutter is one of the coolest software development kits and UI frameworks, empowering startups to giant enterprises to build imaginary software solutions. But that doesn’t mean you don’t have any decisions left to make in order to create your app more performant. No doubt, Flutter creates high-performing apps by default. Still, when starting your Flutter project, there are things to keep in mind to ensure a scalable and manageable outcome.
And structuring the Flutter app well is one of those crucial things which may not bother you if it’s a small-scale Flutter project. In the case of enterprise-level projects or projects that require significant scalability, the structure of folders and files is very, very important. Because when the project roots are well-structured, it makes the code more maintainable and organized. Moreover, the team members can also work on different parts of the app simultaneously without any clutter.
On the flip side, the absence of the proper file or folder structure leads to many distressing problems as the project grows. For example;
- Making it challenging and time-consuming to find the specific file in a repository;
- Problematic for teamwork;
- Complications in maintaining the project;
- Higher cost to maintain a Flutter app;
- Adding new or deleting features becomes a nightmare for developers;
- At the very worst, it can result in a poorly performing app.
So, if you have chosen Flutter SDK, you should study how Flutter folder structure and Flutter file structure should look in your project. Hence, we are exploring two approaches to structure Flutter projects. By the end of this post, you will find out which one is good for your project.
Why is the Flutter project structure so important?
Flutter empowers its developers with extensive liberty in terms of architectural choices. Flutter developers are also free to make codebase-related decisions. The technology doesn’t adhere to any standard opinion on file conventions or folder structure.
Such a characteristic of Flutter is bliss and can be an ache, too. Flutter developers can fine-tune their directory and project structure as per their needs, business logic, and project requirements is a blessing.
On the contrary, if the structure isn’t well-defined, it can make large projects excruciatingly tricky to manage. Therefore, there are some approaches to structure the Flutter project the Flutter community has adopted. And two of the most favored ones are Layer-first structure and Feature-first structure. Let us see how to structure your Flutter project using these approaches.
Before that, you must know that the app architecture comprises four separate layers. Every layer contains the necessary components for the app. For example,
- Presentation: states, widgets, and controllers
- Application: services
- Domain: models
- Data: data sources, repositories, and data transfer objects– DTOs
If you create a single-page application, you can put all these files in one folder and say voila!
However, when you start adding new pages and have more data models to deal with, managing all files in a consistent way becomes a hurdle. That’s why there are approaches to structure Flutter applications.
What is Layer-first (features inside layers) Structure?
As the name suggests, in this approach, the layers come first, and your app features inside them. In other words, we do not put the Dart files directly inside the layers. We create folders inside each layer instead. Hence, you should know it’s a feature inside layers approach. Simply put, features will be inside each layer in the form of a folder.
If you follow the Layer-first approach, you can add all your Dart files inside the feature folder you create. Don’t forget to ensure you add files to the suitable layer where they belong. For example, controllers and widgets inside the presentation layer, model classes inside the domain, et cetera.
Consequently, your project structure will look something like the below:
‣ lib
‣ src
‣ presentation
‣ feature1
‣ feature2
‣ application
‣ feature1
‣ feature2
‣ domain
‣ feature1
‣ feature2
‣ data
‣ feature1
‣ feature2
Now, if you want to add feature3 and feature4, you have to create a folder for each inside each layer, and the rest will be the same. For example,
‣ lib
‣ src
‣ presentation
‣ feature1
‣ feature2
‣ feature3 ←
‣ feature4 ←
‣ application
‣ feature1
‣ feature2
‣ feature3 ← create if needed
‣ feature4 ← create if needed
‣ domain
‣ feature1
‣ feature2
‣ feature3 ←
‣ feature4 ←
‣ data
‣ feature1
‣ feature2
‣ feature3 ←
‣ feature4 ←
If Layer-first is the right approach for your project structure?
Although the Layer-first approach is easy to follow, it does not work well when the app starts growing. Because for every feature, the files that belong to separate layers are distant from each other. As a result, working on particular features becomes challenging as you will need to keep hopping on various parts of the project.
Moreover, you can easily forget about specific file locations, which makes deleting a feature far more complex as they are organized by layer. And because of such troubles, the Layer-first approach might not be a good fit for building medium to large apps.
What is Feature-first (layers inside features) Structure?
In contrast to the Layer-first approach, the Feature-first approach demands to structure of your app, creating a folder for each new app feature. And just like every layer contained the feature, here, every feature folder includes architectural layers. Yes, according to this approach, you can add layers as sub-folders, which is very handy. Let us see how your project structure looks when you follow this approach.
‣ lib
‣ src
‣ features
‣ feature1
‣ presentation
‣ application
‣ domain
‣ data
‣ feature2
‣ presentation
‣ application
‣ domain
‣ data
‣ feature3
‣ presentation
‣ application
‣ domain
‣ data
It looks more logical and maintainable structure as we can clearly see files that belong to every specific feature, grouped by layer. Moreover, the feature-first layer approach also offers a couple of benefits over the layer-first, such as;
- If you want to modify your existing feature or add a new one, you can meticulously focus on that particular folder.
- And when you don’t need a feature anymore, you can quickly remove the folder of the feature.
So, if we were to compare these two approaches, we have a clear winner, i.e., the Feature-first approach for your Flutter project structure.
At this stage, it is essential to know what is called a feature. So, let’s answer this to see if your knowledge about Features is correct.
What do you call a feature?
So far, we know that features are to make software products interactive for users. But if you dive deeper, you will know it is more about what a user does. Examples of features include;
- Authenticate
- The shopping cart
- checkout
- Order history
- Review
In simple terms, features are a functional requirement that complements the user journey and helps them achieve a desire on the app.
So, how to structure your Flutter project with the Feature-first approach?
So, the feature-first approach is the optimum choice to structure your Flutter project around your app’s functional requirements. And by following the below steps, you can do it correctly, avoiding common mistakes.
- The first step includes starting from the domain layer and specifying model classes and business logic so you can manipulate them;
- The next step is the creation of folders for models that belong together and inside that folder, create the application, domain, presentation, and data sub-folders as required;
- Within every sub-folder, you can add all the Dart files you need;
In addition to your Flutter project structure, how you hire Flutter developers also affects your outcome.
Looking for professional Flutter development services?
Flutter is a mobile app development framework that makes it easier to build beautiful mobile apps that can run on Android, iOS, and other operating systems. As a leading Flutter development company, we provide a range of services, including flutter web apps, hybrid mobile apps, Flutter extension development, and converting an existing app into Flutter.
We provide flutter development services from the initial ideation phase to the end of the development process. We help you plan and build apps with Flutter. We are committed to providing the best flutter development service and believe that by building a strong partnership with you, we can set another example of Flutter’s success.