Flutter Folder Structure and Packages
HTML-код
- Опубликовано: 30 июл 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
![CENTRAL CEE - GEN Z LUV [VERTICAL VIDEO]](http://i.ytimg.com/vi/VIbidJm9q34/mqdefault.jpg)
Please make tutorial: folder by feature architect + riverpod hooks + flutter hooks + firebase
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.
This was informative. Thank you for the video, not many people have talked about this stuff before.
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
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.
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 ❤
Exactement le tutoriel que je recherchais ! Merci !
Amazing video thank you!
Been waiting for this.
data -> models ,
services -> local , http
ui -> screens -> screen1, screen2
widgets
blocs -> bloc1, bloc2
This is really awesome. I'll follow up this structure . Thanks 😊
Glad you found it helpful!
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 🙏
Thank you so much amazing video 😍
Good one, sir! Thanks
Thanks for this video man. 👍
thanks for this video! ;-) Good explanation of Packages / Modules
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
Good information, helpful for big projects.
Thanks!
The more we know the more educated decisions we can make 😊
@@RobertBrunhage yeah ✌
thanks man, i like your video..
Very well done ✅
Many thanks!
Awesome
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?
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!
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 😊
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!
Hi RUclipsr! 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!
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!
great great great
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
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
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
What Theme do you use for VS code?
One Dark Pro :)
What is the theme you are having on vs code, folder icons look nice
I think it is material icon theme, looks great :)
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 :)
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
🍪🍪🍪 All my cookies for you 🍪 never thought of structure by feature 🍪
It's super easy to work it, and I like it a lot :)
well the packages structure is the default structure in android studio so i would suggest anroid studio, IMPO
I would be really happy with English subtitles 🤣
Awesome \(uu)/
Thanks, glad you enjoyed it!
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!!!!
I can't believe some people still structure folders by layer. It must need some real inclination towards BDSM.
sub english please
Please make tutorial: folder by feature architect + riverpod hooks + flutter hooks + firebase