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 👩🏽💻
Howdy! This post couldn’t be written any better! Reading through this post reminds me of my old room mate! He always kept talking about this. I will forward this article to him. Fairly certain he will have a good read. Many thanks for sharing!
I’m glad you enjoyed it.
Howdy just wanted to give you a quick heads up. The words in your content seem to be running off the screen in Chrome. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d post to let you know. The style and design look great though! Hope you get the issue fixed soon. Kudos
Hi Arlette, Thanks for telling me. I’m using Chrome, myself and don’t see the problem your describe. I’m using WordPress, do you have any idea how I can solve it?
Hi there to all, how is the whole thing, I think every one is getting more from this website, and
your views are nice for new users.
obviously like your website but you have to check the
spelling on quite a few of your posts. Several of them are rife with spelling problems
and I to find it very bothersome to inform the reality on the other hand I’ll
definitely come back again.
Thanks for getting back to me, I will have a look at the spelling.
English is not my primary language, but I will try to improve.
Very nice post. I just stumbled upon your blog and
wanted to say that I have really loved surfing around
your weblog posts. After all I will be subscribing for your rss feed and I hope you write again soon!
I’m really happy to hear that! Hopefully I will have time to write again soon.
Do you have a subject you would like to hear about?
Does your blog have a contact page? I’m having problems locating it but, I’d like to
shoot you an e-mail. I’ve got some recommendations for your blog
you might be interested in hearing. Either way, great
blog and I look forward to seeing it develop over time.
Hi, sorry haven’t had the time to construct that page.
But you are welcome to send me an email to Nannabach9@gmail.com
I look forward to hearing from you!