Flutter scalable app folder structure

Are you ready to begin on your new Flutter project? To make your work easier, I will share with you, how to setup your folder structure, so you can create a scalable Flutter app.

The folder structure is taken from my app, DecorRaid Swipeshop, which is in production and is used by many users daily. The structure will cover most apps needs. I will share with you what each folder is for and then you can decide what is necessary for your Flutter app.

First of all, your are mainly going to work in the Folder lib. This is also where I’m going to show you how to setup your folder structure. Are you new to Flutter? Then, here is a short walkthrough of the default folders and files first.

Quick guide of the main folder structure in Flutter

.dart_tool is a folder that Flutter use, but you are not going to do anything in this folder. 

.idea includes the configuration for Android Studio, but again you are probably not going to change anything in that folder.

android is the folder for all Android specific changes. If you are planning on setting up your app to Android, you are going to add some things in here.

build is a folder that is automatically generated as a part of the flutter build process.

ios is the folder for all IOS specific changes. 

lib is the folder you are going to spend the most time in. It contains your dart files, and include main.dart as a default.

test is a folder containing code which is written for the Flutter application in order to run automated test when building. 

web will only show if you have setup your application to run on web. 

Files in your Flutter project

Now let us look at the files in your Flutter project.

.gitignore is a text files that includes all the folders or files that should be ignored, when working with git. By default the file will include some folders for instance .dart_tool and .idea, but you may have to add files here in the future.

.metadata is managed by Flutter automatically and you a never going to change anything in this file.

.packages is automatically generated based on Flutter SDK and is not a place you are going to change anything in.

flutter_admin_app.iml is named after your project and includes further settings of your Flutter project. Again, this is not a file you are going to make changes too.

pubspec.lock is generated based on pudspec.yaml. If you delete this file you can generate it again by getting packages from the next file.

pubspec.yaml if a file that you are going to be working with a lot. This file includes:

• General project settings like name, description and version of the project
• Project dependencies
• Assets (e.g. images) which should be available in your Flutter project

README.md includes some links on how to get started.

Now you know the basics of the what your Flutter project includes and we can move into the lib folder

Folder structure in the lib folder

You can structure you Flutter project as you want to. This is my take on a good project folder structure, that has worked well for my Flutter app. If you are creating a very simple application, then some of the folder may not be necessary for you.

Flutter is a framework for building beautiful UI, but you probably wants  to extract data from an API and handle some of the imported data in your app. That’s why I will recommend that you separate your lib folder into two folders core and ui. Core folder will act as you communication center to your backend and the ui folder will include alle the widgets and UI that will be presented in your app. 

The Core folder

In the core folder I have added three more folders apis, models and services. The API folder includes all dart files that extract data from the APIs you are communicating  with. In the models folder I have all my dart files that convert the imported data from the APIs to a model, that the Flutter widgets can handle. Last, in the service folder I for instance have auth.service.dart, which is the service that handles the loginAPI.

The UI folder

In the UI folder I have separated the files into shared and views. The shared folder is for all files that is used multiple places in the project. Where, the views folder is for alle the different views you have in you project. Each view is separated into its own folder to make it easy to keep an overview.

The shared folder I have separated into two folders utils and widgets. The utils folder includes all dart files that is used in multiple views as your own custom theme file or the router file. The widgets folder include all you custom made widgets, that you want to reuse as the appbar or a button. 

As I mentioned the views folder is separated into as many different views, as you have in your Flutter project. Within each view you can separate the code into two more folder if needed. First, you have the view.dart file which is the basic UI file for this view. But then you may have some widgets that you only use for this view, but want to use it multiple times within the view. You can add these widgets to the widget folder. If your view includes blocs you can add these to a bloc folder as well. 

I hope this helped you get an idea of how you can setup your folder structure in your Flutter project, so it’s ready to scale. Not sure what your new Flutter project should be, then I have shared a few ideas in my previous post, Choosing a Flutter project. 

If you have any comments or wanna share how you structured your Flutter project please leave a comment below.

Have a great day and happy coding 👩🏽‍💻