#Google's Flutter Tutorial - Parsing RSS Feeds (coderzheaven.com)

hello and welcome back to interpreter tutorial in this video I will be showing how to parse RSS feeds in Prada and show it in a ListView okay so let's start the first thing we need is to add the plugins so open your pup's with rhodium on file go to the dependencies and add these plugins a link to these plugins will be provided in the description the ATP plug-in is used to face a feed the web feed plug-in is used to parse a feed the cache Network image again is used to cache the image and the URL on the plug-in is used to open the field in a separate web browser or a web view controller so once you have added all these plugins run the flutter packages get in the terminal to install the packages okay now let's create a new file on a name it RSS demo dot dot now let's import the necessary packages we need the material package the web filled package HTTP package the URL launcher package and the cache network image okay now that is created you then I'm going to add this file in the main door dot file so that this file will launch first okay so our basic boot it is ready but we don't have any why yet before that let's grab the RSS feed URL so I'm gonna get the NASA RSS feed URL go to image of the day so that's the URL copy it and create a static constant string feed URL and paste in there okay now we need a RSS feed vehicle I'm going to name it to underscore feed and a title so that will be the upper title this will be displaying the progress okay now let's write the function to get the feed so load feed I'm going to wrap it inside a try-catch vlog too careless first get the client from HTTP the next final response is equal to a white client dot get with our feed URL okay now we need to parse a URL so we'll be getting there XML string so get that body from the response and parse it no we are going to return this because it is expecting a future of the speed so if there is some error be able to return null now let's build the UI so scaffold alpha so for now we are just displaying the title okay and how bright in its state so the first thing is we need to initialize the title so let me write a new function that will update the title so update title the variable will be idle and said state let's go title is equal to title okay let me call it inside the unit state with the value Wichita title so that's a widget or title okay so let me write a similar function for the variable as well so how'd it feel okay and Escoffier is equal to feet now let's write a new function load which is an sn2 dysfunction and called update title with a value let me declare a new constant static constant string I'm gonna say loading field message so loading feed okay cross in there we are going to call the load feed function so on result we want to check if the result is not it or if it is empty let's go to update the title so update title I'm going to declare a new variable field load error message which will say error loading feed okay so pass in there and return else if everything is okay it going to update the free variable and AppData title as well field or title so get the title from the past field okay so once we have that we are going to call this method in the init state so go to the init state and call load okay so if you refresh the app you should see the title so tightly is there now we are going to fill the rest of the UI okay so we'll be building a list with a parched RSS feed so the list row will have it idle so let's write a function to return a X which it with a title okay let's give it style so textile with font size 18 point zero on weight W let's say 500 and maximum lines to add power flow ellipses okay so similarly we will have the subtitle as well for subtitle we will change the font size to 14 one way to w100 maximum lines to 1 okay so we will be showing a thumbnail also in each list all so let's create a function for that passing the URL so that will be the image URL I'm going to return a padding woods yet with left padding 15 and child it will have a cached it took image with a placeholder so for placeholder I have an image in my assets so let me show that you need to declare the assets in the pub script or EML files so I had it it lie it in the assets section so that say mrs. folder and that's why image no underscore image dot PNG okay so let me declare a new variable placeholder mate so the path will be images slash no underscore image dot PNG okay copy that and use it as the placeholder now we need to set other properties the image URL so that into the URL let me rename that baby squirrel okay now we need to set the height I'm setting it a 50 to 70 alignment to the alignment dot Center and 50 paths without film okay now we need here right icon for each list row so let's write a function for that that will return an icon with image a right arrow okay and in play color with size of 30 okay okay now we will create the list itself so let's me dot builder with item count feed store item start length the item builder which will have the build context and the index okay so let me get the item first Sophie dot items of index now we need to return a widget for each list row so I am returning a list I'll with title we'll call a function with item dot title that will not on a text widget so similarly for subtitle will call subtitle you will pass in the published date and for leading we will add the thumbnail so let's get the thumbnail URL so that's one item inside that you can see thumbnail is inside enclosure so item dot enclosure dot URL okay and the trailing you will add the arrow so right icon and we'll give some padding so 18 sister all five and they want a property let's leave it empty for now okay now let's write a new function body to create the body of the UI so before that we need a function to check if the feed is empty so I'm going to check if the feed is null or filled out items is null that's going to return true now we are going to use it inside the body function if on except if the feed is empty vehicle to show a circular progress indicator so here sender would set a child a circular progress indicator okay otherwise you're going to show the list all right okay so let me add the party to the UI okay so the first sign up you will see the list okay now let's add a pull to the fresh to the list so wrap it inside here a fresh indicator all right the header is because we didn't provide the on refresh function okay on refresh I'm going to call the function load alright so error is gone so it's important to probably a key for the refresh indicator so let me create a key so Global key refresh indicator state and fresh key okay let's inch lace that fresh is equal to new global key refresh indicator state okay so let's supply the key to the Refresh indicator and restart the app so if you try to pull and see that it's loading again now the next thing you are going to do is to add a click to the row and open the field inside a browser or a safari deep controller inside there okay so let's write a new function open feed so then you are a launch of plugin is going to be used here so if you want to see what you are a launch a plugin can do I have a separate tutorial on that I'll be providing the link in the description okay so here got launched with the URL and falsified a view controller to true and false web you to false this will open the web browser inside the app itself okay so return otherwise if there is some error we are going to update the title so let me declare a new table we'd open embassies at an opening feed and pass in there all right and on top of the list all we are going to call this function open field with item dot link okay so we start that so when you click on the road it's going to open a the browser insert the app so that will have the basic controls to reload and close the review also the reader mode is also available okay so the basic controls are provided by the URL launcher plug-in itself so the web feed plug-in can be used to parse RSS feeds and atom feeds as well so I will be providing the link to the github repository in the description of this video along with other plugins so this was basic demo how to parse a RSS feed so this plug-in can be used to file setup here as well so that's all in this video please don't forget to Like subscribe and share hit the bell icon for notifications also please leave your valuable comments in the comment section below thanks for watching see you the next video bye you

Channel: Mobile Programmer

Views: 13,020

Keywords: flutterdart, googledart, flutter rss feed, parse rss feed, load feeds, pull to refresh, flutter listview, flutter tutorials, flutter tutorial, flutter examples, flutter code, Launch urls in flutter, show feeds in listview

Id: F0xh7LMr_V0

Length: 14min 48sec (888 seconds)

Published: Sun Dec 08 2019