Build a Flutter News App with NewsApi Org | Flutter Tutorial For Beginners

so hello guys welcome back to my channel my name is Sun scar and in this video we are going to learn how to create a filter news app so in this news out there who are going to be multiple features let me go through them and so that you can get an idea of what we can build at the end so this is the app it have all the news available from the top news sources and I have specifically said that the country to be India so the hardy top news are from that and I will show you how to change that as well there are different categories available and if you click on any of them for example business we will be able to see all the different news or the of news in that particular category and as I said I have 70 country to be in India so over there now if you click on any of these news we will be able to open that in the natively in the web view the website and there is another way of doing it as well like let me show you first of all what like how and where we are getting that but let me just first of all it gets clear about what we are going to build so yeah this is the app it's pretty simple just basically we are showing all the news from the top new sources and they will be visible in a list view that is going to be the data will be available through News API dot and yeah that's what we are doing and if we talk about the categories there is an option and we can basically get all the news on a particular category be it health be it business and all and you can see this is health and so do the science in sport so yeah that's what the app we are going to build so now let me show you from where we are going to get the data and how can we get started to build this so the first thing is this is the website News API dot or so as I am already logged in let me just show you from this starting so that you have no problem in so you just have to go and type News API dot org and this website visit will be open and this is what you will be seeing right you get API key so I will click on that and then it will ask you to register so I will just enter by name body and then I will enter the email which is going to be okay then I will enter my password and then I am going to say I am individual and I'm not robot I agree and I promise to add an attribution link so that's something which I will do as well in this app we are going to have a powered by use API we'll do after the video it's not something which you need to learn but yeah so once I will click on that we will get an API key so I will highly recommend just go and create your own if you try to use this it will not work because I will just read regenerated through this just click on the regenerate API key and it will just a generate the key so without any further ado because there is a limited usage and which is provided for free right then we can go for the pricing sense stuff so this is how the data is available and whenever I am fetching this all this data and I'm showing it as a ListView this is what we are getting initially we are getting this and from this data we are doing that so as you can see we have a description we have title so we have title we have description and we are also getting the URL and this is the exact URL which I am opening in a web view and inside another screen and we also have different things like author we have source so we can show these all things we are I will be fetching major of these I'm not just showing all of them just to make sure that every app is not you know too much to create in like hour or two hour video we don't want to like extend it more than that so yeah without any further ado let's get started so the first thing I have created a new floater project and I hope the text size is the font size is good enough to be visible and I'm just going to get rid of that and now I will go inside the lip folder and I will create a new package now if you're using Visual Studio code that's perfectly fine it will work just the same there is no difference in that so just want to be clear about that so in like in leaf folder we are going to create a new folder and that's going to be views inside views I am going to create an dark is going to be home and then another dart file which is going to be so we need one home we need one this article view and one of them will be this category news so home is there now we need article view then we will create another view and that's going to be category name static create news finish okay so we have all of these done now what we will do I'm just going back and I'm going to now we need to get that so that means okay and we will do import material dot dot then we will create a state full widget why I'm creating a stateful widget because I will be using the init function to get all these categories which will be saved in another file so let you first name this home and I'm going to come over here and say home and get rid of this then I will make the primary color as white why because as you can see there is no this is the primary color of color of the is white right at the top okay so this is the name which you will see so that's not a problem now we also want to get rid of that you know as like a red strip type which fit we have we are just going to set it to false yeah so that is done now let's lets me just do one thing rather than just opening up the app let me just take a screenshot of this page and maybe screenshot of this page not must but yeah and let me just close this and open it up open this one which we are building right now and let me know pin' the screenshot so these will be at the side and we can have a look what we want to build and at the another side we can see what we are building so just a second okay we can just a little bit yeah okay so now these things are done now we have created a home and we have an AR let me just just do a very simple structure like material and just creating the widget so let let's go for stateful in this one as well article view and in the category news as well we are going to say import material okay and then I'm going to create a stateful widget which is going to be category nose okay so right now you can see it's a blog because we are returning a container if I make it a scaffold it will be white and now inside of that we need an app bar so as I can see this app bar consists of two text one is flutter M news so I'm just going to go inside the app bar I will say app bar and it have this title property and it will we are going to say row and we say children text and I'm going to say flutter and I'm going to say text another explicitly and it's going to be in use now as we can see the color of the news is blue so we are going to use a style and I'm going to say color and color start flow so far it's works perfectly if I save it you can see we have this but one thing which you can notice is we don't have an elevation in this right so how we can get rid of that we can just come out of the app bar right and then we can say elevation not out of the app bar actually we died there so elevation will be zero point zero so now you can see the elevation is on we also want to make sure this to be in the center right so the thing is if you provide any kind of title over here directly by using the text then you may have notice that it the center profit property is all pretty true which is this Center time right this is already true and by doing that true it's not going to be in the center so the thing which is happening is row is taking all these face and a has row works like in a horizontal arrangement of widgets so it's taking all this space what we can do we can use the property which is main axis alignment I can say main X is alignment or center and it will put this the center now as far as the size I think the font size is good enough we don't have to work on that long so now let's move to the body section of our scaffold so in the body we can see we have these particular things we have a whole category section and then we have the list of emails right so right now let's first build the UI then we will get the data fetch the data and showing it right so let me have a container over here okay so now I'm going to build a stateless widget which is going to be a pile of this particular not tile but kind of you can say one view of a list we will move like that which is going to be replicated however you want to call it I'm going to call it card or basically category time and inside that we are going to have a container so this is what we on we want to build right so as you can see this it has an image and because we are going to have a text above it which is going to be of white color there should be make making sure that we don't have like kind of overlap for example we have one image which is right right so we don't want this text to be not very easy to see in the white background so what I have done I have added a black color right container about that so we can do that by overflow and different stuff but I am going to do it by stack so we just have to go and child we can use stack what stack is this tag is like a stand which you can put multiple things one about the unlit right if you have been Android developer you can understand this fire relatively so that's how things works so now we talked about the status tag we have the first thing to be imaged okay and the image which we are using it's actually through the network okay these images are not saved on the asset at least that's how I have done if you want you can save them but what I have done is basically fetching them through the network so to get the URL we can directly like hard-coded but we'd want these to be different right so what we I will do I will just create a string which is going to be a final because this is an immutable so I will create image URL and then we are going to say category retile and we did this dot image URL and I'm going to have one another property which is going to be category name category name okay so once that is done we are going to okay I have done a spelling mistake okay now it's fine so now what we will be doing we will be using that over here I will just I can just say image we're in it we have it okay so we have the image now what's more now we have a particular structure over here guys you can see we have a bit and that's actually 120 so I can save it 120 and the height is I equals just a second 120 and the height was 60 okay okay so we have an image we are fetching that network this is the image URL which we have provided this is the width of the image which you want and this is the height of it all is fine but we haven't have given the data which will be fetching and showing in here right so let's go into the project and go inside the lip folder and create a new package or folder and I'm going to call it helper and inside that helper I am going to create a new dart file that's going to be called that data inside this data we are going to create a new list and that list is going to be returning a list of category model so of course we need model state so I'm going to go inside the library for a live folder again and I'm going to create models package or folder inside of it and I'm going to create a new dart file which is going to be called let's call it category model okay and that's just a category model is basically going to be class times it's going to the category model okay it's this category model and then we will have two things in this we will have category name and then we will have a string straining image URL so these are the two things which we need now I'm just going to close that and make it a little bit close just a little bit and I can say category got a great model and I can say this is going to be called name of the function will be get categories and inside of it I can just let me import this model so I can go and import this and I'm going to say list and it's going to be the category model three model and I'll basically I'm creating a new list and it's going to be called categories three is equals to new list and let me make it category model okay so we have a category list now this is something's you we will be returning at the end now I will create a new model as well which is going to be category model category model 2 is equals to mean category model and I'm going to add all this so the first category of ours will be category model talk at cleaning as you can see it they are here which is business-to-business and category model dot image URL is equals to now we need the image URL raised so I will be doing this I will be going to unsplash.com and I will search for business and that's the first image which I used I just click on it click right click open image a new tab and you'll get the image so let me paste that and we have it okay so let me do one thing I'm going to go to view and make activate editor as wrap so now you can see it's like wrapped up okay so we have both of these in the category model now what we want we want to add this category model to our list of category models so I'm going to say getting any model and that's done just after that storm we okay we can say category model is equals to new for a degree model just to make sure we don't have any kind of you know class details and just restate only so I can just replicate but I want different details right it's going to be entertainment general so rather than going and typing it out in front of your world 20 minutes or something I'm just going to go I have actually uploaded the code on the github cam in the incognito mode can I open up the new window yeah it's fine so I will just go on github just a second by the way guys I have a lot of open-source project if you haven't check out my github make sure to give it a look I am more than confident then there will be something which will be beneficial for yourself so this is the one and you just go inside the library folder we have not models but actually we want to go inside the helper and data I'm just going going to copy the image URL of these different we have it down okay from the second we can just copy it till v not v XD whatever so now I'm going to come back over here and I'm going to paste that and I'm going to say that it done category okay so we have some naming convention naming issues so I'm going to fix that I'm going to select it and we want to change this category model by this so I'm going to replace them all and then I'm going to replace this one so we have the category model just one so I'm going to replace that but okay wait a second these both are same then what's the problem if I get rid of this what will happen if I get rid of that because these these are different as well so I can just replace this by this and I can just paste this and replace all and I'll replace this as well I will copy this and is this and replace all so that is done now the next thing is basically I will replace this one with this and it's alder okay by the way guy is the code of course is the on the github so you can just check out the link will be in the description so that you can go through if you face any problem if you have anything patterns and something you can just make sure that the code is same and should work perfectly fine so as the data is perfectly done guys what we have done in the data can just give you an overview of just ok so this is what we have done we have basically created a function which is going to return a list of category models we have added a different category models which is basically two things which every category model have category name and can take an image URL which we will be fetching so I can now close the data dot dot file now I can come back to my home page and now we want to get this data right so what we will do we will go inside the unit state now if you understand the life cycle of the application what you can understand is this init state will be called whenever the our application or this screen will be initially or like open so what will happen is whenever the screen gets open this is the function which will be called so what I am going to do I am just going to create a list first of all which is going to be a category model okay and then I'm going to call it let's say categories is equals to new list and I am going to give it category model perfect now what I can do in the override I can just go well there I can say categories is equals to get categories categories so this is the function which we have created in the data dot dot file and we can easily access that and what this is going to do this is going to get all these categories from that function which we define and going to save this to this category variable now moving on in the container or this body what we want to shoot shown if you want to show this list but we know that there is another thing as well in this frame so it's not comfortable to have just a single child now one thing is well if we want to arrange two different widget which is basically a ListView horizontal ListView and vertical ListView in a vertical manner then what we will use we will use column so let me say column and then we will have children's and inside of children so I am going to have my first children as or basically the columns in a table so the first ildren will child will be list view dot builder and inside of that you may already understand ListView takes the first thing which is important for property is going to be our account which is going to be categories dot length and then if we go inside the item builder we can go inside the context and then we can say index and then we can basically do this I'm going to say written now what are we going to return this we have to return our budget guides right so this is the widget which we created for this so I'm going to say category tile and now if you would like have any confusion why I use these curly braces this is for the name two parameters so what I can do now is I can say image URL and you can see we have said one first what it is and then we are like giving the head the value which is going to be categories index excuse me index dot image URL right okay so then we can say this is image URL now the second thing is going to be category name so we can similarly go categories index dot category name so yeah what we have done we have fetch the data from the data and now we are being it should be visible but the list is actually vertical right now so let's let's see if I ad start this app what we can see okay ah do we have any errors yes we do so first go to dart analysis assume no error but it okay so make sure to whenever using inside a condom make sure you are using shrink wrap provider that's the thing which we are missing okay now you can see we have all these images lined up perfectly now what we want we want these actually to be horizontally these are / vertically so what can we do we can just go over here what do we want to change we want to change the scroll direction so I will say scroll direction how do we want that we want the excess to be horizontal so we will say exist not horizontal and if I say this okay this is added then you can just go hide and give some little bit extra just if the size of that is okay so we can see we have it now one thing which you may be noticing is the size or basically the width of each one doesn't look exactly same it it is for some but it's not for all Y but because we have given the a bit equally to all so what is the problem the problem is the dimension of them so we won't have to stretch it or kind of try to cover it the whole space which we have provided so for that we use some property which is for fit property inside of it we can say box fit the dot cover and also I will save it you can see they have taken all these face which we have provided but this doesn't look something like this because this have these like border radiuses well right so we have to provide that but before that let me create a container which is going to have this text so I can say child is going to be text and that text is going to be the category name okay so let me just give it a style text style and that's going to be color colors dot white if I will say this you can see we have that now that's the exact thing which I was talking about right now if you will will try to see this entertainment it's not visible like right it's it's like torturing so I'm going to see that so we want to make sure there is some kind of like black shade so how I'm going to do that I'm going to use decoration why I am using decoration then we can directly provide the color over here because the dhikr with the color of leg black you also want to make sure we are providing the border otherwise it will be something like you know let's see let's see let me let me just directly give it so the first thing which you want to do you want to make it about a radius of give border radius to the image so we can do that by wrapping it in a widget which is going to be clip our direct and inside of that widget I'm going to say border radius and border radius not circular and let's go for six now if I miss a bit you can see we have a bot radius around each of them let me do one thing as well let me provide a margin which is going to be edge inserts dot only it's going to be right-hand side which is going to be around 60 save I will save that you can see we have a bit of margin as well but still the text is kind of not looking very good so what can we do about that so we are going to go over here we are now going to add a color as I said color color start black 26 if I will see this now first thing in first you can notice like it's just surrounding the text of course that's the whole thing which will happen so we will provide it okay ctrl C and then you will paste that so now it's covering up the whole but now if you can see this these corners like the black is there but the you know black should be having about radius as well so I will just copy that and I can come over here decoration we will provide a box decoration inside of that I would say this now if you have a color outside of box decoration and you have a text decoration as well then it will be an added so let me show you how safe I'll say that will be an error so just cut the color paste it here and save now it's perfectly fine now you can see the bottle radius is visible okay so what's the next step next step is going to be providing this a bit of padding which is going to be edge inserts not symmetric and horizontally I want to provide a padding of 16 okay so that's done now the next step is to have this text in the center so how are we going to do that so in the container we have a property which is alignment property which is used to align these the child of the container so I'm going to choose the alignment property to be central which will help me align the text in the center the next step is going to be the font size which I have given in the app so I'm just going to give it a font size and font weight font weight was around 500 so this is all our category section 10 days after some time you will also be adding some gesturedetector so let me add that I will wrap it with a container or wrap it with it widget which is going to be gesturedetector we are going to use a property which is on that property so gesturedetector helps us to like have on tap property between is when we can when we click on that widget we will be able to perform a function okay so now we have this category tail done so it's not very close right now we have to work on this now right so first thing first let me create this style so I'm going to go at the bottom I will create a new stateless widget and that's going to be called let's say blog style okay so in the block plan what we have we have an image we have a title we have a description so let me start by having the variables so the final is going to be strings range okay string and that's going to be image URL the first thing first and then we want a title then we want a description description okay so these things are done as it is final we have to use a block title and named parameters dot image you are under stock title dot this dot description of course these are required parameters so I'm doing this for this one as well like I'll show you how this works we required parameters because this is must change right if I have a block ten and it doesn't have an image that doesn't kind of make sense so this is what we will do we will have a container just to make sure we can provide it margin and padding that's why I usually use even if I am using container or excuse me a column or row so for this we will need a column by am using a column because we have things or widgets which we want to arrange in a vertical manner so in the inside of column we will say children's inside children's we are going to save image dot network image as we have used earlier we are going to use an image to network of course this time here it's not going to be something like hard-coded or something we are going to fetch it from the news API dot all so yeah it's it's quite close guys just bear with me once this will be done we will be moving on to fetching the data so let me say it title not like that okay next and description okay so overall our wires are kind of a wireframe has done basically if we are able to fetch the data it will be kind of visible not fully but yeah so yeah this is what we have right now so now let's move on to fetching this data which we have over here which we will be showing as a block type so let's move on to the news API let me just close this okay so this is the website guys so you just have to go over here and have a Bakey I we already got it right so now the next step is going to be using this link so this is what will happen if we go for this so let let us first go to http you can directly type it but it's just how I have done it right now so he is copy that HTTP go to project go to pub spec Dori ml and a bit and just go inside this and this speed tasted other than HTTP yeah that that would be fine for now we will be moving on with different things but yeah one thing also like shade cache in network and I can actually directly type it but I'm not sure why I don't do that so if I search for that tuple to be shown this there's something which we will be using to cache the cache ad network images which we are getting any categories because these are not something which are going to be changed so catching them will be a good idea so the filter get is running and hopefully okay it's done okay so as it is done now what's the next step next step is to fetch this data so for that I move to go inside the helper class and inside of that I am going to create a new dart file which is going to be used and inside of that use is basically we are going to create mr. yeah okay when you create a new class which is going to be called in use and inside of that class we are going to create a list and this list is going to be a list of articles let's say we can call it article blocks whatever you call but it's going to be a list of article model so I'm going to go inside the model and I'm going to create a new model which is going to be called article model inside of this we are going to have some things class article model so what I'm actually trying to do what I am trying to do is all these different values we have over here we can basically create a model for it so that we can easily fetch and you know show the data so what are what are we having over here we have a string we have the author name which we are not going to use so let's skip that let me just have it so if you want you can show it as so we have author we have title we have description so you can see there are two things guys the first is the description and there is a content right so content will be the whole content in the description is something which you can show as a short description title okay so we have description now we need the URL essence I will say straining URL then I will say URL to image to image then we will have strength okay that's done now let's move on to the news one I don't support no it's gonna be the first thing which we have to do let's give it a name for example blogs we are calling it new so let's call it et who's and then let me just make sure it's not null and now we can import the article model after we have successfully imported it now it's the time to like save the URL we will be using to fetch the data so this is going to be the URL and it will be different for you this and actually this is what is going to be different for you so now I will just over here cooperate actually we don't want to like get everything what we want is we want the headlines for the like for the main page then we will be working on how we can get the according to categories but the first thing is getting for the headlines so for headlines you can looks just to the side of it yeah top headlines so I'm just going to copy this paste it here what happened done wrong okay so we have it let me do active editors but there should be a property like we can do it for all I'm not sure yeah so this is what we have done now we have the URL by which we are using by by which we are going to fetch the data so now it's time to use the HTTP so let's import that first so I'm going to go at the top I'm going to go here I'm going to say import HTTP dot dot and as HTTP okay so it's fine now we are going to create a variable which is going to be response so what is this this is going to save the response which we get right so I will say update and HTTP now to use a wait we want to make sure it's and I sing a sing function no sorry this is not we are going to do that inside of a function so let's let's just cut this on a string and create a new function which is going to be future and it's going to be void because we are not going to return anything we are going to name it yet the news and now we can make it asynchronous and we can base this here okay so we are going to await and htpb dot we get to the quest and this is going to be the URL leave this one okay now we are going to get that chase and so I'm going to save variable which is an data it's going to be close to jason decode response dot body so we are going to decode whatever the response which we got and we will save if jason data status which is this okay you can see this in data status equals to equals to okay then we are going to move further and we are going to say Jason data this is basically the data which we've got right that it JSON response and we can say articles dot for element and this is quite a bit for articles is fine okay so we must say okay so what we are going now this is the what is this next line this next line is basically going inside this article and as you can see these this article is actually kind of a list or a list what we can call it of a models right which we created so we are going to go for each basically one by one and we are going to get all the return to our service so how we are going to do that we are going to say is element URL - mhm so while I was building this for our app what I realized is some sometimes what happens is URL to image is not there now if the URL to image is not there what actually is the problem is we will have no image and without image it doesn't look good so what I did is basically come up that you know what we will add a basic condition that if the URL to image is not equals to null and element description this scription is also not a coastal we don't want that description is not there right you can do this for title but I haven't noticed any article yet without title rights and that's why so now we have make sure that all the articles which we are getting have image and as well as they have description as well okay so the next step then we are going to use article model article model is equals to article model and inside of it we are going to say title because I think therefore code that you choose in Concord let me create a constructor for this and it's going to be this dot what let's just call everyone author this dot title this dot URL they start prescription this they'll start oops this okay they store content in this dot you are doing much okay so we have to find the constructor now we can go inside the article we use here and now we can say that the title is going to be element and then title so what I mean am i doing know if you can see over here in this one that this is title where is it here it is right so inside of articles we have selected or element this is what we are doing for when we I did for each is it's basically going on each element one by one right so we have this element this is the whole element which I have selected over here inside that element what I am saying that we want this property and sorry do we want this property and we want to save that property to title I hope that's clear now moving on it means to have this over here okay so now we want to do that for similarly for others which is going to be item order then soon author and we have just yeah so we have author and then we have a description description element and okay and then we have you are it so I can say URL and that's gonna be the element and you are L and if I will move on there is you are a little image going to say element and we will say URL to image okay the next step we have the published app so I haven't actually done that let me just have that publish steps if you want you can use it I'm not going to use that's why I was like okay now we can move inside that again and we can get that as well publish that element and that's going to be published and make sure to spell everything correct whether it is camelcase or things were it's important and for the content we can say element well I am NOT going to use the comment if you want you can play with it the reason why I did not like what the content rather than I was showing you in a web do was basically because if you are using the free plan then it shows something like this all the text X statistic then plus 608 character so that doesn't looks like an actual AB that is like dummy or something so you want to make sure that we are using the APA and we are creating something which is it's something you can add in your portfolio or like is working out right so that's why I just open up the URL in web so it's like in the app itself so it's a good experience as well he's not going out of the app again and again for just opening one news so yeah that's what we did so now if the article model is created now the next step is going to be adding this model to where are you this news so where are we this is it I'm going to say in news dot add dot add article the model it's pretty similar what we did in data but in there we will just hard coding it and there this one we are getting it from the API so if this if you have any doubt regarding this make sure to comment down below I will more like to help it's not a problem feel free to comment it I will be more than happy to help you so if we go into the list and now what we want we have was the particle model tiny particle model and we can say articles is equal to new list and it's going to be article model you can see same thing and we will come over here we can say articles okay now this is a process which will take time right so we are not going to define it directly like we did forget categories because the get categories art was something which was happening happening automatically right so it was easy you can just call the categories equals to get categories and it was done but if we talk about next like in this one article in this one we are not going to do it that easy so what we are going to do we are going to create let me do it this with it let's just create a new function for this inside that we have we can say it like get news something okay so we will say get news and inside of that we are going to use that news class which we click so I'm going to call it am going to Sigma creator variable out of it I'm going to say in costumes so why I am not using new because according to dot 2 and stuff you know right you don't happen now we can say this that and then we will say oh wait you have to go from a sink in this oh wait now I am using this because you cannot directly use a sink over here it's not good so yeah now we are getting used function and a sink and news equals to news now what we want we want to wait until the news dot dot get use ok so we will be waiting till 3:00 Cantonese and once we do we are going to say news or basically articles dot is equals to news dot okay so you can call it like this if you are getting confused this is the news class and this is the inside of it property right so the next thing which we are going to do is we are going to set these state to be okay so we have set at that but we don't have this variable for now so I'm just going to create this loading is equals to true actually this is going to be false because initially it's going to be true so it will be loading and once that we will get the data it will be loading equals to false now how am I going to use this boolean value is basically I will go inside this container I will use this conditional way and I will just have a question like good and a question mark and then if it's true then I would like to show a little bit my child which is going to be circular progress indicator and I will make sure that this container is and if it is like if it's false then it will be showing the content now I want to make sure that this is in the center so for that what we can do we can wrap it inside our center widget now if I will save it okay so now not the right time to save of course so okay so now we have this circular indicator we are getting the data so now it's time to show the data right so let me just give it a bit of comment so this was categories and the next step we want to have is blocks so let me just do that and I'm going to say ListView into the container I'm going to say trying and China and inside of that I'm going to say list view dot builder and then I'm going to say item count and it's going to be now we are going to get the item this is this article's particle start length and why are we getting that error because we miss this so we have provided the item count now we want the context and then we want the index any problem I think so you will be returning the block and what do we want in the block dial so in the block that we want image URL title in description service image URL and that's going to be articles articles index and dot M which URL so what is the name of the image you like okay you can see image or you are two images null for this right that's what I was talking about if the URL to image is null then we will not be showing those articles on our feet so we go for title we can say articles and index dot we can say this for description articles index dot description we agree I think so and it the semicolon and we are having one error let me fix that okay what is the error you forget to add a semicolon the most important error to make otherwise you're not a programmer system okay so let me just wait for a second till it loads I think it's not going to because I have just saved it so let's reload a heart reload because we want you to make sure that the init function okay you're not even calling this how am I supposed to get the data and now it's fine if I save it and hot reload it should load up the data okay and handle exception string is not a subtype of date/time okay so we are going to parse and different things so let me let me just get rid of it original just know I'm not going to get that you can actually parse that I'll show you after some time but like at the end if we have enough time I will show you that it's not a big deal but it's just not complicated for that and I cannot reorder it again okay so now we are facing this error which is what you have because if I go back to home I can see I have a condemning I have provided a list and I forgot that one thing which one string crap and I need to save that again oh my god what is this so too much text too much too much too much text but I think this is the title this is do this description and all these things are there so yeah first thing first as I said and fetchingly date so this is how we can change the country and how you can change the country to your preferences you can just go over to the documentation section click on documentation and I think it's mentioned over at the top headlines yeah over here you can see all these different countries I've mentioned so for me I am going to take India so I'm going to use I n okay so now I'm going to close this and one thing which you can also notice is that the all this there is a like bottom overflow it's the most problem which you will face in Feder so this is not a big issue you just have to go inside this container and wrap it with a widget which is called single child scroll view so if you save that it's perfectly fine okay so what's the next step next step is we need the padding in this one as well so I'm just going to copy that padding and okay this copy no I just provided the padding to both of them now okay so what's the next step now we are fetching the database now we want to show it how we want to write not hop it is visible right now this is the UI kind of which we want to create so let me do what we need to so the first thing is basically we can notice there is a kind of top adding which we have provided so I'm just going to go inside it I am going to say padding I'm going to say edge inserts and I'm going to say only and top are going to provide around 16 as a padding just to give it a little bit of that okay as I said before we have like imported this cached image Network so what that does is basically all these images you can see like are loading again and again and that's not the best use of the Internet of your user so what I'm going to do I'm going to just copy this network users I have already imported it installing like adding this dependency to the pub spec body ml and after copying that I can just go to the category style and it really is the image dot network with this and then when we are providing this and okay first let's import that and then we are going to say it like this and that's all what we have to do it's it's done if I will reload it it will be getting the Indian image oh sorry Indian content Indian top headlines and stuff okay so now we have it now what we want to do is now I want to it's taking a bit of a time any issues or a missing plug-in exception get okay so whenever you do use cache it I do face discount from I don't know why that happens but basically try to like read and Yap okay so what will be the next step next step is going to be providing the border radius to the image a bit of spacing or at the bottom a styling to the title under styling to the description okay so let's go so this is below then I'm going to go over here and we say style text style and I'm not actually 100% sure how much the font size I provided so let's let's go with something like I think 70 even will be fine and we can provide this one style as well and that's going to be text style dot colors colors start to play I just wanted to make sure this is bit lighter than this one we can the colors dot black is seven so if I will see this now and have a look at it okay is it good okay now you can see like but it's quite ready like too much we don't want that to be dark low what about 26 I'm not sure how much darker 26 is but you know that much is really what about 54 yeah that looks fine so now if I can go in the container I can just give it a margin of edge inserts not only and I'm going to provide it a margin from button on the bottom of around 16 so we just have some space over there I'm also going to give it some sized box over here because height of let's say 8 just to have some spacing I don't think height of 8 is ready yeah I think if it was fine okay so now we have given that now we want to make this image radius are plotting model so how we did it before we are going to wrap it with a container which is going to keep our the air correct whatever so now we will say bottom radius border radius start circular and same what radius as we have provided to the categories tiles okay so I think it's pretty close I think I have provided some kind of form the base to this as well so let's go try that out about 500 or maybe 600 will be good indefinitely I haven't provided six but I think I have provided a curved exercise maybe maybe I am not sure maybe 17 I think that is pretty dark compared to this or is it just me who is thinking art and nostril okay so I think that exercises of course more and I have also like I think it's look okay now you can see this scroll is having problems so how we can fix that we can just go to the list view and we use a physics property which is going to be clamping clamping scroll focus you say that it will be smooth okay so things are working good fine and let me just have a look if you have any problems okay so it's fine guys now the next step is going to be creating these category news screen which will be open once we click on these but before that let's build the article view which is going to be something which week when we click on this model we will be able to see the whole news in a web view so let's do the art so for that what we have to do let's mean not let's move it but we will go over here we will save that view and when you flutter I think that's t1 silicate or death just copy this fall to go to project verb spectro T amel and paste that package is start get close that minimize that and now we are going to go inside the article view okay so inside the article view we want to show this particle in of that view which is basically we will be sending the URL from this is thing into that a sphere and we are going to load it load that URL on a bathroom so this is how we are going going to do that we are going to go inside the container we are going to say child we are going to save that view and the web you have initial URL property so we need the URL so how we are going to get that we are going to get that from the home page so I am going to create a string final and that string is going to be called image URL and we need a constructor so and it's a article view name the parameter so M they start for L okay anyways so let me go to the home and inside of home we are going to okay so what do you want we want whenever someone clicks on any of the blog whether it is an image text or description he will be able to redirect it to the next screen where he will be able to see all the full block in our view so I'm just going to give it I'm going to wrap the container with a gesture now if you have particular preference for example if you want to add a button you want to you can just surround that with gesturedetector and use the on that property if you want to have this only for the image you can do that like by surrounding the image or basically this clip are yet with our wrecked up with just addictive so now what we will do you will say navigator dot push so if you don't understand about this push on the 0 different properties like push push is replacement so what push does is basically it would be putting one more kind of with your Android developer you understand it by activity so what it's going to do it's going to put another activity above this activity like or in normal words you can understand it's going to put push another screen above of this is cool so basically there will be a back option right so now I'm going to say material page route and inside that material page too we will have a relative property now inside that build a property you are going to provide the context of the screen which we are in and we will say our electron which screen would want to go so I will say article view now inside of article view we won't also want to provide the URL so we are not getting that right now right so I'm going to say you are in and I'm going to save required parameter okay required and this is going to be this dot URL now let me get this from over here you can see when I did that required now it shows that URL is required right if you will not use that required it will not show that so articles we will have it next so let me go back to this and see where are we getting the URL to that blocks we are directly getting that URL so I can just say got URL okay so we have that URL inside of a block tile now we want to send that to the next screen so we can say I think I have said it image URL which is not correct actually but let me fix that so to fix that you just have to go to the article view and I'm just going to click on that or you click a reflector rename and I'm going to call it blog URL I'm going to save that okay so now we have a blog URL we can put that inside the long URL which is going to be the initial you kiririn-shi widget drug problem okay now we have that but now we also there is one other property of that film which you can have a look over here which we want and that is going to be where are you it's not mentioned over here but we want one more which is going to be the controller of it right so now we will be creating a controller which will you can do a lot of other stuff with that but our primary goal with that will be to just a second yeah our primary goal will be to just have it so I'm just going to go inside the article view and now let's created okay so the first thing which we will be doing in this now is going of the override method and we are going to say final and it's going to be complete complete and sorry and it's going to be web view and I need spelling it's going to be capital Matthew controller okay and that's going to be controller own to be come it's no control it's complete that comes later okay so come clean turf and then we do the same from web view controller and it's going to be done okay fine now what we want we want to go inside this here and inside of that web view we will have another property which is on that creating we will say that view controller over there go to view instead of stateful that's why we are not able to access it here so Bridget dotnet okay now we just have to define it so web view controller okay we want to do it like this I think okay inside of this what we are going to say we are going is a completer dot complete web view controller controller controller okay now we have that one thing which is missing from this is basically the a bar right so rather than just creating it again again I am just going to come over here copy the app bar by the thing you can just I have tried that typical view map bar okay actually we need a scaffold first and then you need a button time you'll pick that I can just get rid of this and it's not going to be large it's going to be here yeah so it looks fine but there is one problem base which is this you see that and now you can see we have all these images I click any one of these this is not what I like it just kind of deviates from the center so for that what we can do not the best practice I think but this is what I am thinking about like just having an icon okay and I can start any random I can stir it doesn't matter and we have this going to wrap it with a widget which is going to be a container that can be we can help us to give it padding and that's going to be a since it's not symmetric around horizontal ground 16 okay we have provided the padding and I will wrap the container with a widget which is going to be opacity and that's going to be opacity of zero so if I will see that now you can see we have that we don't even need the item and just using that so that it's like the size is same you want to make sure that it's working for both okay so now the thing is it's not loading this which it sure or is it taking time let me see so we are getting the blog URL we are loading that up over here so what can be the problem maybe the height and stuff is issues so let's do one thing we can provide it a height we can still media query or of context lot size got right with media query out of context dot dot size dot right if I go back and I click on another article let's see if it gets loaded ok opacity is fine total means so the main thing is not loading up for some reason we are using webview we have imported that successfully we are using material other than that what can we do we need okay so let's let's do one thing let me just close this up and restart the app again okay so it is finally launched now what we can do is if I will click on any of the blog for example if I click on this first one we are getting this trying to embed a platform view but the parent okay got it got it got it we need to have this key guys for iOS it it will not be a big problem for Android but for iOS this is a must so what you have to do is go to the iOS and then runner and then info dot P list inside of that make sure you are doing this after a string or an herring and then you can just create a key you just end the key and then you have to paste this and the value to be here so the value will be basically string string have a slash that's good and if you restart the app again it should work perfectly fine let's see if it does if it doesn't like we just need to reload that then it could no better roll context is not support embedding paint context does not support embedding so it's saying that it doesn't support anybody I think that's the issue of that let me just fix this I think like the in fullest let me just confirm that it's perfectly fine you just have to go inside bad IO dot floated or embed to be previews key and then years okay so let's run it again okay so it's finally launched now if we try it again for example let's try and other news okay something interesting nothing interesting okay so if I click on a news okay now you can see it's working perfectly fine it's opening up the web view and the URL according to the block okay so this is done now the next step is going to be creating this category section and let me go inside that so base by the way like if you are like feeling great and if you are liking what I have here make sure to hit that subscribe button make sure to hit that notification event to never miss out on all the other content which I will be posting soon so and also let me know in the comments what are your views about this and let me just move on to the next one which is if you go inside the views now we have to work on this category news so what do you want in the category well we basically want whenever we click on business it should show me all the news regarding business so first thing first we need to have some kind of way to fetch only business kind of category details so I'm just going to create another class which is going to be the same so I'm just going to call it category news category news it's going to be same now we will be using a different you are and this time because of course like we want to have that so what we will do we will move inside the if we close this we can go inside the everything that's what we are going to do no actually we are going to pull side we drop headlines and we have this category options over here and it's going to copy that and after this rather than this I'm just going to second category is equals two and we need to get that category through the get-go so I'm just going to say string category okay and then I can use that category over here and that's going to be equals to and that's going to be ten okay so that's this should work okay so what we will be doing now in the people to the categories first thing first we need a scaffold then second thing second we need the a part so forever I'm just going to copy that from the article you it's going because it I it's going to be the same problem like you are going to push so copy that paste it here if you talk about the mean and the articles it's going to be similar to this blocks so I'm going to just copy this from this and I'm going to go inside the category news and there is the fr ending it's ending over here so after that I can say body I can say container I can say child I can say column I can say children I can stay down it's done so now we need articles and we need to import that so how we are going to do that I know it's a list I'm going to say particle model then I can say what are you so it's going to say I am articles also gain new articles okay so this is list article model articles news new list you can even provide deeper on that article model and we are going to fetch the that in the unit state like we did in home it's going to be very similar place just if I think I can just even copy this function and I can call it get category news practically category news and import this we don't have a loading in this so I'm just going to create one loading is equals to true and what do we want more we want to get a degree newest okay so what's the problem if I go category noise okay so it's going to change that I have a trait changed at all so we are going to say it like this category news category news and kept news that's what it it's fun yeah we get I think I have a period that as well where are you by the way guys if you feel any time that I'm being a bit hurry I am because I just I don't want to be it to get so long that people don't even start watching it's like so nice girls don't get those but the main motive is to like make sure you learn it if you're not able to make sure to let me know that the speed is fast or something like that just I will make sure to make that better next time so links class store to get me it's saying that getting's isn't defined in category news so we get inside the cat clean news you can see there is a function get changed but this is saying we can not use so [Music] what is category newsletter okay this is the baddest thing you can do so this is like category news class I can call it now if I miss the stairs and see that and yeah get me news and now it will ask for the category but we haven't got the category in this fight which we will be getting from the home screen so I'll just create a new variable string I'm going to call it captain growing category news say this dot category and over here we can just basically pass this which are dot category perfect now I can say that you get category news we are saving all these two articles and it should work perfectly fine but block tile is not defined we can actually save this block down in another widget and we can access it for both of these but for the sake of time let's just not do that but it's it's a good thing good practice if you just reuse widgets right and then go back and I use that loading property even if I think you will be using that single child a scroll view because this is going to be long as well try it singles child story okay we have an error over here explain the article view is not important so what we want we want that whenever we click on block tile we want okay so basically asking to import that why is so complicated important okay so now what we have a category news and in the same category news we have defined the app bar we have this and we are getting the category or are you not so for getting the category we will go inside this category time basically this one and we will surrounded with gesturedetector which we already have done now we will use the navigator dot post property and the context will be there and we will same daily page to inside the material page will say builder and then you will say context and then we are going to say where do we want to go we want to code category Lowe's if you say ok you provide the category so we will say you think so pedigree name but it's capitals so Dorothy devotees - strained or to the whole things it was working perfectly for me it's final bit okay now you can get rid of this door to do the string and semicolon and now if I save this rather let's a hot restart and let's see so we have all the categories different available okay we have all these image which are loading up blocks or news which is loading up and which is the top headlines in India if I click on business it loads and it just vanishes I think this is the URL is not perfectly me check that out so we have category we have country India we have okay we have provided the category two times and in the front okay since the second in the main we are even providing the category that's not a good idea I think you should just get rid of this category I think that's why yeah so then we should just get rid of this category and I should hot restart it now you will notice some other names and home page as well right okay now if I will click on this it's working perfectly fine if I will click on business it should perfectly fine let's see better okay so it it's not working perfectly fine so there is some issue in the URL which we created so category is named category see each category is fine I have given in that and I have given that to be top headline right headlines yep so let me have a look so we have this we have if we say published and if we say that category is that version to top at lines country India okay so already operate okay so what we have to do we basically have to cut this category and we firstly will say that country is India basically telling that the top line headlines in India and then we can provide the category which is going to be but after using the and then we can say categories equals to this so now if I will hot reload which is going to reload above the whole app we must be able to see something like that so if I will click on news okay so this is news it should work perfectly fine natively in the app it can close this so I can move in the business and it should show me the business news okay is there any key issue I think the key is if so the way we will be doing that is making sure that this is correct because as you can see over here in the category section we have these different categories available so in the top headlines if you go in the documentation then top headlines over here in the categories these are the different categories which are available possible options now the problem which we are doing is like we have mrs. perrault app so I will just go back to project and then data and then over there just inside the cat agree I will just update this spelling of busyness to business now if I will save that and we had hot like hot reload and let's open up some other one for example let's open Health News and see if the news is regarding health I think so so this is all what people are talking about right now in health but sorry let's open up something like entertainment and okay so yeah it's working perfectly fine so the next step is basically giving it a padding which we have in the home so inside the home if we can go we have this at the top where are you this is the padding which we have provided so I am just going to copy that and inside the category new news we are going to provide the same padding so just over here if I will save that you can see it's looking perfect now right and yeah wrap is done successfully and hope you learned something today I am really trying to add as much value as possible so if you did get some value make sure to let me know in the comments give this video like that helps me know what content is helping and what is not and yeah if you think somebody can help from this make sure to share it with your friends and for upcoming videos make sure to subscribe and hit the notification bell so that you can get a notification whenever I put out new videos

Channel: Sanskar Tiwari

Views: 99,714

Keywords: flutter news app, flutter app, news app flutter, sanskar tiwari, flutter app tutorial, flutter apps, flutter full app, app flutter, flutter news app tutorial, flutter news, flutter news app example, flutter news app video tutorial, news app with flutter tutorial, news app flutter github, flutter app video tutorial, flutter api project, flutter api integration example, flutter api call example, flutter api integration tutorial, flutter projects for beginners

Id: aaGcER1uUoE

Length: 82min 57sec (4977 seconds)

Published: Fri Mar 20 2020