Flutter File Structure for Big Projects
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- Flutter File Structure for Big Projects
When working with bigger projects, you need a well organized project. If you don't your code will be hard to maintain and scale. It is especially crucial if you are working with a team. We covered my file structure in a previous video: • Flutter File Structure... but a lot of things have changed since then. It was one of the first videos I released on this channel, and there has been a lot of growth since then video creation wise and file structure wise. So I decided it's time to share with you again.
I Built a Site to Learn Flutter: hungrimind.com
Link to Starter Template: github.com/tad...
Connect With Me
✦ My Website: tadaspetra.com/#/
✦ Live Coding: / tadaspetra
✦ Twitter: / tadaspetra
✦ Chat on Discord: / discord
✦ Instagram: / tadaspetra
I also do lots of Investing
✦ FREE stock: join.robinhood...
My Top 5 Books:
✦ Brave New World - Aldous Huxley: amzn.to/2JyaK96
✦ 1984 - George Orwell: amzn.to/3lmLzUk
✦ The Millionaire Fastlane - MJ Demarco: amzn.to/2ViGthn
✦ The 4-Hour Workweek - Timothy Ferriss: amzn.to/3mnypYD
✦ Homo Deus - Yuval Noah Harari: amzn.to/2VlFRYe
TH-cam Gear
✦ MacBook Pro 16 inch: amzn.to/3qe4MeF
✦ MX Master 3 Mouse: amzn.to/2VlkZQS
✦ Canon Rebel SL3: amzn.to/2ViIfPv
✦ Hiearcool USB Hub: amzn.to/3llsIsP
✦ iPad Pro 12.9 (3rd Generation): amzn.to/36kaVy0
✦ Apple Pencil (2nd Generation): amzn.to/2JoHy4y
✦ Yeti Microphone: amzn.to/37oRNOq
✦ Rode Boom Arm: amzn.to/3lnEKCb
✦ Blue Radius II Shock Mount: amzn.to/2JoIfea
✦ Blue RPop Filter: amzn.to/39rQSiZ
✦ Sony WH1000XM3: amzn.to/3moWgHh
Thank you for watching!
#flutter #filestructure #flutterarchitecture
![Flutter TDD Clean Architecture Course [1] - Explanation & Project Structure](http://i.ytimg.com/vi/KjE2IDphA_U/mqdefault.jpg)
![Flutter TDD Clean Architecture Course [1] – Explanation & Project Structure](/img/tr.png)
This is pure gold
Shreyans Sethia thank you 😊
Great content, thank you! It's so hard to find a video talking about structures in a large project... I'm a react native developer but the structure is almost the same for a Dart project
thank you for this video. i like the fact that each page has and export file for all its components
Super awesome explaination! Great work, really love the way you explain with the Ipad!
Robert Brunhage gotta put it to use somehow 😊
Wow, v2.0!! Thanks for going in-depth❤️.
I have a doubt regarding the "view" inside the home. What does it export? Is it for exporting pages like home_page.dart?
Bazil Baachu yes it’s exporting the views. It’s a little overkill in this case but if there is more files it would be nice
@@tadaspetra Thanks Gotcha
Amazing tutorial! One thing that I didn't realize was where the generalized widgets are placed in this structure
I use a global_widgets folder whenever it is necessary. But I noticed it's often not necessary. If it's something very common, it might be better off as a package, but if it's very specific to the project then might be better as a global widget in that case
haha thank you for watching 🙌
Nice. I have created a structure that's somewhat similar. Good inspiration for me.
Thanks.
- Da Bot
Dummy Dummy nice job! And yea it’s working great so far
Nice video. It's just weird for me to see a "domain" folder. It's a naming I didn't come across multiple platforms and languages. I'd suggest using more standardized folder names like "repositories", "apis" or "services" maybe "helpers". If you go module way then you can have folder called "modules" and inside "auth", "user", "data" or something in this fashion.
We were going to go with repositories at first. But then changed it. I think repositories would work well too
Thank you, that's an easy and nice solution.
It’s been working well for me 😊
Minha nossa, muito obrigado. Esse vídeo veio no tempo certo ❤️🇧🇷
Please make a tutorial: folder by feature architect + riverpod hooks + flutter hooks + firebase
How can I implement this concept with Folder-by-Feature structure? Having all models in one place for example seems impractical for me since you rarely just work on all the models, hence you need to navigate and open lots of folders when following your way. Is that right?
That is what this video goes over. The "domain" folder here is kind of like a "features" folder. All the models are there correllating to that specific feature. I try to keep all things related to one another in the same "domain" but then the pages and UI are in a different. But, yes I agree if you're working on UI with logic, there is a lot of folder opens haha.
Thanks for this video Tadas! I think that you would need to add a folder for shared widgets like pages but named "widgets" for example
Yes, I have something like that now. I wasn't far enough on that program to need it just yet. But i agree. That's definitely helpful
The structure I follow is simple
Auth(all Firebase auth logic)
Components (parts used twice)
Screen 1 (home )
Components
Providers
Methods
Provider
Screen1.dart
Const.dart for colors
It makes also difficult for reverse engineering and can maintain scalability also you can always have better understanding as structuring goes like screen or concept wise
Yeah, for large projects it is better to create feature-folders on the first level and then put the layers inside. Where do you put and structure shared code?
Oh hello sensei!
These kind of videos are always interesting ,). I would like to see your approach to the "secret" key like the key of firestore, maps, notification and any other third parties. And If you use something like github actions, how would you debug in your machine and stuff like that
RS Curciel I made a video about codemagic (CICD tool) where I had the Firebase secrets in there. Would that help?
@@tadaspetra Right, thanks, I didn´t remember it. I remember now not linking to just encode the whole file because I guess you have your own on local and don't version them, I'm sure that I would forget to upload some future change in info.plist for example.
RS Curciel for the CICD you would probably want to use the production one and keep the local one for development
Any suggestion on how to use this with a good architecture and state management? Maybe with RxDart? Or what is the best way to go for really large scale projects?
So i prefer Riverpod. And that’s actually what I am using in the structure here. The providers for riverpod are defined in the providers folder
@@tadaspetra wow thanks bro for answering. I will have a look into that, still quite new to Flutter, coming as an native android dev. BTW: Am I correct that you basically follow a Folder-by-Type structure? Which is unhandy since you need to open many folders if you work on a page for example. I think Folder-by-Feature is a good apporach but does it fit to your concept with those export classes etc? Sorry if that is a noob question haha
Like before starting the video - Done
💯
I think Feature first aproach is more scalable and maintainable for large projects
Thanks for your awesome video.
This seems familiar 😉
Fun with Flutter haha couldn’t have done this video without your help 😊
@@tadaspetra I wonder is yall found this by personal opinion or by kinda Flutter doc/team
@@irhas6555 this file structure is just personal opinion 😊
Thanks. Just starting out with learning flutter. Any tips for a newbie? Eg. Best way to handle navigation or best example projects to attempt first?
Liam McClelland honestly I really love Todo apps but I know they are pretty cliché 😂. For navigation that’s a topic that I think Flutter doesn’t handle too well. I would look into the GetX package if you want some real simple navigation. I have a video on that as well 😊
@@tadaspetra True... Am a beginner in Flutter and struggling hard with navigation... Every video i see does something completely different 😫
Kindly make a class of topic 'get_storage'. And please mention me if you already have video on this topic
In GetX “Other Features” video I mention it quickly 😊
Nice!
Awesome!
Looks a bit like a clean architecture pattern by "uncle Bob". Have you tried to use it in projects?
What do you think of using dart for general programming vs TypeScript? Asking for a friend
I personally really like the language too. It seems like there’s a lot of nice things coming as well like null safety. But I think it all comes down to preference. Typescript is great too!
Can you please give an example for something defined in the file app.dart?
Bazil Baachu MaterialApp and things associated with that
@@tadaspetra Okay Awesome, Understood. Thanks for quick response
Please make a tutorial on architecture. it's very complicated for beginners.
I have a video about file structure. Which touches on a part of architecture
@@tadaspetra on my way to watch it! thanks!!!!
@@madhavamshahi5470 Wait a second, I must have not been fully awake when I responded. This comment is on the video I was talking about haha. I meant this kind of guides you how I organize. But I think I could make another video that goes over architecture more clearly
Amazing! Any GitHub repo link?
Giovani Lobato couple people have asked for it. I will make it today 😊
It is in the description now :)
It's really helpful. Thanks a lot for this video. I was wondering how we can manage API Requests instead of firebase in our app since there will be exception handling and multiple repositories will be sharing the same exceptions (200, 404, 500 etc).
aren't all those exports hard to maintain?
Questions:
1.- How I would do the "providers" folder if I am using provider?
2.- How I do the local database?
If you are using Provider it will have to be a bit different. But follow similar concepts should work well with it too. Local database is something I don't have much experience in so I am not sure about that one to be honest. But separate out your components and keep it organized and you should be good!
@@tadaspetra What would be the difference if I am using providers
I take that you are not using the GetX architecture from the Get-CLI tool then?
SuperHansburger93 no lol. To be honest I’m personally not a fan of having a controller for each page. I like to have controllers per app feature you know? Having said that there’s nothing wrong with the GetX architecture. It might be better for other people
@@tadaspetra Thanks for the reply. From what I've tested, it seemed you'd want both in most cases. One screen controller to handle de local state of that screen, and one feature controller per feature.
You could argue that in some cases, simple screens with very little local business logic in them don't need a dedicated controller, but I guess it depends on how dedicated you are on enforcing the SRP.
Also, this way of doing things kinda reminds me of the Interactor-Presenter part of VIPER.
In fact, this architecture might be just some renaming away from being exactly VIPER.
Hey bro, how do you manage job + flutter experiments + TH-cam all together?
pipaliya ashish barely haha. But I don’t have many other responsibilities other then that. I don’t have kids or anything yet
Where would you put wrappers in this architecture ?
Also I'm confused about shared widgets accross app. They seems to be tied to a page in your structure exemple. Where would you place shared widgets.
what is difference domain folder and page folder ??
Hey Tadas, great video, although I wish I had an actual example of how things work. The GitHub repository you linked unfortunately has a lot of empty files (especially the providers folder). So I don't really know how to outsource everything state related into this folder. It's also not really clear in which file to call FirebaseAuth.instance. Could you maybe release a small dummy project like the BookExample project where those files are not cleared out? I would even pay for it
I have been actually working on creating a GitHub organization for things just like this. Where I would keep the code updated and everything. It would be for patrons. www.patreon.com/tadaspetra
What do you think about this? (PS there is currently nothing in the organization, so there's no code yet. I plan on adding it soon)
@@tadaspetra Sounds good. Let me know when there's a small sample project in the exclusive repository and I'll be in!
@@tadaspetra Btw: Are you going to release this anytime soon? I'm currently working on a small Flutter project for my computer science class in which I'd like to present your file structure.
@@2asdfdas I’ll try to get this specific thing done this weekend, worst case end of next week. I’ll do a really simple app, maybe like a counter app with Firebase integration
@@tadaspetra Awesome Tadas, you're the man!
Hi, is it still relevant for todays project? since i just started to learn flutter for the past week
I think that mainly it is. I have seen similar ideas on the web regarding this.
Config folder and assets folder, a little confused
I have been following this presentation approach (assuming this is what you show here?), and my projects are getting big and I am struggling to maintain them, gosh, I read that the feature approach is the best for big projects, do you still feel the same about this structure of having things organised by views/pages?
Feature-driven approach can be very helpful in complex and larger projects. I have found myself use it. The modularity in form of features makes it easy to debug and for continuity.
@@mobtereststudio Thanks, I went with a feature approach and it is better so far. I do find myself still focused on organising things according to views within the features. Architecture is so important, still looking to improve what I have.
@@wesleybarnesdev I find myself doing the same thing too. It sure is.
Thanks, Is this layout you used for your Book Club Build?
Hector Zayas not the one I used for the actual one I built. But I’m redoing it and it’s the one I’m using for the new one!
Amateur Coder, I've peeled my eyes to see this, I if can suggest, please use GetX in this Book Club, Because you inspired me in the few tutorials you used it (todo app).
Your file structure is great, I'll be waiting for this new series to see in action the implementation of if.
Greetings from Tanzania 🇹🇿
Raymond Michael it’s not actually going to be a series. It’s a side project I’m working on. The reason is, when I was doing it for the series you don’t really think through everything. And there’s a time crunch to get certain features done so it doesn’t get executed as well. So I want to do it perfect this time and we’ll thought out
Amateur Coder ; well what can I say 🙆🏾♂️; glad you even shared with us this
Raymond Michael I think I will eventually do another series, but I will definitely need to have it more planned out before 😊
What if there's a widget that i use in more than one page? like Home page and Profile page for example, should i make global folder for that widget?
Yea in my previous design I had a global widgets folder. I think that would still make sense in this case
Clean arthitecture try it
Where is the git repository of this video..?
Vivek Pathak I don’t have one, but I can make one later today
@@tadaspetra i appreciate your job..
It is in the description now :)
@@tadaspetra Thank you so so much..
Vivek Pathak no problem 😊
Do you have this (or something similar) on GitHub?
Jonathan s I don’t have it, but I can make one later today!
It is in the description now :)
@@tadaspetra thank you!
Is this what they name MVVM OR MVM
Although you could use mvvm or mvc, other state provider patterns are used in flutter, like bloc, cubit and redux.
is it mvc?
The patterns in flutter (bloc, cubit, redux, ...) are different. They are not bound to a single view, so multiple views can subscribe to one state provider and fire events. Hope this helps :)
YUH YUH YUH NO MICKEY MOUSE FILE STRUCTURES AROUND HERE BUSTER
Karolis Abrutis yuh yuh yuh
Sorry but how much do you earnings?😅
Harsh Tank 48 not much. Less then $100 a month
Don't you have a project structure template that I can clone from GitHub?
Yes it is in the description
Thanks
Что это за дмитрий маслеников на флаттер
There are multiple ways to make the folder structure. It should strictly match your architecture. Everything else is BS.
so comlex and usuless. noone can understand with folder name what it does. pff. this folder naming and structre realy hard but this video's advice is torly fail