Flutter Tutorial - Editable DataTable & Edit Rows

[Music] [Music] with the data table widget you can structure your data in columns and rows and we want to look specifically at how we can also edit our data next to displaying our data if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by building our data table therefore we go to our build method and here inside we create a new method built data table inside of this method we want to create then a data table widget and you also need to supply here the columns and the columns are always displayed here at the top so these are our headers and therefore we define here the first name last name and age within a new list so i create here a columns list with the first name last name and age and now we simply want to build these columns therefore we simply go over all of these strings which we have defined and for each of them we want to create a data column and inside of it you create a label where you pass then the string value inside of a text widget with this we make sure that we already display here the header information of our table and we also want to display then all of our rows so here we have a row then we have another user data row and so on and therefore you have here within your data table a rows property and we want to display then all of our users as the data therefore i have created here a user class with the first name and the last name and also the age and secondly i also have created here a list of all of our users where i've specified them the data for them and now we simply want to display all of these users in our data table therefore let's go back to our data table and here we want to create this get rows method and now we want to map over all of our users and we want to build then for each of these users the cells and this means we have here a row and each of these row has then one cell a second cell and the third cell and this is what we need to fill with data so the first cell contains our first name and the second cell contains our last name and this is also what we then put here inside first of all we put the first name inside and then also all the other fields of our user and secondly we create then our data row where we put then all of these cells inside so we put here them inside and then we want to map over them and therefore i have created here a specific method so that we are not only getting here the value we also get the index of our cell and therefore i've created this model builder method and if you also want to use it then you can simply check out the source code with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer all right now let's go back to our get rows method and here we map over all of our cells and now we want to build each individual cell and therefore i simply put here then this data our cell data inside and we also need to convert our cell data then to a string because here this one has a string this is also of type string however this one is of type integer and therefore we need to convert it and with this we already display our user data which we have defined here within our user data list our data table which we define here is by default not scrollable so if you try to scroll here then nothing will happen and to make it scrollable you simply need to wrap here around another widget and i create here a specific widget which is a scrollable widget and here inside we put then our chart inside and here around we represent a single child scroll view and we also need to specify the scroll direction so i set it to vertical and secondly i also create here another single child scroll view and this time i specify the scroll direction for horizontal and with this we can scroll now vertically in our list which we have specified here with the first single child scroll view because we have set it to vertical and with the second one we have set it to horizontal so if you have your more columns to the right then we also can scroll horizontally to the right side next we also can place you an edit icon in our cell and therefore we can then edit our first name and our last name and if we click then on one of these fields then we can here change the name of this field to achieve this we simply go to our get rows method where we display then all of our rows and here inside we have then each individual cell which we built and next to our cell we want to display then this show edit icon and therefore you can set it here to true and now he will simply display for every cell here this edit icon sometimes you only want to modify specific cells and this is also what you can specify so let's remove it again and instead we want to create here a condition which says if the index is zero or if the index is one which means if it is here the first column or the second column and if this is the case then we want to display here our edit icon and therefore we simply put here this flag here inside and now if a hot reload you see we have here this for the first two columns however not for the third column next we want to click here on one of these cells and then we want to edit this data and therefore you go simply to your data cell and here you have an ontap handler and every time if you then tap on one of these cells like this then we want to edit our cell and therefore i simply look here for the index so if we are here within the first column so if the index is zero then we want to edit our first name and therefore i also put here then this user object inside which is then representing this user which we have clicked on and now we create this added first name method where our edited user goes inside and now if we click on one of these data fields then we want to show a dialog with a done button and a text field and here every time should go then the initial name inside and later we can then modify it and click on done to also manipulate our field value to achieve this i create here a new method show text dialog and here we want to put then our title inside which is then later displayed here at the top of our dialog and secondly we also want to place the our value inside which is in this case the first name and therefore i simply put here to the value the added user first name inside and now we want to create then the show text dialog method based on these both values the title and the value and therefore i simply create a new message show text dialog and we get here then the title and value and here we simply call then the show dialog method from the flutter sdk to show our dialogue and within the builder we want to create then our own text dialog widget and inside of it we simply pass in the title and the value and we also create then in our text dialogue widget the title and value and lastly we simply need to create the ui of our dialogue so we want to create here this title then our content which is our text field and also some actions in this case a button and therefore we get started by creating a text editing controller so that we can put here already the initial value of our text field inside and this means we get here then the value on which we have clicked and we put it inside of our text editing controller and now we simply want to create our dialog therefore we create an alert dialog with the title which we have specified over this title and secondly we want to display then our text field and therefore i put here the controller inside which is then displaying our value and with this we already display our title and also our text field with our value on which we have clicked then we also can decorate our text field a bit so we make it rounded and we also want to include the actions and therefore we simply create an elevated button with the text done and every time if we click on this button then we want to hide our dialog again and therefore we call you this navigator pop and lastly we also can place in the current text of our text field which we access and over our controller and this text value which we put here inside we can access them later on the other page so we get here then this value back and now we simply can take the new value which we have typed and simply put it sent to our edit user and therefore i simply map over all of our users which i have stored within the user list and then we simply want to check if the user which we are currently looking at is the edited user so we simply compare them and if it is the edited user then we want to put the new first name inside and therefore i simply created here a copy method in our user class and then we can simply put here the new first name inside and this will make then a copy of our current user and only modifies here than the first name data and therefore i have also created here this copy method which basically modifies then only the data which we put here inside within your user model class you also need to override the equals and hashcode methods so that we also can compare our user and this is especially needed if we compare here our user with the other edited user so in total we change our user object every time if it is the edited user however if it is not the edited user then we simply want to have it unmodified and now we can try it out so i click here somewhere on the first name column so let's go here and then i simply can modify it and then i click on done and then you see that we have here the new data within our first name cell let's also look at how we can modify then our last name and this works pretty similar so we simply go to this on tab of our data cell and every time if we click here on our data cell then we want to check if the index on which we have clicked is 1 which means that we are within our last name column and if this is the case then we want to create an edit last name method and we also put the user again inside now let's create this edit last name user method and here inside we create then again the show text dialog like before and this time we only need to place another title inside so we change this time the last name and we also put here another value inside so this time we access here over our user object the last name instead of the first name and with this we already display here our dialog with the last name title and also with the last name which we have clicked on and now if we click here on this done button we get then again the last name back and we also want to modify then our user data again therefore i simply map here over our user's data like before and here we check if it is then the edited user and if it is the edited user then we simply want to change here the last name of our edited user otherwise if it is not the edited user then we simply let this data unmodified and now we also can try this out so i click here on this winter for example and then i change this name a bit and click on done and you see that we have here the new edited data inside as a small bonus you also can change here this column because here it is displayed every time to the left side and you also can display these numbers on the right side and how you do this is by simply going to your get columns method and here we determine first of all that we are here within the second column and if this is the case then we want to align the second column to the right side and therefore you have here this property numeric and here i simply put then this is h inside which means that if we are here within this column then this column is numeric and now if a hot reload you see that this data is then aligned to the right side and this is normally done for numeric data so if you have numbers and so on hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music] you

Channel: HeyFlutter․com

Views: 41,675

Keywords: android, android datatable, create a widget, datatable, datatable tutorial, flutter, flutter datatable, flutter table example, flutter table layout, flutter table vs datatable, flutter table widget example, flutter tables, flutter tutorial, flutter tutorials, flutter widgets, gds: yes;, ios, material design data table, widgets

Id: D6yndJ_lk14

Length: 12min 46sec (766 seconds)

Published: Mon Apr 05 2021