Flutter Folder Structure and Packages
ฝัง
- เผยแพร่เมื่อ 6 ก.ค. 2024
- Understanding the basics of folder structure and packages is an important topic that not many covers. Here we will learn different types of folder structure as well as how we can use dart packages to our own advantage. Course to build a production-ready app 👉 robertbrunhage.com/course
00:00 Overview
00:32 Folder by Type
01:34 Folder by Layer
02:15 Folder by Feature
03:14 Dart Packages
07:02 Announcement
····················································································
♥ Become a Patreon supporter: / robertbrunhage
♥ Subscribe: bit.ly/2SUyRhx
····················································································
● Website: robertbrunhage.com
● Twitter: / robertbrunhage
● Discord: / discord
● Instagram: / robertbrunhagedev
● Facebook: bit.ly/RobertDev
Please make tutorial: folder by feature architect + riverpod hooks + flutter hooks + firebase
This was informative. Thank you for the video, not many people have talked about this stuff before.
Folders under lib: models, views, controllers, and services. MVC+S design pattern. The views folder has a folder for each page/screen with the page widget and all widgets on the page in the same sub-folder. Widgets used by multiple pages are in the root of the views folder.
I'm using by layer for my biggest project (also my first) and it's quite annoying, but changing it is also frustrating. For all other projects I use by features even for the small ones it makes so much more sense to me
Very nice work Robert, I've started using folder by feature. This really makes it easy to migrate to a package when needed. Best, Karl
Glad it was helpful and I agree!
Very very very great video ❤
I was looking for a way to make my code reusable to use it in multiple projects and I've found it! ❤
Thanks a lot, sir ❤
Amazing video thank you!
Waiting for a full project tutorial based on folder by feature architect + riverpod + flutter hooks 🤪
I have built a project using riverpod and folder by feature ..chaiyo vaney dimla
@@techzone2009 sure.
@@techzone2009 If you could write. Project nai chaiyena baru euta blog with examples vae ni hunxa.
Thanks for this video man. 👍
Exactement le tutoriel que je recherchais ! Merci !
Good one, sir! Thanks
Been waiting for this.
Thank you so much amazing video 😍
This is really awesome. I'll follow up this structure . Thanks 😊
Glad you found it helpful!
thanks for this video! ;-) Good explanation of Packages / Modules
Thank you so much Robert. I generally used to make screens,models kind of structure. But folder by feature is really great approach i liked it. And i have already subscribed to your emails on your website. God bless you always :)
Glad I could be of help Nikhil!
I appreciate all the support you give 🙏
Mine is folder by feature but I make additional folder(as per folder by layer) inside each feature
lib
--feature1
----ui
----bloc
----data
--feature2
---ui
---bloc
---data
Your videos are really the best out there. I haven't yet but I really consider donating via your Patreon which would be the first time I use Patreon ever.
Thank you so much it really means a lot!
I am just super happy the videos are helpful, that was the goal all along 😊
Intuitive....tnks
thanks man, i like your video..
Good information, helpful for big projects.
Thanks!
The more we know the more educated decisions we can make 😊
@@RobertBrunhage yeah ✌
data -> models ,
services -> local , http
ui -> screens -> screen1, screen2
widgets
blocs -> bloc1, bloc2
Very well done ✅
Many thanks!
great great great
Awesome
Folder by feature works for me. Definitely going to look into creating packages for reusable functionality! Thanks.
Also any hints on what the upcoming course maybe about? 😉
Super happy you liked it!
Want to have project based courses so we will see 😊
I have had a problem if should I use struct by layer or feature and how to separate a part of application for another one. Now, it seems clearly for me, thanks
Awesome, glad it helped!
Thank you Robert. Could you please make a video for explaining repository-services-stores-ui layered architecture especially suggested by mobx? Especially, I don't get what is repository and services layers and how to create and use them.
Will write it up, I want to cover more architecture approaches as well!
cant wait hehehe!
The Stacked pattern from FilledStacks makes the most sense to me for production. This brings a lot of folders and .dart files into your structure but in my experience, most of the time it’s better to work in laid out, readable projects/code than it is to work with condensed code or folders in the effort to look clean and efficient.
Hmm I am not quite sure I follow, you can still follow @FilledStacks pattern but create everything in the same file if you want to (not recommended). The folder structure is not a rule and should (most of the time) change depending on how projects grow (in my experience).
I have background in Angular and they have great documentation on how they do folder structure (LIFT) which I like a lot. In the end, this is to provide knowledge and not decide how you SHOULD do something 😊
@@RobertBrunhage I completely agree with this and I wasn’t trying to come off as one rule for all, that goes against programming and general engineering. This is just my preference, as you said in the video to drop them in the comments.
I come from (day to day) C, C++ mainly for game engine programming so things like grabbing resources outside the folder dir of the script, I’m used to. General app development and web have always looked very messy to me, almost unstable in both conventions and methodology of making systems. The pro of that is that there is a lot to learn from the methods on the internet. One of the biggest practices is separating business logic from UI and that’s why when I refer to Stacked I also mean the minor folder structure convention that is with it because the interpretation of that methodology of separation makes sense to me.
But preferences aside, your videos are extremely helpful and shine a light on production practices that are shadowed when first learning Flutter. E.g., creating an actual AppName.dart/class to be called into void main() instead of having main + MyApp class in one file lol so minor but helps start clean code.
@@ianmcelvain9627 Oh hope I didn't come off as rude, it was not my intention! Sorry if that was the case.
Thanks for sharing your experience and I think many will benefit from it!
Thanks for the support and super happy you liked the video :)
I wanted to integrate notification in my project. I am using folder by feature approach. Where should i add notification functionality, should i create new feature for managing notifications?
Hi TH-camr! Thank you! I liked this video. I was struggling with adding dependency in Flutter project which dependencies were ignoring each other. The Package Structure Folder approach gives me an idea how to handle that issue. Nice job!
I made a vs code extension for making my folder structure, tell me what you think?
GitHub: github.com/YazeedAlKhalaf/Stacked
VS Code extension link: marketplace.visualstudio.com/items?itemName=YazeedAlKhalaf.stacked
Thank you Robert. Very informative video. Just a newbie question: In the Controller folder, What types of structure we put in. Tbh I googled it but not sure if I know exactly what "Controller " is. Best wishes.
These folders were just examples, if you are not using those in your projects you won't be using that folder!
It was just for illustrational purposes
Robert.. thanks a lot for this video.. I think I would love to see the structure of a one of your big projects in a video.. There are many challenges also (I think) in terms of organizing big projects by features...specially when in a big project you may have 50-120 pages and each page may have 10 to 50 features..
It depends on how small you think of features. I work at a very big company where folder by feature is implemented (or in android by module) which works great and that project is huge. I suggest giving it a try :)
Thanks Robert! Modules grasp better the concept for me than features :)
@@fabsync You can do pretty much the exact same thing with dart packages if you prefer that more!
There are no hard rules here, just do what makes most sense!
I'm pretty new to coding- what are controllers and repositories?
Thank you very much. I always have problem with the folder structure. BTW How do we create package like @personal/auth, @personal/database etc?
What do you mean with @personal/?
You can define it however you want aslong as you reference the correct path and that it is a package :)
@@RobertBrunhage I meant like naming packages like npm private packages.
@@madhusudhanr3527 Have not tried that so if you do, let me know of the results!
@@RobertBrunhage Thanks for the reply and will surely let you know if it works. A suggestion for future video. "SSL pinning in flutter apps"
Great video and great explanation, thanks. pub get button seems useful. How can we get it?
Hmm I just always had it so thought everyone did haha
It should be available to you when you're in the pubspec.yaml file.
Yeah, that's correct
What is the theme you are having on vs code, folder icons look nice
I think it is material icon theme, looks great :)
What Theme do you use for VS code?
One Dark Pro :)
Hi. Thanks for the video. I have one question: how does modifying a local dart package work? Do I see the changes immediately? Do I need to run 'pub get' again?
Also I see your website is a ReactJS app 😂
You will see the changes immediately!
Yes, sadly Flutter Web doesn't have the things I want right now (especially as I am moving to Next.js soon) :(
@@RobertBrunhage actually I'm planning to try flutter web for personal site.
There's also something I want but still couldn't do it in flutter.
Webview(type: script, link: gist link).
anyone know a package with that kind of feature?
by the way, great video, learn something new. Thanks Robert
In Folder by Feature structure, what's the difference between a repository and a service?
I use repository for infrastructure, so storing data or calling apis. Services should contain and transform business logic independent of the view. Hope this helps :)
well the packages structure is the default structure in android studio so i would suggest anroid studio, IMPO
🍪🍪🍪 All my cookies for you 🍪 never thought of structure by feature 🍪
It's super easy to work it, and I like it a lot :)
I would be really happy with English subtitles 🤣
Awesome \(uu)/
Thanks, glad you enjoyed it!
I can't believe some people still structure folders by layer. It must need some real inclination towards BDSM.
How can i give 1Million likes to this video......
If you click a lot of times and really fast maybe we can get 1 like on it!!!!
sub english please
Please make tutorial: folder by feature architect + riverpod hooks + flutter hooks + firebase