Flutter Pie Chart Tutorial - FL Chart Pie Chart Flutter Guide

in today's video I'm going to be showing you guys how to work with pie charts within flutter we're going to be using a package called FL chart to create these pie charts and I'm going to be showing you a toz everything you need to know to create studying pie charts within flutter we're going to be talking about how to create a pie chart how to add sections to it how to modify the appearance of our pie chart as well as ADD stunning animations to the pie chart when a certain section gets clicked as well as how we can tack on additional widgets to our pie chart sections to maybe modify the appearance of our pie chart so to get started the first thing that we're going to be doing is taking a look at the actual package we're going to be using to achieve this functionality of creating a pie chart and we're going to be using the E chart package which is a very powerful package available on pub. deev that you can use to create a whole host of different charts for your flutter application today particularly we're going to be taking a look at how to create a pie chart but if you're interested in tutorials for how to create a b chart line chart or scatter charts or anything like that then leave a comment down below letting me know and leave a like on the video and I'll be sure to create a video on that as well so what I'm going to be doing now is just copying this dependency coming back back to my project coming to the pspec DOL file and then making sure that I go under the dependency section and then add this as a dependency then I'm going to do command save let flutter pup gets to its magic and that's pretty much it with this done I'm going to give a test run to my application to make sure that it starts up and there are no issues and then I'll resume the video Welcome Back everybody so now that our application is actually running on the simulator I'm just going to quickly show you the current state of my flutter project currently I have a main. file that basically renders for a home property a homepage and our homepage is just an empty stateful widget which for the build method returns to scaffold which currently just has an app or attached with it besides this there's nothing else so we're going to be building all of the logic when it comes to creating our pie chart so with this said let's get into it the first thing I'm going to be doing is for my scaffold I'm going to be setting the body property to be a call to a function called the build UI then I will come down at the bottom of my class and here I'm going to say that we are going to create a function which will return a vidget called build UI and within this we're going to be basically delegating all of the responsibility for creating our pie chart so to create my part chart the first thing I'm going to be doing is returning a center widget since I want my pie chart to be in the center of the screen and the child for the center widget is going to be our pie chart widget like so so once this is done the only required argument that we need to pass to our pie chart is the actual pie chart data argument and this basically refers to the actual data that's going to be used by the P chart widget to actually render the pie chart on the screen so the type of this as you can see is pie chart data so firstly let's create that so to create the pie chart data I'm just going to instantiate a new instance of pie chart data do command save and with this done you're going to see that everything appears to be working and there are no errors but nothing's displaying on the screen and the reason for that is because we haven't added any data to our pie chart data for it to be actually displayed on the pie chart so let's do that first so to do that the first thing that we're going to be doing is basically defining a property on our pie chart data called sections and what the section property refers to are the different sections that comprise together to build our pie chart so this is where we're going to be passing a list of pie chart section data as you can see and then it's going to use these to actually build our pie chart so to generate these sections what I'm going to be doing is actually creating a function which will be delegated the responsibility of generating this list and then it will return that list and we'll pass it to our sections so to do this what I'm going to be doing is that I'm going to be creating a function now and I'm going to say that this function is going to return a list of pie chart section data then I'm going to say that this is going to be called pie chart sections like so and then I'm going to say that it's not going to take any parameters and open the function body here what I'm going to be doing is saying that I'm going to return a list and this list is going to be as I alluded to before a list of pie chart section data so I want four sections to be in my part chart so in easy way I can generate a list of four elements is to call the function list. generate and then the first parameter here is is how long we want our list to be so how many elements are there going to be in my list so in this case four and the next parameter is a call to a function which determines how each of these actual items within our list gets built so here I'm going to be adding that for each of these indexes I'm going to be returning a pie chart section data like so and do command save and then what I'm going to be doing is making sure that I take this pie chart section function and I set this to be the actual function which is going to be called and then the value that gets returned by this function will be the actual value for the sections property that are pie chart data holes to command save and as you can see now we're seeing a actual pie chart that's being displayed to us and all sections are in even 25% as you can see but there is nothing that's been actually applied to this yet so the first thing that I'm going to be doing is since I want my pie chart to not have any space in the middle I'm going to be coming back to my pie chart and I'm I'm going to be basically setting for the pie chart data the section space to be zero and then I'm also going to be setting the actual Center space radius to be zero as well as you can see so now my pie chart doesn't have any space in the middle and if I remove the section space you're going to see that there's going to be some spaces between the sections I don't want them so I'm just going to set the section space to zero as well these are just useful properties I wanted to show you before we proceed further so now that we have a scaffold for how we're going to be generating these pie chart suction datas the next thing that I want to do is set values for each of these sections to be different so what I want is for this first section to be 10% of the pie chart the next to be 20 the third to be 30 and the fourth to be 40 and when we combine together so 10 + 20 + 30 + 40 that'll be 100% so to do that what I'm going to be doing is that for this pie chart section data I'm going to be setting the value property and the value here is going to be the value that we want this section to consume within our pie chart out of 100 so I'm going to change this function from being an arrow function to just being a function which is going to have a normal body and then within this I'll say that we'll return a pie chart section data and then what I'll do is that I'm going to at the top of this function create a variable and this variable is going to be called double type it's going to be called value and I'm going to be sending this value to the index that we get plus one because the first index we get is going to be zero so I want to add one to that multiply it by 10 for the second index it'll be 1 + 1 so two for the third it'll be 2 + 1 as you can see and then multiply that value with 10 and then I'm going to set that value to be the value here like so and then I will do command save but before I do that it's telling me there's no I and the reason for that is because here we're passing it as index into command save and you're going to see that immediately you're going to see these numbers that are going to appear on our actual pie chart it says four 40 30 10 20 and now we're going to be changing this so 40 10 20 and 30 relate to each of our sections but because all of our sections have the same color it's appearing to be the same so let's quickly fix that so to fix that the first thing that I'm going to be doing is that I'm going to be updating the title property and the title refers to the actual text that gets displayed on each of these sections so in my case what I want is to just display the value so I'm going to interpolate that within the string and then after that have a person AG sign like so so do command save and as you can see the titles were updated next thing that I'm going to be doing is changing the colors for each of these sections so what I'm going to be doing is that at the top of my function which says pie chart sections I'm going to create a list and this list is going to have four elements within it it's going to be a list of colors and each of the color corresponds to one of these sections so for the first it's red second yellow third blue fourth green and then what I'm going to be doing is that I'm going to be coming to my pie chart section data and here I'm going to be setting the color property and I'm going to say it's going to be section colors and then the I index and command save and as you can see now all of our sections are clearly being displayed to us and each of them have a very defined color associated with them so you can see that the 10% section takes 10% of the space the 40% one takes 40% of the space of the pie chart so the next thing that I want to do is actually make this pie chart bigger so to do that what I'm going to be doing is that I'm going to be creating another variable and this variable is going to be the radius so I'm going to do a final variable and I'm going to say it's going to be called the radius and for now we'll set this to be 100 and then I will come back to my pie chart section data and I'm going to set the radius to be the radius that we've defined and do command save and now we've increased the size of our pie chart data then once this is done I'm just quickly going to apply some title styling to my actual pie chart section data so this is basically going to be the styling that is going to be applied to the title and here I need to define the phone size so what I'm going to be doing here is actually then again creating another variable when I'm going to say final phone size and I'm going to be setting this equal to for now to be 16.0 like so and do command save and now as you can see that the titles were updated to the color of white and I've also increased the size of them and I've made them bold great so now that this is done let's actually go back to the top and actually let's take a look at what happens when we update our section space now if I change the section space to two you can see that we've added some space between our sections I can make it much more drastic by doing 10 and as you can see now we've added some spacing between each of the sections I'll leave this to be zero and if I want some space in the middle of our pie chart if I want my pie chart to be donut shaped then I can change the center space radius to be let's just say 10 you can say now a small donut appears and our pie chart looks like a donut but I'll keep these to zero as before and we can proceed so the next thing that I want to do now is actually show some widgets on top of these sections some custom widgets that I might want to display so in my use case what I want to do is that for each of these sections I want them to depict a category of spending so 40% is a certain category on which I've spent my money 30% is another one so I want to display some kind of icons on top of this so for your convenience what I've done is that I've already included a custom widget class that I've created called custom badge and links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so you can take a look at them if you're confused at any point or if you want to download the source code so you can just download the source code copy that class and it's just a normal stateless widget which returns an animated container nothing fancy and we're going to be using that to actually display these icons on our actual pie chart sections so to do this what we're going to be doing is we're going to be coming back to a pie chart section data and here I'm going to be defining a property called badge widget and the badge widget is going to be set to a new instance of my custom badge widget that I've created my custom badge expects three things it expects the actual icon it also expects the size of this widget as well as the Border color so the Border color is always going to be colors. black so let's do that and then also the widget size is going to be the same for all so I'm going to come to the top and I'm going to say final which size and then I'm going to say that this is going to be to begin 40.0 like so and then I'll set this to be the widget size here and then finally for the icon it'll depend on what section we want to attach this patch to so if it's for the 40% one the icon might be different so what I'm going to be doing is applying the same logic that I done for the colors where I'll create a list of Icon data like so I'll call the section icons and for the first one my icon is going to be business for the second shopping B for the third local grocery you get the idea and then I'll come back to where I have my badge widget custom badge and I'm going to say that here we're going to take the section icons and we're going to extract the I index and do command save and now you can see that I'm displaying these icons on each of these bar charts so now what I want to do is move these badges outwards away from the center of our pie chart section so to do that there's a property that is actually available to us again on the p chart section data and this is called the badge position percentage offset and from my testing and for my design what I concluded was that a value of 0.98 was good you can work with different values and try to see how that work but now all of these widgets have been pushed away from the center towards the edges of our pie chart sections so this is what I wanted to do and it looks pretty spectacular if I might say so now the last thing that I want to do is basically Implement some kind of a mechanism so that I can detect touches on my actual pie chart sections and then do something so to do that what we're going to be doing is that we are going to be coming to the top where we are actually defining our pie chart then for my pie chart data there's going to be a property called pie touch data and this pie touch data we can set to be a new instance of pie touch data object on this we have a function called touch callback which is a function that gets called every time it's certain element or section on our pie chart is touched so this basically gets in two things it gets a f touch event and it also gets a response that gets passed to it so I will say that these are the parameters that gets passed to us and let me remove the extra brackets and then we can do whatever we want within this function to determine our Logic for what happens when a certain section gets touched so what I want to do is firstly make sure that our event is an event where it's a touch event so to do this what I'm going to be doing is saying if and then I'm going to saying if our event Dot and I'm going to say is interested for interactions and I'm going to say if this is not true or if our pie touch response is null or if our P touch response Dot and then I'm going to say touch section is null so if you're not touching anything then what I want to do is not do anything so in this case what I want to do is basically say that we don't have anything we haven't touched anything so I don't want to keep track of the actual section that was touched but right now we're not even actually storing the reference to the section that was touched so let's quickly fix that so to fix it what I'm going to be doing is I'm going to be coming to my top of my stateful widget State class here I'm going to be creating an integer and this integer will hold the actual value of the index of the section that we touch so I'm going to call this touched index and I'm going to set this to zero for now and to command save then what's going to happen in the touch call back is that if you get an event and events get fired regardless of whether something gets touched or not we just need to distinguish between what are the events that are pertaining to us touching a section and which ones are not so what I'm going to be doing here if this certain condition is met this means that we haven't touched anything what I'm going to do is set the touched index to be minus one and then I'm going to just get out of this function by doing return and if this is not the case then what I'm going to be doing is that I'm going to set the touched index to be something and here what I'm going to be doing is actually setting it to be the pi touch response that we get do touch section Dot and then I'm going to be doing the touch section index and that's pretty much it but if I do command save right now you're going to see that nothing is actually going to happen and the reason for that is to one we're not doing doing anything with the actual touch index but two is we're actually not updating the touched index as well to update it what I want to do is actually copy all of this code remove it from the function block first call set State first within that paste this and then do command save and now it's going to actually update the touched index value and then set state is also going to trigger a widget rebuild for us for the widget tree so now it should work and the touched index value should get operated appropriately so now we can use this so how do we use well what I'm going to be doing is I'm going to be coming to my pie chart section and I'm going to be coming to the specific section for now where we are defining our radius and I'm going to say that if this is the actual section that we're generating which is the section we touched then I want to modify the radius so how do I do that well firstly what I'm going to do is actually Define a variable here called is touched and I'm going to say if our I index is equal to the touch index that we're keeping a track of then I'm going to know that my actual section is being touched so this is the particular section that is being touched then what I can do is take this is touched value and I can say if it's touched then what I want to do is set the radius to be 110 if that's not the case then it'll be 100 to command save so now if you go back and we click on one of our sections you can see how if I click on one of these sections it becomes bigger now I can make this much drastic by doing 150 and if I do this and I click on these sections you can say how big they become so for the purposes of this tutorial let's keep this exaggerated like this but you can see how it's working then the next thing that I'm going to do is also update the phone size so to do that again I'm going to apply the same logic so if it's being touched then what I want is the phone size to be 24 and if that's not the case then it's 16 and now if I click on one of these sections the phone size becomes bigger as well as you can see and then finally I'm going to increase the size of our widget as well at at the very end so for that it will be the same logic if it's being touched let's do 60 to start with and otherwise it's 40 and now if I do this you can see that it also increases the size of the ending widget like so so now it's working as intended so that's pretty much it for today's tutorial I hope that you understood how to create pie charts within flutter and how to work with them how you can style them and add custom properties to them and detect events on them so with that if you enjoyed the video then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I release a new video and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,208

Keywords: flutter pie chart, flutter pie chart animation, flutter pie charts, flutter pie chart example, pie chart flutter, pie chart flutter tutorial, animate pie chart in flutter, animated pie chart in flutter, charts flutter pie chart example, circular chart in flutter, create pie chart in flutter, flutter animate pie chart, flutter animated pie chart, flutter circular chart, flutter create circular chart, flutter create pie chart, flutter fl chart, flutter pie chart widget

Id: 6gZ92SuzJ98

Length: 18min 43sec (1123 seconds)

Published: Wed Feb 14 2024