Master Clean Architecture in Flutter for beginners

1. Course Introduction: One to make a real-world application using proper architecture, separating the business logic and whiteboard. Then this course is perfect for you. In this course, you will be making an entire application from scratch using clean architecture with block and cubic state management. You will also be incorporating the rest API in your application using two different packets, HTTP. And you will also learn about dependency injection using getters package. And most importantly, you will learn how to separate your phone into three different layers, data, domain and presentation layers and make your module. My name is. And in this course, your instructor will be tricked them on dry. I hope you will enjoy it. So without wasting any more time, enroll now and let's get started. 2. Clean Architecture overview: Welcome to the first video of our course that is fluttered in architecture. In this video, we will be learning about clean architectures over. So before jumping into clean architecture, we need to know why to use architecture in the first place. If you have a small or medium scale app, let's say an app where you have to push some buttons. And in the UI, there will be some displayed image or some display text. Then you do not need an architecture, since it is a very simple act. And incorporating an architecture in this type of app will be on hustle and time taking process. But let's say you have a very big application where not only you, but many more developers are working on the same project. For example, let's say you are building a very big apps like Uber or a very big app. Zomato, that thing. Not only you, but many more developers are working on a single project. That time, having a proper architecture not only helps you speed up the development, but also helps to standardize a design pattern throughout the entire application development team. Also, having a very proper structured architecture helps us to modularize the code. Here comes a beautiful part of clean architecture. Clean architecture helps the application developers to modularize the code. What do I mean by modularizing? Modularizing the code means having separate sections for each independent sets. Now, if you want to change, for example, there is a backend service you're using, let's say fire this. And later on you want to change it to a custom backend, then modularize architecture. You can do it very easily without affecting other layers. Also, if you're using, let's say, a package which is working fine for now. But later on, you want to change the package to a different package for the ease of your use, Andy, for the betterment of the application that time you have, you can use this modularized architecture to easily change a few files. And then you can again run the application as it was. Now, as we now know, that architecture is needed in case for making medium-sized or big scale applications. So why should we choose clean architecture? There are many more architectural options, such as MVVM, MDD. See, why should we use clean architect? Well, to understand that, we need to know the basic fundamental structure of clean architecture. Clean architecture separates the code into three different layers. One is the presentation layer, second is the domain layer. Third is the data. Presentation layer consists of the UI and the presentation logic. The presentation logic being the state management. For example, state management such as block, block with cubit, provider, fever, pot, getX, and so on. The domain layer is thinner, where our main business logic of the app will contain. The domain layer consists of three sections. The entities section, the use cases section, and the repositories contract such. Now let us understand a bit about each of these sections. The entity is part, contains the objects which we'll be using showcase the data in our UI. The use cases will contain the main logic, for example, validation of password and validation of e-mail. And the repositories contract contains the contract or the abstract class from where we will be getting the data. Now the data layer is the layer from where we'll be getting the data from external sources, such as APIs or databases, or even or false. Data layer consists of three sections. Repositories, implementation, where we will be implementing the repositories that were in the repositories contract. Where it also is the model's section and the data sources. Nothing models will extend from the entities. Anti data sources will fetch the data from APIs or databases or even our folks. Now, as we were earlier thing that clean architecture helps to modularize the code. It also means that each and every section is independent section, the presentation layer, B, domain layer and the data are all independent to each other. So if we change something in the data layer, it should not affect the presentation layer. It domain layer. Similarly, if we change something in the presentation that it should not affect the domain layer and the data there. Now, since our app is having separate layers for UI and the logic, it also helps in testing the code. Writing unit tests for the, for specifically the logics. And writing widget for DUIs will very easily done. Before jumping into the coding part of this course, let's first see what actually will be making for learning the clean architecture. So we'll be making this application which shows news. And we'll be using a news or API, which is an open source API. Now, when we click on this news, a new page will be opened where we can see the rest of the needs. Also, we can search some new, let's say, I didn't really show the news that is searched. Now let us create a new application. Will be naming the application news app, right? And we'll open the application in VS code. Okay. Now let us see the file structure. First, we will have a folder called features. In the app that we showed. There is only one feature that is showing off the news, right? So new feature inside this show news feature will have three sections. First, presentation section. Second is the domain section. Third is the data collection. Now, other than the features, will also have a core file. Now the contents of the core file will be not only used in just one or two features, but throughout the applicant should. One folder will be constant. Another folder will be failures and successes will come to this part later on the course. Another one will be services. These are external services that we'll be using all, let's say packages. So this is the basic folder structure. In the next video, we'll be starting with the UI of the application. So thank you for watching. We'll see you in the next one. 4. Entities: Welcome to the third video of our flutter clean architecture series, where we are making an entire app using the clean architecture. In this video, we'll be walking through the domain layer. And in the domain layer, as we saw, we have three sections. Entities, use cases, and repository is contract. So in this video, we will be taking a look in the NTDs part. So before jumping into the code, let's exactly see what is the data upon which will be making the entity. So we can get the data in news api.org. So if you go to news api.org, there you can get the documentation, will be logging in and getting the API key later on in the data section. But for now, Let's just see what kind of data we'll be working on. So go-to documents, documentation, and then click on everything. So this is one API, and this API gives us, whenever we do a get request, this API gives us a json data. Will be requiring the author name, the title, the author is a string format. As you can see, the titin is also in string format. And we also need the URL of the image, results in string format. And published at is also in string format. This is the date and time. The content is also in string format. Okay, Now let's make our entity. So we'll go into Features section. And inside the domain section we'll make a new folder called entities. Inside the entities will make a new entity called News info dot, dot will make a class known as news info. And first it will take a string of title. The second will be a string of altered. It third will be string of image you added before will be a string of content. And the fifth one would be the type of public static. Now, let's add everything inside our constructor. Now, except datetime. Everything can be nullable. For example, a news article may have a title, or sometimes even may not have a title. We'll usually every news-type to every news article should have a title, but there may be some mistake in the database on maybe the back in the person who is writing the news article may have forgotten to add the title. So we have to like consider this edge cases. So we need to make the title nullable. Also the author can also be nullable so that also imageURL may or may not be present. So that also content also may or may not be present. So that also we are given, but datetime will be preserved because whenever a news is published, it has to be present. So apart from this, apart from datetime, we do not need to make anything else required. The required keyword means whenever we are calling the news info, we need to add the datetime. Now, what exactly is the nullable types? For example, if we have a string of, let's say name, and I give a name of RAM here. We are specifically telling dark there. The name variable is taking a data type of string and the value of the name variable will always be a string and it can never be null variable. But if we assign it as string with a question mark, then we are telling dark that the name variable can be a string or it can be none. For example, the name can also be not. This will also work. So we are done with the entity is part of our application. In the next video, we will be learning about a very important package that we'll be using, which is the service locator or get it package. So thank you for watching this video. See you in the next one. 5. Service Locator Package: Hello and welcome to the fourth video of the flutter clean architecture series, where we're making an entire app using clean architecture. In this video, we'll be learning about a very important package called the get it package. Now, what does this get it package help us fit before knowing that we need to know what exactly is dependency injection. So what exactly is dependency injection? Let's see an example. So we'll make a new file. You do not need to make this file. This file will be just for this video. It could be DIE example dot, dot. And here we're importing our material dot dot package. And we'll be making some skip list widgets. Let's first make this, then I'll explain. Okay. So as you can see, this is a dummy button, which it takes an elevated button. And you can see that our dummy box is dependent on our dummy button. Also. We can see that we have a dummy button, which is an elevated button. We have a dummy box, which is dependent on determining button. We have a dummy card, which is dependent on the dummy box, which is again dependent on the dummy button. And we have our dummy page, which is dependent on the dummy card, which is dependent on the dummy box, and which is dependent on the dummy button. Now, if we have, let's say a class of button info which stores the information of the button. For example, let's say x here. And if we want to pass this here, so that we can use this one here. So now we need to pass this button info in all these widgets. Let's see how we passed in our dummy button in full, in our dummy box. Now, we need to pass the button info in our dummy cards so that we can use it in our dummy box. Now since we are using the button info in our dummy card, we also need to pass it in our dummy page. So we saw that we are using only using the button info in our dummy button. But since all these are dependent, so we need to pass our button info at the very top. So to avoid this problem, comes D, get it package. Now to access this, we also need to specifically call our setup services function in the main dot dot file. So for doing that, first, we need to give his first factor binding that ensure initialized. What this one does is initializes the things that are needed for the native platforms that are required in our iOS and Android to be built before running anything in the app. Now we will be calling the setup services, and now we're done. So this was it for this video. In the next video, we will be using the get it package in the Use Cases and repositories part. And we also need the service locator for now you can delete it, will be creating these in the next video. So thank you for watching. See you in the next one. 6. Usecases and Repositories: Hello and welcome to the fifth video of our flutter clean architecture course, where we are building an entire app using the flutter clean architecture. In today's video, we will be learning about use cases and repolarize and repositories in the domain section. So let's go to our Features. And inside the domain, Let's create a new folder called use cases. And let's create another folder called Repositories. Inside the use cases, we'll make a new file called fetch News. Dot. Dot will create a new class called Fetch news. And inside the class, we'll write a function called fetch news. Before that, I would like to talk about a package which is called dots package. Let's first see white dots package will be needed. Let's go to pop dot diff and search for dots. Let's import this package in our project. Let's go to a pub spec dot YAML file. Now, usually when we are fetching something or getting something or from a function, usually we can return just a single datatype. For example, if we have a future of news info and I'm saying fetch news. So this function can only return news info. But there might be a case where from our back-end we're not getting some news and forth, but we're getting an error. So that time what we want to do is not returned the news in full, but return a failure. How we can do that? We can do that using dots. So let's import dots first. And using this starts, we can do is we can create an either. With either we can return to datatypes. Let's say one is int and other one is string. Now, what we actually want to return is a failure. And are there is list of news info. Now, let's create this failure class. And the failure will be used throughout our app. So for that, we need to create it in the code. We have already created a file called failures and successes. Inside here we'll create a new file called failures dot, dot. We create an abstract class. Failure. There will be a string message which will contain the failure message if there is any. Now let's create a new failure called Fetch. Fetch video, which will extend failure. And inside here we'll make a constant constructor. Which failure? And since we are extending the failure, we need to pass the message in this super. So now we can return, we can delete this one. Now we can return the fetch failure here. If we import the Phineas. Okay? Now this is the domain layer. We do not want to write any business, any data logic inside our domain. The domain shall consist of only the business logic, such as password, validation, email validation, etc. etc. So for tat, for connecting the data layer with the domain layer, we need to use repositories. Now, how we can use that? Let's go to our repositories and create a new republic. First of all, we need to change the name of fake news. Fake news. Use-cases, use-case, so that we can segregate that it is a use case. Now inside our repositories will make a new file called Fetch repo contract dot, dot. Now, since this is a contract, this will be just an abstract class. What do we mean by abstract class? For example, you are driving a car. You are turning the wheel, steering wheel in the left direction. The car is going in the left direction. You're staring given in the right direction, the car is going in the right direction. You know that by steering the wheel, the car will go left or right. But do you know what does the internal working of the gut you do not know? So abstract classes are just like that. It will give us functions that will get the job done. But we've not need to know what exactly, how exactly is the function, is the job done in the function will create an abstract class off of fetch ventricle. Here we'll have a function of future either failure. But let's stop new ZoomInfo. No. We can go to our use cases and import the Fed. Should I put here? All right, I'm going to call the the vegetal pole here. Now. Now we can just return the fetch repo dot fetch news here. So we are done with our use case. And what are we are done with our repository. But we are also having a search feature here. So just having the PECC news will not work. We also need to pink for the search functionality. For example, whenever you are searching some text, that time he entered, what we need is to return, we search texts, news here. So for doing that, we also need to pass another field called search text. Now, this can be null. We search text can be done when it is null, will just show the normal news. And when the search text is not null, that time will show the search news. Now we also need to add it in our use cases. Here also we'll add a string of search text. Okay? Now we are done. In the next video. We will be working on the data there. So thank you for watching. See you in the next one. 7. Models: Hello and welcome to the sixth video of our flutter clean architecture series, where we're making an entire app using the clean architecture. In this section, we're going to start the data layer. And inside the data there will be starting on with the models. So let's first create a folder in the data folder, fault models. Inside the models, let's create a new model called News info model dot, dot. And let's create a class called News info model, which will extend news info. Now, you need to make a constructor of modal class and be super super function. Now let's see what the super function is asking for. It is asking for a DateTime is mandatory. The author name, the content, image you had an detected. We knew that the title imageURL content and the author are all strings and the datetime, datetime time. But the data which we will be getting will be in JSON format. Everything. We will have a different data type. So let's first see what datatype will be happy. So we need to go to news api.org, go to documentation. Inside the documentation, go to everything. And let's check what is the datatype of our data which we are getting from our news api.org. Apl is a string, which is okay. Title is also a string, which is fine. You are enough. Image is also a string. We published that, which is the DateTime. It is also in string, which is undesirable. But For notable, the content is also in Street. Okay, so now we know what data types we're getting from our API. So let's write here. When write. First we need the title, then the author name, then the image URL, the content, and the data. Inside this super will you set the title, title? Since the title in our news info is also a string which is nullable. And here also title is a string which is malleable. So it is okay. And our author inside our news info is a string which is nullable. Here also it is a string which is nullable. So we can just pass it. Our image URL is also a string which is nullable. Hero image URL, which is a string which is nullable. We just pass it here. And our content is also the same as you can see now our news info, gesturing, which is nullable and heroes, so it is a string. The datetime, however, inside our news info, it is a date time which is not nullable. But in our news info model, we have set it to a string which is not level. The reason being the data which we are getting is also a string. And we're expecting that in some cases this can be a null, so we need to take care of that. So what we can do here is make a function called Get date, time. In date time format. We are writing a function with. Then let's remove the constant here. Let's take a static function and which will have a return type of datetime with the same name. And here also we will pass a string of datetime, which is nothing but this one. Let's pass this stream here. Now. First of all, we will say if the DateTime is equals, equals null, then do nothing. Just return a date time of the current datetime dot. Now we can get the current datetime, datetime dot now function. And if the DateTime is not null, then what to do? Then there is a very useful function of the date that lets us parse string to datetime datatype. Let's see how we can do that. We'll write the final time. Datetime, datetime format because to date time dot tripods, using datetime. Now, tripods does. What tripods does is it tries to convert the string date time, which is this one, into a datetime datatype. Also here, we can just give a not nullable, which means that here the datetime can never be null. The reason being we have already checked if the time is null, then we will return Time dot now. So inside the else, the datetime can never be null. So we can give this exclamation point. And mechanics specifically say that inside the else, the datetime will not be null. Also, the tripods returns the date time, but which is nullable. Now why it is nullable? If, let's say it tries to parse. We do not need to specifically give the exclamation point here since we are already checking if the DateTime is not here. Now, why the datetime dot tripods function returns a date time which is nullable. The reason being if tripods tries to pass the datetime format or the datetime string to a datetime datatype. But let's say it fails to convert that. Let's say we have a string which is something hello. Now, this hello Can not be, this hello cannot be converted to a datetime. Datetime can be converted, let's say something like this can be converted, converted to a datetime, but hello cannot be converted. So what happens when we are giving us some texts which cannot be converted to a datetime, it just returns a null value. Let's change the hello to depend. Now, if the datetime, datetime format is equals, equals null, then also we'll return the datetime dot. Now. Now this means that it tried to parse the datetime, which is in string format, to a datetime which is in datetime format, but it couldn't. So that is the reason we are returning the datetime of that present time. But if it is not null, if DateTime is not null, then we mean that it has parsed words. If it has, it has been able to parse the data which is in string format to Edit time, which is in datetime format. So that time we do nothing but returned. Okay, so this one is done. Now, we need to create another method, which is a very helpful method. We will be creating a thrombus map method. Let's create, and then I will explain. Now what this method does is that first week, what kind of data we're getting. Here, we're getting a data in the JSON format. Or we can say that it is in a map format, which is a string, which is our t. And the value is dynamic, which means it can be a string. It can be, it can be done, it can be anything. Dynamic means that it can be string, it can be, it can be any data type or null policy. For converting this map into a museum for model, we need a function and that function is from. Now. We need to specifically tell this as a fact. Now, I explained in the service locator video, what is a factory and what is a singleton? Singleton. Instance is a singleton is where we are using the same instance throughout the app. But in a factory method. What is done is it is creating a new instance of this object whenever we are calling. So when, whenever we will be calling a from map method in our app, that time it will create a new instance of news info model. Let's say we are calling from map five times in our app. So five new instances of news and for modem will be created. But if it was a singleton, then even if recall from five times, it will just be creating one single instance. Okay? Now also we need to give the data here, so title will be mapped. And if we can see here, we just need to map these values here. The title here, we can just copy it here. And from map with the title, the author will be mapped. And if we check it here, the author is this author. So we can copy this one and paste it here. The image URL will be map and image URL. Url too much. We will copy this one and paste it here. The content is mapped. Let's check it here. This content and the date-time which is published act date with this topic, this one. And now we are done with the news in for model.fit from map method, which converts the map string dynamic two-way news. And for Lord. So thank you for watching this video. In the next video, we will be diving deep into the data sources and repositories section. Thank you for watching. See you in the next one. 8. Data sources and Repositories: Hello and welcome to the seventh video of our flattened architecture series when we are making an entire application using lean architecture. In this video, we are going to talk about the data sources and repositories in the data section. So first let's go to our data file and let's create a new folder called Repositories. Inside the repositories will make a new file called Fetch report. In IMP, which means implementation dot, dot will make a new class called which report IMP, which will implement such repo. Now, we also need to, since we are implementing the fetch repo, which one was present in the domain layer. So we need to override this function inside fetched repo IMP. For overriding, you just can't do one thing. Click here, press Control and dots, and create, and tap on here, create one missing over overwrite. It will automatically create the function. Now we do not want to throw an error here, so let's delete this. Inside this function. We will be calling the data sources. So before that, we need to make the data source. So let's create a new folder inside the data file called data sources. And inside the data source will create a new file called from remote ds. Ds means data source names than the, as the name says, we are fetching the data from the remote data source, which is an external API. So we named it fetch from multiple sources. Let's create an abstract class from remote data source. Inside the abstract class, we will have a future which will return a list of news info. Model. Name will be fetch news. And also here we will be incorporating the search functionality using the search text. In the last video, I explained if the search text was null, then normal news when visual and it restarts texts was lost none. Then the search tools in bushel. Now inside the fetching use, what we need to do is call an external service, such as the HTTP service or the entire service, using which we'll be getting the data from our external API. So let's do that. First of all, we will post before we make a map of string dynamic. This will contain the data that is given to us from the API. For doing that, we need to make the service. But in this video, we're not going to make the service, so we will just make the contract of the service. So inside the core folder, we have a services services folder. And inside the services folder we'll make a new file called HTTP, or let's say API that we started since we are getting the data from APIs. So we are writing APIs. If it's not done. Let's create this API service. Please make an abstract class API service. And inside the API service will make a new folder. Future string Dynamic get data. Now we can call this one. Here. What we can do is make the API service. Since this is an abstract class, we also need to implement this one in a separate class. Let's create the glass. Glass protection from remote blooming I am giving me until the condition which implements from remote support what are the function? And inside here, we enforced probably API service. Okay, now we have called the API service, and here we'll call the get data function in our API surface, right? Not extreme. Dynamic equals two. Or we can say data equals to maybe start, get different. Also we need to await here, since this returns a future maps and dynamic. And since we are using our chair, we need to make this function. Okay, so we're getting the data, but what data actually we are getting, let us go to news api.org. Insight documentation will go to every through the data that we're getting from the API is a map. And inside the map, what the actual data which we want is this articles. These articles contains a list of maps. So let me first code and then I will. So inside the data, getting a list, let's call it list of articles. We can see here that this is, if we assume that this entire thing is the data, then inside the data, if we get the articles, the articles will contain a list. Now, this is a list of maps, but the maps inside this one and demand in the heart are a little bit different. So for that, what we can do is make a new list off map, string, dynamic list. I didn't really initialized to an empty list. And we iterate through all the items inside this list and convert each item to a map string dynamic. Let's do that. So we'd call it map. It will be equals to list. And we'll say that this guy is as map dynamic. Now we'll add this map inside our map list. Map fully stocked at. Okay. Now what we can do is make a new list of news info model. Let's initialize it with an empty list. And now we'll traverse all the items in the map list. We'll convert each of the map list to each of the maps inside the map, this museum tomorrow. Let's do that. Now. We will be using the strong map method which we created in the model section. We'll call it as losing Phil Martin from map. And the map will be each of the items inside D maps. Now we'll add the newsvendor model inside the news list and then return. Okay, done here. But let's say there is some error occurring here. Let's say our get data function shows some exception. So we need to catch those exceptions here. So what we can do is copy this entire code and paste it inside a try catch block. So if we get some error, we will throw an exception. The exception can be any extraction. But what we actually want to do is make a custom exceptions. So for doing that, we need to go to failures and successes, make a new file called exceptional stark dark. And we'll create a custom exception. Such exception implements exception. This exception here. He's a plus given by dark and it has a factory constructor. So as we saw in failures, we were extending the failure, but this one, we cannot do it here because we cannot extend a class. We just have a factory constructor, so we need to implement it. So let's create the fetch exception constructed here. Okay? Now we can throw this exception. You can write exception. Let's give it a message also to get started. And let's put it open. So we are done with the fetch news function inside our fetch from remote data source implementation. Plus. Let's call this function inside our repository. Implementation. Will return. First. We will get the class here. But from remote data source. Now we can use this one. Searched. It says that this returns a value of future list news in format which cannot have a method since this function returns it, either a failure or a list using. So what we need to do is return it like this, right? Okay? So what is happening here? We are telling that since the fetch nice function, return, returns a future of either failure or list of news info. So we are telling that this function will return the right side of the either value, which means the either has two values, either failure, all this stuff moves into this function, will return the right side of the items which is listed. Okay? But we also saw that the data sources through in error here or exception here. So we also need to catch the exception in our repository. So we can do that by try catch block. But also we saw that we are throwing a custom exception of project section. So we can catch the customer exception on pitch exception. And now we can throw a failure also. So we will return left off. Which failure with a message E dot message. This E is nothing but an object of fetch exception. We also need to return the write off from your data for such news. So now we're done with the repository implementation, we are done with the data sources. Let's recap once again. We made, we implemented the fetch report in scientific level implementation class. We then went through the data sources and made the data source for making the diagnosis. We made a abstract API service costs, which we will be implementing in the next video. And then we change the data types to be required. Data types from Maps team dynamic to museum for model, and then return the news or three fetch exception. And then inside the repository is we used another try-catch block where if there was no error, we would return the right of the failure, which is list, news info and all exception. We will catch the exception which was returned inside our data sources. Here. We are catching that and then returning the left side of the, which is a failure, which is fetched. So that's it for this video. In the next video, we will be diving deep into the services. So thank you for watching. See you in the next one. 9. Services: Hello and welcome to the eighth video of on Flutter clean architecture series, where we are making an entire app using cleaner architecture. In this video, we're going to talk about the services part. So first, we'll go to the code section. And inside the services, we have already made an abstract class called API service, which gives us the, which has a function, Get Data, which returns a future map string dynamic. So let's implement the API surface here. Plus BI service IMP. Imp is terms of implementation which will remain if BI service. Now we will add the function here and override it. Here, we will be using a package and get data from our external API. And the package is called HTTP. So for that, let's go through. And here we will write HTTP. We're going to get the package. So by doing this, we can copy the package name. And here we're going to basically package inside I look ups vector. Now we will import the package in our API service. And we will say that important HTTPS, HTP, HTTP. We can get the data from our HTTP and how from our API. And how we can do this is there is a useful function called HTTP GET. And this get function, we will get the required data from our external API of this one. So what we need to do is give, let's first see what this get function takes. The get function takes a URI, as you can see here. And you get function also takes headers, but will also require query parameters also. As we can see. This is the main API which will be providing the q equals to Bitcoin. Api key equals to F via an API key goes to GPI. Keep this to our query parameters so that also we need to add it here. So let's see how we are going to do that. Okay, So let's first add the URL for that. We need to provide the URL here, right? Streaming URL, and we'll add it inside here also. You are also, as you can see, that we are needing query parameters. So we'll have another map. String, dynamics. Ready parents. We need to add it here. Okay? Now the URL is not an actual string URL, URI. We need to parse the string, you add it to any way. We can do this using you are I thought paths. And to give the Kusto query parameters, we need to call a replace function. And here we can add the parameters using two fatty particles. Okay? So now we're getting the data from our gut. Let's store the data somewhere. For doing that, we need to make the function at a sinc function. And the result here, we'd have final response equals http.get. Let's see what this returns. It returns a response. Write it here. Okay, Now, if the response status code equals, equals 200, this means that we had successfully get, we have successfully got the data from the API. So now we can return the data here, return response body. The body is actually in string format, which is Jason forward. We need to decode this and make it into a map format. Since we are returning map string dynamic from the get function. So in right json dot decode, and inside here, we'll get the response for default, okay. Also, we can write as Math String dynamic response if the status code is not 200. This means that we were not able to get the data from our API. That was some problem. There was some network issue. That time we will throw an exception with some message. Let's see. Status, response dot status. We talked. Okay. So what we are doing here is we're getting the data from our API using a custom query parameter. And if we got the data, that time we are returning it in maps to in dynamic format. And if you are not getting the return, then we actually exception. Now let's go through the data section inside our data sources and inside the fetch from remote data source implementation. We will give the URL here and the query parameter. Now, for doing that, you need to go here and get the API key is pressed the gate API key button. You need to give your first name, your email address, and choose a password. And submitted. After that, you will be getting the API key. But here I will just be logging in. So let me log in and then I'll show you. Okay, I have got my API key here. I just copy it. Store it somewhere safe for now, let's make a new folder called strings start. This is not string, it is strings. Strings. And I installed the API key here with a static variable. Also. I will still be URLs also here. So I have one, everything you added, which is this one. I would copy this one and stoichiometry. Okay. Now let's go to our fetch news function. Inside out fetch from remote data for some limitation. And look at those URLs will be strings, dot API from everything you are and why the query parameter will be a map. And this will contain cookies. Let's check what books. One will be Q, the source text. If we do not have a sort of steps, we can just give it a concrete text. For example, like cockpit lines. Okay, so the normal use which we will be getting, will be getting it from the top headlines. So if we copy this one and we need to paste the API key KPI, you hadn't yet. Everything headline we will be using when we are searching for some news from all the articles. And top headlines will be searching when the, there is no text inside our search. Okay? So what we can do this, if the search text is not equals to null, that time starts from all the articles. If our search text is equals, equals null, that time starts from the top templates. This is the ternary operator, which we are seeing that if X is null, do the first thing after the question mark. And if search text is not equals to if start is null. That thing with the second thing. This is the ternary operator. If the search text is not equal to null, then do the first thing which is present after the question mark, which is strings, API everything. And if search text is equals, equals null, then put the second one, which is maybe I talked at length. So when there is some search tips when researching some music from our everything. And if there is no such steps, then we're just returning the topic. And inside our query parameter falls. So we will write if search text is equals, equals null, that time we do not, we need to provide the country. So in right. Contrary to India. Or we can find out US-Soviet. And if search text is not equal to null, that time, we need to provide inside or everything if we see, we need to provide a cue that is the search text yet is given Bitcoin, it can be anything. So we'd write cube and it will be equals to search text. And regardless, the source text is null or not, we need to provide the API key, which is given here also, which is given here also, right? Api key. The API key will be unique for each and every user. And you need to get it after logging in or signing up in the music BI.com. I have got my FBI King and I have stored it in the strings. Plus. So let's use that extreme Scott API. Okay, So we have implemented our services inside the API service dot dot file. And we have used this service in our data sources file. Now comes a very important part. We are calling the service inside the constructed from fetch from remote data source. In our service locator video, we discussed a very useful tip on how we can register these services in a single function and call it inside the main. And we do not need to worry about initializing these classes. Every, Let's do. First, we'll be creating a new folder called or a new file inside our own folder called service. Services. Locate our dark dark. Inside here we import the package, will write final, get it. Sl. Sl means service locator equals to get it instance. We'll make a new function called set up services. Here we registered our services. The first service which will be registering is the API service, Justin Sterling. All the services are singletons. So registers singleton API service. And here we would be giving the implemented Cluster API service implementation. We will register the data sources well, so we'd write fetch from remote, ds. From remote, yes, I am. Now we can see that it is saying that there is an additive parameter k, So this is required. But let's go to our here. And now we can delete this one and get the API service from our ESL services located. Important to proceed. We can call it API service. And wallah. We do not need to call the API service inside our constructor. We can directly get it from a service. Wonderful. Let's again go to our survey is located and registered our repository. We'll call batch report. And we registered effects ripple implementation. Here also, we do not require defects from the body is since we can get it from our service with either, Let's go inside our vegetable implementation. Remove this one and get it from our service or better. Okay, great. Now, since we have additional defects report from implementation, we can also go to our use cases phi. Remove this one, and get the repo from our service locator. Now, as we discussed in our service locator video, just by giving the service locator class or by just writing the service locator function. It will not work. We need to all the functions inside p main.out fund. And for the, for calling the function. We also need to give the better binding insurance initialize. This will ensure all the things I've initialized before calling the function in Berlin gap. Now let's rebuild the function we have written a lot of good. Let's see if everything is working fine or not. Opening. For now, everything is working fine. Let's recap what we did. We implemented our API service here. We wrote the get data from using the HTTP package. And we also, we also did was if the response.status book is equals equals 200, then return the response body as a maximum dynamic response for sitters code is not opposed to 200, which means that is some error in getting the data from the API that time we throw an exception. So that's it for this video. In the next video, we'll be deep diving into the presentation layer. So thank you for watching. See you in the next one. 10. Bloc with Cubit State management overview: Hello and welcome to the ninth video of our flutter clean architecture series. We're making an entire app using clean architecture. In this video, we'll be learning about the state management, which is blocked and cubic. In this video, we'll be learning the state management using an example. And in the next video, we'll be implementing our state management inside our app. So before starting, we need to add two packages. One is the block package. Let's add the block package in our Pub spec dot YAML file. And the other packages flutter block. Let's add the flutter block also. You can also install a handy extension called block. Using this, you can easily create blocks in your application. Let me show you how. Just go to the main folder. Select the folder where you want to create the block or cubit. Here I want to create a new cubits, so I'll click on cube it and give the name. Let's say I will be naming this one on executed. So I can see my cubic is, has been created. I will also name this cubit as text underscore two, but now we also will making a new page called text DAG. Now you do not have to make the text page and detects cubic. This is just for showing you an example inside the text which I will import a material dot, dot and a stateless with it. Text page. The text page will contain a scaffold with our body. On the center. It will have a child of elevated button. The elevated button will take on pressed. Let's follow, have an empty function here and a child should be text. Okay? Now let's go to our text to it. This cubic yard is the actual cubic. And here is the steps. Let's make some new states. This is the initial state, which means the state which is present when the app is running. If you go to cube it, we are, we can see that whenever the cubic has been created, we are already initializing it with the initial state. So inside our state we will make some news to new states. One is the text loading and one is the text. Danced it. Okay? Now let's make a new function. Inside our cubic function will be show new text function. And in this function, what I want to do is let me first go to our mean and change the homepage to a next page. What I actually want to do is whenever I click this button, I want to show a circular progress indicator. And after some time, I want to show here, it takes that, which is, let's say done or completed. Let's do that. So initially I will emit a new state, which is text loading state. After some time, Let's wait for 1 second. And after are waiting 1 second, I want to emit the text, danced it. Okay? Our function here is being done. Let's now call this function. Whenever we click the click button, we will go to our text page. And here instead of on pressed, I will give it. Now. Before that, I need to also import the flutter block packets. Then we can call the function using context dot read. And inside read, I will be naming the cubit from where we are going to take the function dot. Show new text. Okay? Now what I want to do is create a block here or block builder here. So that instead of the text, I'll be showing once the circular progress indicator and then a text which is saying that no. What we want to show instead of this button, when we click the button, we want to show a circular progress indicator and then some texture. So what we need to do is we need to change the elevated button, wants to a circular progress indicator and then do it is. Let's see how we're going to do that. We're going to do that using a widget called block building. So let's write it here. This block builder will be of a text cubit. And next state inside the block builder, we will call a builder, which will take two things. If we see. One is the built context and other one is the next state. So let's give those contexts and state. Now. If the state is fixed, initial, do nothing. And so the button, as it was before, if the state is text loading, then do nothing but a circular progress indicator. Now, if the text is, if the state is not text initial or not text loading, then if you go to our text and then it has only one state left, that is the text on our else will always be the text downstate. So when the state is text done, show a text which is the completed. Now to use the block, we need to provide the block to a widget which is the parent of the texts with it. Now if we see the parent of the text page reject is the material app widget. So we need to provide our block, which is the text humid inside our metric or above our material app widget. So how could do it? Let's see. We will cut it from here, and we'll be using a widget called multi block. Provided. Here. We can have multiple providers. So one provider will be block provider. And we'll create it using a context, which will return a text cubit. And the child will be our material now. Okay? Now if we restart our, let's see what happens. Okay? So we can see that our button is here. Let's see what happens when we click it. We click the button. It showed the circular progress indicator and then the company details. Let's make the delay to four seconds and then see the app again. Okay? So we can see once we are clicking the button, the text loading state is being initialized. And after four seconds, the text downstate it's been initialized. So this is how block with cubic works. So this is the basic understanding of the state management that we'll be using. In the next video, we will be implementing the state management into our app, which means News app. So thank you for watching and we'll see you on the next one. 11. Bloc and Cubit implementation in App: Hello and welcome to the tenth video of our flutter clean architecture sees where we are building an entire app using pain architecture. In this video, we are going to incorporate our block and qubit state management into our app. So first delete the example cubits, which we made in the previous video. So we can do it is fine. We can delete the text page. Now. This one also will do it. And instead of that, we will provide, will be providing the cubit which will be making in this video. And here we will be writing the homepage. In delete the imports. Awesome. Let's restart the app. The children cannot be empty so far now, we will just remove this object. Okay? Now we will be making a new Cupid. We will go to the presentation section, and inside the presentation folder we'll be making a new cubit call. News. So as I told you in the last video, you can have a very helpful extension called block extension, using which you can create cubit easily, like you can right-click here and create a cubit audit block. But now this is the newest cubit and the new state I will name this folded new stupid. Now let's go to our news cubic. We can see that it is by default it is having the news initial step. And inside the new states, we have a news initial step. We will have two more states. The first state will be news. Let's skip it to news initial. The second state will be News loading, the third state will be News Editor. Now, inside the news initial step, we will have another thing called D, list of news info. So our news initiative will contain the news which will be showing here. Now, our new initial state will be containing the news which will be showing here. Let's put our news initial analyte we will initiate when we initially initializing the news with an empty list. Let's look at the constant. And then we'll be writing a function called void fetch news function with the search text here. And then we will be calling our function from the use cases, which is this function fetch snooze function for that will be registering this one inside our service locator. So let's say register this. Stretch nudes use case. Fetch knows. Okay. Now let's go to our new skill, but dot dot Phi. And here we will be getting the fridge News use case. Let us import the cell here. That is service locator. And okay, now we can use this fetch News, use case object inside our fetch news function. So let's use that. So we'll write fetch News. Use kickstart, fetch news with the search text. Let's see what this is returning. It is returning us a future, either failure or news in a list of things. So let's get the result from we're using await. Now, we will be getting just the either after the Earth. So I will write final such news. Result equals two. And this will have a datatype of either failure or this tough news info. Now, we've tarts package, which gives us the either datatype, also gives us a very helpful function using which we can segregate our things, which we'll be doing when a failure is gotten. And we can segregate the things which we will be doing when our list of news info we are getting. So how we can do it? We can do it using the full function that DOD schizo, right? Fetch news result dot fold. And here we can see there are two functions. One is the left function that will be invoked when the left result has been returned. And a right function that will be invoked when the right result has been returned. So if the left result has been returned, we will emit the news error state. And if the right has been invoked, will be emitting the news initial state. But with the news. Since this function returns a list of news info when the, when there is no error. So this r will also have a list of museum for this, L will have a failure. Okay? Now, before doing anything, we also need to emit the news loading state. Because whenever we are fetching the news, first it will show the loading screen and then it will fetch the news. After fetching the news, if there is a failure, then it will show the Dennett will have the error state. And if there is no failure and the function has returned the list of news info, then we'll have the news initial state with the music, with the list of music for. Now. Let us use this function in our homepage. So for that, we need to make our homepage a stateful widget. Let's make that. And inside our homepage, it will have an init function. Now, the init function is a very useful function. This function will only be called the first time the page has been initialized. So this function will only be called when the first time the homepage has been initialized. We weren't also that only when the first time the homepage, the nation initialized, we want to call the fetch news or this function. So let's do that. For that we need to import our Better Block package. And then we will write context dot, read, news, cubit, dot fetch news. And the search text will be null. Since initially we just want to search the normal texts. This is giving us an error. The reason being we haven't provided the news cuvette in our main dot, dot five. So let's do that. We even cut this one. Write a multi block provider here. We'll have some providers or list of providers. We can have just list of providers or even a single provider. We'll be creating blocks provider. Inside the Create. We'll have a function which will be returning the new skew it. And the child will be our material. We can import the news temperature. Okay, Now we are done. Let us rebuild it once, restart the app. Okay? Now we can see that our block is working, but we need to do some more changes inside out UI so that our block is connected with the cubics. So whenever there is a state change, according to that, DUI will also change. So for doing that, we need to go in our homepage. We need to go to our ListView. Inside here. Instead of the ListView will make a block block. The block builder will be off News cubit and news state. It will take builder function here, which will take a context and the state. If the state is news initial, nothing, show the ListView. And instead of item count, we will now use the state DOT. News dot length, which we are passing here. The news which are possibly, let's change the name of R2 moves. Okay? So the news which will add passing here inside our new news initial state that we are using here. So whenever the state is new Venetian, use the news which is provided in the news initial state. So we write him down and they simply count will restate that news dot length. And okay, for now, let it be this. And if the state is not news initial, if the state is news loading, that time, it will return a center with a circular progress indicator with a color of, let's say, if the state is not news initial, if the state is not news and loading, then we have only one more state left. That is the news era. That time what we can do is for now, we will just show a text. That's a wrap it in a sentence. Okay, so we are done with our block builder in our homepage. Now let's go to New scarred. The news card is a generic for every news card. This is a general news Scott, which we are showing in all the news cards here. But we need to have specific information for each and every newspaper, which will have unique picture, a unique title, and so on. So for doing that, we need to pass the news info inside each and every new scarred. And according to our new info, we will be changing the picture or the tide. So let's do that. Instead of this URL will now be using news info dot image URL. Now, as we go to our news info, we can see that the image URL can be nullable. We can see that this is, this can be the image URL can be a string or it can be done. We also want to check that if the news info dot image URL is not equal to null, only then show the image. And also here we can give an explanation sign, which will specifically during that, yes, if the image you added is not null, then here also the major adult cannot be null. Now, here's the image URL is null. Show nothing, just a constant sized box. Now, let's go to our title. Here. Will show the news info dot title. Now here also we can, we know that the title can be null or a string. So here also we need to tell that if the news is not equal to null, then the news info dot title. And if it is equals to show a no title text. And we need to remove the constant from here and add those here. Since earlier we told that the entire thing was constant, but now this is not constant. It will change according to the news info's you are passing. Now. We're also done with our new scarred. Let's go to the news view page. Here also, we will be passing the news info. And now what we need to do is set our display according to the news info which we are getting. So first of all, we even change the title to news in photo dot title. If it is not equal to null, then use the news in photo titled loose is given. And if it is equals to null, then show no title. Let's remove the constant from here and add the constant throughout. Extract. The image also will change. We will change it to news info dot image URL. And we will say that if the news info dot image URL is not equal to null, then only use the image URL in the image dot network. And if it is equals, equals null, then have a constant size box. Now the debt also we have to give, let's make a function. Let's say Get date in date in DD, MM, YY format. This is a function which will be creating, will be constant from here. Let's create this function foster. This function will return null and it will pick a date, time from our news info object. So what we'll return is datetime dot d. After that forward slash, then datetime dot month, then a forward slash, then datetime dot. So now using data inside string, using the dollar sign and then with curly braces, this is called string interpolation. This will show the data inside this string along with the other string that is present here. So for example, if you want to show the value of 100 here, then some string. You can do it like this. Let's pass the news info dot datetime inside our data in a DD MM YY format function. Then also we need to give the author name here. News in food dot author. The author can also be null. So for that we will check if the author is not equal to null, then only use the news info dot authored else, right? No. Author. And the content also will be deleting this Lorem. Ipsum text will have news info dot content. The content will, can also be null. So if the content is not equal to null, then only use the content. Else. Show no local route. Okay, I believe we are done with our news view page also. Let's go to our homepage. And since we added the news info here, we need to add those in our homepage, also inside our news card. Also we added the news info. So we also said that it is required parameter, so we need to add it in our homepage inside our news card. Object. Let's add it. News info is equals to state dot news. Let's remove the constant from them. Okay? So if we saw that the state dot news contains a list of news info. So each and every news info we can get using state dot news with an index. Now there's good news. God, we are, we can see that we have an error. The reason being the news view page, we need to provide the meals info. So we are done here. Let's restart the app and cross our fingers. It should be. Okay. Our circular progress indicator was showing and we can see that we can also see the news. Let's open a news. That's okay. We can see that the news we are getting, the date, we are getting the author animals, we're getting the content also. We are getting, we are getting the title optimists. Let's go back and open another news. Okay, here also, same thing. Okay. Now, let's check if our search text, what is working or not. Search Apple. Nothing is happening to it. The reason being we haven't added our search functionality here. So let's add that. We need to go to our presentation inside our pages. We need to go to the homepage. And inside our homepage, we need to add a on changed parameter, which will take the constant from here. Let's add the constant in these spaces. Now, what this onChange function will do is whenever we are changing, Let's change the onchange to own submitted. So whenever, after writing something, let's say orange. And after that, we are submitting by clicking on this button. We will be searching news related to the search text here, which is orange and discuss. So let's do that. How we can do that is by calling the new function. So we'll write contexts, dot, read, news, cubit, dot fetch news, along with the search sticks that we're giving here. And we also need to specify one more thing. But let's see how it is working or not. Let us search a bit coin. Okay, so our search functionality is also working. Whenever we searched the news, era is showing us some nice. Let's open the news. Okay, so that's working fine. Let's search with some other names. Let's say Apple. The, The Apple News is also true. Let's dive in One more. Newton. Not the exact Newton which you are hoping for, but okay, let's type in Google. We are searching the most popular search engine on our search. But we see that our search feature is also what. But if we removed all the text here and then press Enter, we're getting an error. But what should actually be happening is if there is no text present here, show the default. So we also need to do that if the search text dot trim. Trim means even if, even if you have some, let's say spaces here, this will also be considered as nothing present inside our storage part. So we introduce a trim. If our trim is equals, equals nothing, no text or avoid text. That time. Have a search and show the default means. And the default by default news, I mean search text will be null. And if that is not the case, then. So these are stretched. Let's now check if there is no texts present inside our search bar. And then we press Enter, we should get the default news and we are getting the default. But if there is some text, then we are getting the search tools. Okay? So everything is working now, but we need to also change a few things, few details. The top news is should be shown when we are showing the default news. But when we are just showing some search lynched, that time, the top news should be searched. So let's do that. For doing that, we need to make a new state, which is called the news initial search state. Now, this state will be invoked whenever the search text is not equals to null. So we write it here. If the search text is not equal to null, emit the news initial search. State. Else. Just initialize the news initiatives. Now let's go to our homepage. And now here, if the state is new initial, show the ListView, and if the state is news initial search, that time also show this dispute. Okay, now let's go to our top news and this one we will change. So we can wrap this with a block buildup. So this is the very useful thing about using block builder that we do not need to change the entire page or rebuild the entire page. Whenever there is a state change, we can just change the particular widget which we want to change. This is the beauty of statements, right? Context, state. And if the state is news initial, that time return to normal. Top news. Else if the state is new, initial search, that time showed the search to news, news to credit. And if the state is neither news initial nor news initial search, then return an empty budget or a constant size box. Okay, let's try it out. If we had on our initial screen, when there was a loading, it was showing no widget. Again, if we enter novae just showing the top near 0, when the top news are showing the header is top news. And if it is a search name, the search news had an issue. Okay, great. Now also, we will be doing some error handling here. Let's just wipe everything. Let's comment for now. Let's comment this part for now and emit the news error state. Let's see what is showing here. Let's restart the f. And when there is a news error state, we are just showing that there is an error text on the screen. What we should be doing when there is a news error state is we should give the user a reload button so that if there is an error with the calling of the APN, then we can reload our app and it will call the API once more. So let's do that. Now. If there is an error, then instead of just the text, we want to give an icon button. The icon button will take an on pressed. Let's for now give it an empty function and an icon. The icon will be, I can start. We replay out and this should be fine. And the color of it will be Deep Blue. The size will be, let's say 24. And let's give it a constant here. And what we actually want to do with this reload button, we want to again call the fetch news function inside our news, good news with the null search text. So if we do this for now, nothing will happen because we have just imitate a news error here. But if we remove the news error from here, and if we uncomment this, and now, if we press the Load button, it should show us the normal, nice. But the default means wallah it as soon as the default news. If we restart the app again and again, test it out, let's see what is happening. Our initial news has been shown with the top news header and the picture is shown, the heading is being shown. The pictures are loading. And if we go to a news, we can see that the title is being shown, the units is being shown. The date is being shown when it was published, the author Naomi tissue and the content also we are now if we search some text, search, some news hour searched news is also being shown with the search news headed. And if there is no text inside our search text field, then the default installation. So we have implemented our block with qubit state management inside our app. And our app is fully complete and functional. So in the next video, I will be talking about the modular part of clean architecture. We will be seeing why it is modular and how we can. I will also be showing by changing a very important package which we are using it. And I'll be showing how easily we can change the package without affecting other codes present here using this clean architecture. So thank you for watching. See you in the next one. 12. Testing Modularity of Clean Architecture: Hello and welcome to the 11th video and the final video of our flattened clean architecture series, where we are building an entire app using green architecture. In this video, we will be testing the modularity of clean architecture. From the very first video, I have pretending that clean architecture is very modular. By that, I meant that we can easily change anything in any of these sections without effecting the code of other sessions. So in this example, we will be changing our HTTP package in our API service to some other new updated package. Let's see which package we will be using. We will be using a package called dy. Let's go to bio and add DO package in our Pub spec dot YAML file. We have added dial in our bulb spec dot YAML file. And let's go through our survey is located and registered. Registered our diode. Now remember one thing. You need to register before API service. The reason being you will be using the dial package in our API service. So we need to register die off first and then we have to register API surface. Now for that reason only, we are registering our API service before the fetch from remote data source. The reason being we are using the API service inside our fish from remote data source. Now let's go to our API service and we will be deleting. This line. Will write final response equals two. Before that, we also need to get the diode. Let's import our service locator. Now we will write diode dot get function. Now the get function, we see that it takes the path and it takes three parameters also. The part will be the URL here, and the parameters will be where the parents, okay? And it returns a future of response. The response will have a response to it. Now, the, this will be response dot da, da data. Since we are using the response of diapason shaped rest, everything will be saved. Now, let's restart our applicant. Okay, so we're getting an error. Let's see what error we are created. If we print here, response start data. We can see if, you know, response.data is printed. If we print the response.data here, Let's see what happens. Okay? So this one is being printed. So our error must lie somewhere inside our data sources. Fine. Let's go to our data sources file. And inside our catch, let's print the edit. So we can see that internal HashMap or a map string dynamic is not a subtype of string. This is showing because if we go to our API service, we are using jsonData called the code inside our response.body inside our HTTP package. It gives us a string neophyte version of the map stone dynamic thing. But here we are directly getting the maximum dynamic types, so we do not need to use this one. So we can delete it here. And if we run it again, let's see what happens. Okay? So we are getting our data or some minute and see if that is also working. Let search. Okay. So the search functionality is also working. This is how easily we can change stuff in our clean architecture without changing anything. If you saw, we only had to change two to three lines in our API service dot, dot file. The rest, each and every file was saying are having the same code. We did not have to change any other file except the API service. So this is the beauty of clean architecture. This is so helpful that we can easily change anything without changing or altering other fights. So that is it for this video. In this course, we made an entire application from scratch using clean architecture. I hope you are also able to build the application with me. And thank you for watching the entire series till the end.