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 what I have used for all my Flutter projects. 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, you are mainly going to work in the Folder lib. This is also where I will show you how to set up your folder structure. Are you new to Flutter? Then, here is a short walkthrough of the default folders and files first.

.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 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 tests when building. 

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

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

.gitignore is a text file 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 to.

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 is 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 what your Flutter project includes and we can move into the lib folder

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

Flutter is a framework for building beautiful UI, but you probably want to extract data from an API and handle some of the imported data in your app. That’s why I recommend that you separate your lib folder into two folders core and ui. The core folder will act as your communication center to your backend and the UI folder will include all 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 login API.

The UI folder

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

rThe shared folder I have separated into two folders utils and widgets. The utils folder includes all dart files that are used in multiple views as your custom theme file or the router file. The widgets folder includes all your 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 folders 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 reach out to me.

Have a great day and happy coding 👩🏽‍💻