Flutter File Structure for Big Projects

Подписаться 32 тыс.

Просмотров 59 тыс.

50% 1

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
RU-vid 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

Опубликовано:

4 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 124

@shreyanssethia7368 4 года назад

This is pure gold

@tadaspetra 4 года назад

Shreyans Sethia thank you 😊

@gabrielaugusto6001 3 года назад

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

@ddivine_concepts488 6 месяцев назад

thank you for this video. i like the fact that each page has and export file for all its components

@RobertBrunhage 4 года назад

Super awesome explaination! Great work, really love the way you explain with the Ipad!

@tadaspetra 4 года назад

Robert Brunhage gotta put it to use somehow 😊

@bazilbaachu3909 4 года назад

Wow, v2.0!! Thanks for going in-depth❤️.

@bazilbaachu3909 4 года назад

I have a doubt regarding the "view" inside the home. What does it export? Is it for exporting pages like home_page.dart?

@tadaspetra 4 года назад

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

@bazilbaachu3909 4 года назад

@@tadaspetra Thanks Gotcha

@victorgalleto3771 3 года назад

Amazing tutorial! One thing that I didn't realize was where the generalized widgets are placed in this structure

@tadaspetra 3 года назад

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

@tadaspetra 3 года назад

haha thank you for watching 🙌

@blank-vw2sb 4 года назад

Nice. I have created a structure that's somewhat similar. Good inspiration for me. Thanks. - Da Bot

@tadaspetra 4 года назад

Dummy Dummy nice job! And yea it’s working great so far

@elaith9 4 года назад

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.

@tadaspetra 4 года назад

We were going to go with repositories at first. But then changed it. I think repositories would work well too

@JETLAI123 4 года назад

Thank you, that's an easy and nice solution.

@tadaspetra 4 года назад

It’s been working well for me 😊

@ramonpaolomaran2253 4 года назад

Minha nossa, muito obrigado. Esse vídeo veio no tempo certo ❤️🇧🇷

@Lensbreak 3 года назад

Please make a tutorial: folder by feature architect + riverpod hooks + flutter hooks + firebase

@Lensbreak 3 года назад

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?

@tadaspetra 3 года назад

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.

@AlbertoChamorro 3 года назад

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

@tadaspetra 3 года назад

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

@oldmen2544 3 года назад

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

@lambda-dev 2 года назад

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?

@blank-vw2sb 4 года назад

Oh hello sensei!

@rscurciel9787 4 года назад

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

@tadaspetra 4 года назад

RS Curciel I made a video about codemagic (CICD tool) where I had the Firebase secrets in there. Would that help?

@rscurciel9787 4 года назад

@@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.

@tadaspetra 4 года назад

RS Curciel for the CICD you would probably want to use the production one and keep the local one for development

@Lensbreak 3 года назад

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?

@tadaspetra 3 года назад

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

@Lensbreak 3 года назад

@@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

@luisalfonzoguzmanlegreaux467 2 года назад

Like before starting the video - Done

@tadaspetra 2 года назад

💯

@arifuljannatarif4481 Год назад

I think Feature first aproach is more scalable and maintainable for large projects

@heshamabuzaid4293 Год назад

Thanks for your awesome video.

@FunwithFlutter 4 года назад

This seems familiar 😉

@tadaspetra 4 года назад

Fun with Flutter haha couldn’t have done this video without your help 😊

@irhas6555 4 года назад

@@tadaspetra I wonder is yall found this by personal opinion or by kinda Flutter doc/team

@tadaspetra 4 года назад

@@irhas6555 this file structure is just personal opinion 😊

@liammcclelland7201 4 года назад

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?

@tadaspetra 4 года назад

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 😊

@johnaart 4 года назад

@@tadaspetra True... Am a beginner in Flutter and struggling hard with navigation... Every video i see does something completely different 😫

@abdulqadirjeelani5225 4 года назад

Kindly make a class of topic 'get_storage'. And please mention me if you already have video on this topic

@tadaspetra 4 года назад

In GetX “Other Features” video I mention it quickly 😊

@jrheisler 4 года назад

Nice!

@pablov.k.f7256 2 года назад

Awesome!

@oleksandrshyrokyi4235 3 года назад

Looks a bit like a clean architecture pattern by "uncle Bob". Have you tried to use it in projects?

@abdicodes 4 года назад

What do you think of using dart for general programming vs TypeScript? Asking for a friend

@tadaspetra 4 года назад

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!

@bazilbaachu3909 4 года назад

Can you please give an example for something defined in the file app.dart?

@tadaspetra 4 года назад

Bazil Baachu MaterialApp and things associated with that

@bazilbaachu3909 4 года назад

@@tadaspetra Okay Awesome, Understood. Thanks for quick response

@madhavamshahi5470 3 года назад

Please make a tutorial on architecture. it's very complicated for beginners.

@tadaspetra 3 года назад

I have a video about file structure. Which touches on a part of architecture

@madhavamshahi5470 3 года назад

@@tadaspetra on my way to watch it! thanks!!!!

@tadaspetra 3 года назад

@@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

@gigiolobato7852 4 года назад

Amazing! Any GitHub repo link?

@tadaspetra 4 года назад

Giovani Lobato couple people have asked for it. I will make it today 😊

@tadaspetra 4 года назад

It is in the description now :)

@chetangoyal8466 2 года назад

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).

@fredii2025 Год назад

aren't all those exports hard to maintain?

@Doroc0 3 года назад

Questions: 1.- How I would do the "providers" folder if I am using provider? 2.- How I do the local database?

@tadaspetra 3 года назад

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!

@saimirfan902 Год назад

@@tadaspetra What would be the difference if I am using providers

@SuperHansburger93 4 года назад

I take that you are not using the GetX architecture from the Get-CLI tool then?

@tadaspetra 4 года назад

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

@SuperHansburger93 4 года назад

@@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.

@pipaliyaashish4832 4 года назад

Hey bro, how do you manage job + flutter experiments + RU-vid all together?

@tadaspetra 4 года назад

pipaliya ashish barely haha. But I don’t have many other responsibilities other then that. I don’t have kids or anything yet

@audrenbouesseldubourg8216 3 года назад

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.

@dnrahmath Год назад

what is difference domain folder and page folder ??

@2asdfdas 3 года назад

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

@tadaspetra 3 года назад

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)

@2asdfdas 3 года назад

@@tadaspetra Sounds good. Let me know when there's a small sample project in the exclusive repository and I'll be in!

@2asdfdas 3 года назад

@@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.

@tadaspetra 3 года назад

@@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

@2asdfdas 3 года назад

@@tadaspetra Awesome Tadas, you're the man!

@muafaa Год назад

Hi, is it still relevant for todays project? since i just started to learn flutter for the past week

@fredii2025 Год назад

I think that mainly it is. I have seen similar ideas on the web regarding this.

@ngoalonghf 2 года назад

Config folder and assets folder, a little confused

@wesleybarnes5376 Год назад

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?

@mobtereststudio Год назад

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.

@wesleybarnesdev Год назад

@@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.

@mobtereststudio Год назад

@@wesleybarnesdev I find myself doing the same thing too. It sure is.

@hectorprx 4 года назад

Thanks, Is this layout you used for your Book Club Build?

@tadaspetra 4 года назад

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!

@raymondmichael4987 4 года назад

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 🇹🇿

@tadaspetra 4 года назад

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

@raymondmichael4987 4 года назад

Amateur Coder ; well what can I say 🙆🏾‍♂️; glad you even shared with us this

@tadaspetra 4 года назад

Raymond Michael I think I will eventually do another series, but I will definitely need to have it more planned out before 😊

@julianaryo407 3 года назад

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?

@tadaspetra 3 года назад

Yea in my previous design I had a global widgets folder. I think that would still make sense in this case

@rezaasgary1442 4 года назад

Clean arthitecture try it

@pathakvivek7865 4 года назад

Where is the git repository of this video..?

@tadaspetra 4 года назад

Vivek Pathak I don’t have one, but I can make one later today

@pathakvivek7865 4 года назад

@@tadaspetra i appreciate your job..

@tadaspetra 4 года назад

It is in the description now :)

@pathakvivek7865 4 года назад

@@tadaspetra Thank you so so much..

@tadaspetra 4 года назад

Vivek Pathak no problem 😊

@jonathans1302 4 года назад

Do you have this (or something similar) on GitHub?

@tadaspetra 4 года назад

Jonathan s I don’t have it, but I can make one later today!

@tadaspetra 4 года назад

It is in the description now :)

@jonathans1302 4 года назад

@@tadaspetra thank you!

@scottgreen3703 2 года назад

Is this what they name MVVM OR MVM

@lambda-dev 2 года назад

Although you could use mvvm or mvc, other state provider patterns are used in flutter, like bloc, cubit and redux.

@cem3096 2 года назад

is it mvc?

@lambda-dev 2 года назад

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 :)

@karolisabrutis6501 4 года назад

YUH YUH YUH NO MICKEY MOUSE FILE STRUCTURES AROUND HERE BUSTER

@tadaspetra 4 года назад

Karolis Abrutis yuh yuh yuh

@harshtank1649 4 года назад

Sorry but how much do you earnings?😅

@tadaspetra 4 года назад

Harsh Tank 48 not much. Less then $100 a month

@tebatsomokgokolo 3 года назад

Don't you have a project structure template that I can clone from GitHub?

@tadaspetra 3 года назад

Yes it is in the description

@tebatsomokgokolo 3 года назад

Thanks

@АлександрИнженер-д4б 3 года назад

Что это за дмитрий маслеников на флаттер

@theguild42 Месяц назад

There are multiple ways to make the folder structure. It should strictly match your architecture. Everything else is BS.

@huzeyfetas Год назад

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