How to Create a Flutter Folder Structure for Maximum Efficiency | Coding with T

assalamualaikum welcome back to coding with t today we are going to start our second video of flutter login application in this video we are going to learn how to create folder structure for any flutter application as you can see we are creating flutter login application and we already talked about what we are going to create in this login application you can watch the previous videos link is in the description also the first thing we need to create is our new flutter project if you don't know how to create a flood project you can watch the video link is in the description as in our previous flutter crash course we learned how to create and how to install fritter in android studio [Music] so i am inside the project i have created as a simple counter application default application flutter provides and on the left side you can see we have a project structure at the top we can switch from project to packages if we have any package here and also we can switch it from project to android so these are the android files if you're coming from android so you can easily switch it and you can also go through all these files over here while working with the flutter we will keep it on the project and at the top you can see we have root level files and these are some configure level files so if you want to learn more about these config files we already covered in our flatter crash course so today we are going to talk about the flutter folder structure inside the lib folder you can see we have main.dart which is the entry point to any application and we also create all the files related to our app inside the slip folder in here we have an ios folder and we have an android folders so head back to lib folder and here you can see we have the start point which is the main. this is the main function and to keep everyone on the same page again if you are new to this main function and if you don't know what this run app is doing you can watch my previous course first thing we need to learn is why we need folder structure in flutter basically flutter don't provide any folder structure by default and it don't enforce you to follow any folder structure so it's all up to you you can choose any folder structure shutter community has been using two folder structures the first one is the feature based and the second one is the layer based so these are not exactly the standard folder structures but these are mostly used and worldwide adopted folder structures so we are going to talk about them so the first one is the layer based or features inside layer structure so this is the first structure as the name suggests in this approach the layer come first and your app features inside them in other words we do not put the dart files directly inside the layers we create folders inside each layer so for example controllers and widgets will be inside the presentation layer model classes inside the domain layers etc so as you can see on the screen we have a lib folder and inside the source we have presentation application domain and data basically these four are the top layers and inside we have a feature you can see feature one feature one feature one and feature one and then we have feature two same and then with this approach we will keep adding all these features in this layer so we have top four layers and all the features will be inside these four layers so this is the layer based and then if we talk about the feature first in the feature first we don't follow the layers but layers will be inside the features exactly so basically in the future you can see we have feature one and inside each feature we have presentation application domain and data so let's say we have an authentication feature so for the authentication let's say we have data coming from firebase we have domain which is having models related to user it's login it's signup forget password and all these models dtos in the application we have services and in the presentation we also have some user interfaces which are the login signup applications and the controllers will having some logic right so this is how we create feature based so example of the feature based is basically you can take it as authenticate shopping cart orders review checkout okay so head back to our footer and inside let's start creating again if it is not a hard and fast room to copy and paste all these features and you you must have to create if you see that your application is small enough you don't need any folder structure you don't have to fold follow any folder structure you can keep everything inside the slip folder there is no issue in it and again if you think that it is going to be grow or bigger and bigger you should have to follow this folder structure approach okay inside the lip folder let's create our top root so right click new and create a directory which is a source directory now i would like to keep all my files related to application inside this source against this source now i would like to create some other top level files [Music] okay you created all these folders in here you can see at the top we have common widgets all the widgets that are going to be reused in other screens i will put all these widgets in here you can further drill down or you can further categorize these widgets if you like so again it's not a hard and fast rule you can customize it as well so in the constants i would like to keep all the colors that i am going to use in our themes which is the next tutorial which in which we are going to talk about to create light and dark themes so for that i am going to use put all the strings in the constraints folder all the colors and next we have exceptions we will will try to handle the exception we will try to put exceptions in it you you can put these exceptions any way you like you can change the name of the folder and in the features you can say i'm going to use feature first approach you can use layer first approach as well and if you don't want to use this you can use any random approach but except this features folder we have these six folders that can be reused in any application we have localization let's say we want to use multiple languages in our application so all the strings will be inside this localization so when the application language is going to be changed we can easily control this localization folder then we have routing of the application complete application and in the utils all the utilities inside this util folder you can create single class you can create multiple classes the rest case is in your hand so let's now see what about the features so what feature we can create inside this [Music] so in the authentication i am going to follow this mvc pattern which is a model view controller so model is basically all the models which basically help us to map the data from database and most of the time we use them to display also data on the user interface we will learn each and everything step by step so in the authentication we will create models in the screens we are going to create all the screens related to authentication in the screen we are going to create all the screens related to authentication like login signup forget password and bunch of other screens and all the backend logic related to all the screens and all the models will be inside the controllers so this is how i divided this authentication so most of the time people are using some other models like data domain application presentation so you can use them as well inside each basically the purpose of features there is to divide or to put all the functionality of some specific feature inside the same folder so in here you can see i have an authentication folder so no matter which approach i'm going to use i can use mvc mbvm you can use domain presentation and data layers so it's all up to you you can use any of them so this is how we are going to create our folder structure now at the top of this let's close the folder and in here you can see i have created an assets folder so to create an assets folder here you just have to click on this route and you have to create a new directory this directory will be created at the root level in the assets i have created four new folders which will contain fonts images logo and videos so these are not directly related to our lib folder we don't have any dot dot files so we can easily put them in here at the top so we can use it in the whole application next thing we want to learn is how to create packages so to create a package again i am going to create a directory which will hold all the packages for cloud packages or for authentication packages the most important thing that i forgot to talk about that make sure that you can see i did not write anything capital or i don't have any spaces no file and no folder can contain any camel case any upper case any spaces etc so inside the packages we have to create new flutter package so to create a flutter package right click and go to open in and open it in the terminal and here you can see it's not pointing to our flutter login app but it's pointing to our folders which is inside it inside the login average of the packages so in here to create a new package so i am going to create authentication repository this is flutter create with this two hyphen signs we will write template then package and name of the package so name of the package is again small and with underscores so it's authentication repository hit enter okay you can see all done your package is in this directory minimize it and go to packages and in here you can see we have authentication repository and inside this repository you can see we also have a lib folder and it is basically a simple calculator again a simple function which is returning plus one value so this is how we create packages in the upcoming videos we will learn how to use this package and we are going to completely create our authentication inside this package so the purpose of creating this authentication in this package is to keep all the cloud files all the cloud functions away from this lib folder which is the root application so we can easily use these authentication in almost every application which requires authentication so it could be login sign up with email and password it could be with gmail phone number authentication or any other authentication you want to use we will create it inside the authentication repository and we will use it inside our project so that's it for the folder structure i hope you learned something new if you learned something new please like the video and if you're new to this channel please don't forget to subscribe because more amazing videos are coming along the way thank you for watching take care allah office

Channel: Coding With T

Views: 51,786

Keywords: flutter tutorial 2023, flutter 2023, flutter folder structure, flutter folder structure best practices, flutter folder by feature, folder structure, flutter folder structure 2023, flutter folder architecture, feature base folder structure, layer based folder structure, flutter feature folder structure, flutter feature folder and layer folder structure, coding with tea, coding with t, flutter login ui 2023, flutter tutorial for beginners, flutter best practices, flutter course

Id: iWsfGf_UEXE

Length: 11min 17sec (677 seconds)

Published: Thu Aug 18 2022