Flutter E-Commerce Admin Panel: How to Create a Product Form in Flutter

hello and welcome back to coding with t. In  today's tutorial we're going to learn how to   create a product form or how we can create  a product so add product inside the database   the first thing we need is the design so we  have to create a form in which we are going   to accept multiple type of things so the design  is very important and also the today's tutorial   so let's first quickly see what we are going to  create currently we are inside our eCommerce admin   panel and we have almost created dashboard media  is completed panel design categories design and   Brands design is completed and today the products  design will also be completed so if you go to the   products and inside over here you can see this is  what we created in the previous tutorial so this   part is completed but when I'm going to click on  this add product the today's tutorial is about to   create a design like this in which we have the  product title product description and if you   see the white boxes I try to add everything as a  separate widget so that we can easily manage the   things so first of all let's quickly talk about  how the layout is you have to remember each and   everything and this is what we are going to  implement in the tutorial so if you see the   tutorial first of all we have created a row inside  that row we have two main columns the First Column   is this one and in the First Column you can see  we have the basic information the first wiget   that we are going to create is the title and  description we are going to learn how to create   a description or a text field like this in which  we can create next lines or the multi lines then   in the same column we are going to learn how  to create stock and pricing with a widget of   prototype single and variable then we're going  to create the stock and pricing Fields this is   a stock this is a price and you can see we can  we cannot add any I'm trying to add any other   character other than the numbers so we cannot  add it we can add the numbers we can add Dot and   you see that is going to automatically remove  everything after two decimals let's say 1 2.12   when I'm going to again try try to write another  thing it is going to remove it because we can also   add up to two decimals in the stock we can also  cannot add anything other than numbers we cannot   add any signs or the characters as well same for  the discounted price and in the product attributes   we going to add attribute like this one colors  attribute name will be divided by this line so   let's try to add green and blue so by clicking  on this plus button you can see previously it   was empty and now we have one color with a green  and blue attribute we can create more attributes   sizes small and large click on ADD and we have  now two attributes because uh you can see we   cannot generate variations because at the top we  have a single product selected when I'm going to   click on the variable product you will see  another button over here so let's click on   this and you can see the stock these stock price  and discounted price values are also gone from   here so we have the product attributes based  on these attributes we are going to able to   generate the variations and also we have another  section visible which is the product variation   sections in which we will be able to see all  the variations of green small green large Blue   small and blue large so by clicking on this  button first of all you can see it is empty   there are no variations added and let's click on  Create and you can see we have green small green   large Blue small blue large and this is a toggle  label so by clicking on this one you can see we   have a complete section with the image again  stock price discounted price and description   for a variation of green color and small so you  can dynamically create any type of attributes   any type of variations we can add other images  for these as well you can toggle them and on the   right side we have a product thumbnail first of  all then we have list of images by clicking on   this one you will see we are going to pop up a  media section in which we are able to select our   images add from them close it we can also click  on this plus icon and currently we have an empty   list but when Once the images are selected let's  say in the brands I'm going to these four Images   click on ADD and you can see the four Images are  added over here currently they cannot be scrolled   because the list is not exceeding this design  so after that we are going to use a widget or   a package which is going to select a brand for  us so you can select any brand let's select the   Jordan then we have the categories let's click  on it and you can see all the categories in a   separate popup so we're going to learn how to add  this type of popup or the multi select so click   okay we have two categories over here then we have  a visibility published or hidden and at the bottom   another widget which is the bottom navigation  widget which is discard and save changes so   this is what we are going to create remember the  design and we going to start with one widget at a [Music] time okay we are creating cter e-commerce app and  we are about to complete our second last section   rest of all the sections all the concepts and  all the that are already created if you're new   I suggest you to watch the previous videos you can  get the playlist link of e-commerce app and also   e-commerce ad panel Down Below in the description  and also you can download the complete code from   the description below so let's get started okay  we are inside our e-commerce admin panel and in   here you can see the first thing we need to  do we need to add the remaining screens which   is the create product and edit product these  are the screen that we are targeting so once   these are added in the routes let's close it now  let's go to Fe features shop screens products and   inside today we're going to create the create and  edit product in the previous tutorial we already   created the all products design with the table and  whereas in today's tutorial if you open the create   product you will see a change over here that  this form is going to Target the desktop screen   and the Mobile screen whereas the tablet if you  open the T side tempate in the tablet if we are   not going to pass the tablet which is the widget  if we are not going to pass it is going to use   the desktop widget right so this means that for  the tablet the desktop will be applied so desktop   is for tablet and for the desktop itself and for  the mobile we are definitely going to change the   design in the responsive screens I have the tablet  one but it is not needed if you want to delete it   you can do that as well okay inside first of all  the create product desktop screen so first let's   talk about the layout we have a scold at the top  then we have a bottom navigation bar in which we   are going to create a widget called Product  bottom navig ation which contains two buttons   save changes and discard then we have a body with  a single child scroll view to scroll the content   then we have a spacing from all the sides and then  in the column the main thing is started first of   all we have the tea breadcrumbs with heading  return to previous screen is true because it   is coming from all products so whenever user  is inside the create button we want to allow   or create a back arrow whenever it is pressed  we want to redirect to the previous screen then   some space and then we have a main row and inside  the main row you see we have two expanded widgets   means two columns and on top of these two columns  we have the expanded widget why because we want to   make sure that our design is responsive and for  the responsive design we are using the expanded   widget okay if we talk about the first section  which is the left section so let's open it inside   you can see first of all we need to handle the  flex if the device is the tablet screen because   remember we are using the desktop for tablet  and mobile as well if the device is the tablet   screen we want to use this row layout or want  to assign the left side as double as from the   right side okay and if it is the desktop screen  because remember this is only going to be used   for the desktop and for the tablet not for the  mobile so if it is a desktop screen you want to   give three times more space to this left column as  compared to the right column so we have a column   over here the first widget we are going to create  is the title and description then add some space   height is space between sections and if you want  to see this is tablet screen this is the T device   util class and this is a helper function which is  using media cury lot of context size width if it   is greater than the tablet screen size and less  than the desktop screen size which are the sizes   this is the tablet size this is the desktop size  and if it lies inside it's going to return true   and if it is going to return true based on that we  have two and three values assigned okay once uh we   have the title and description widget after that  we have a container for stock and pricing first   of all it has a heading then it is going to use a  widget product type widget which is going to add   two things to toggle if it is a variable product  or a single product so these are going to be   radio buttons then we have a stock product stock  and pricing if it is single product then we're   going to display this widget otherwise this widget  will be hidden we're going to come back to these   widgets as well first of all let's add a constant  and and these are the product attributes will be   visible no matter if the product type is single or  variable and after this section we have the stock   and pricing is completed at some space and here  we have all the variations variations will only be   visible when we have the product type as variable  so we will see the logic inside here and once this   all the left side with the variations is completed  you can just create all the empty widgets inside   this widgets you can see I have all the widgets  created you can create all these wigets with all   these names once you have created we are going  to add one by one data inside them okay once   this side is completed we can close the expanded  now let's talk about the right side because we   have Flex added on the left side we do not need to  manage that on the right side so just expand it to   shrink and expand the space horizontally then  inside this column first of all is the prodct   thumbnail some spacing then in the Ted container  we have all product images and product additional   images means a slider where we are going to  display all the additional images then again some   space and a product brand then product categories  product visibility widget which is going to have a   video button again for published and draft or you  can say hidden then some space and the design by   this way will be completed but if we talk about  the mobile layout inside this we have something   changed all the things at the top are same but if  we talk about the column you see we have only one   column because want to Stack all the widgets uh  on top of each other so in the mobile we have a layout something like this so in the create  product first of all we have the breadcrumbs   as you can see over here then in the create  product first of all we have the product title   and description we have the basic information  with the product title and description then we   have stock pricing product type widget this is  the stock pricing this is a product type widget   so whenever single is selected this section will  be appeared product stock pricing then we have   product attributes also the product attribute  layout is now changed then we have all attributes   displayed after that let's scroll a bit down we  have the product attributes then we have product   variations and this is the separate section you  can see it is not inside the stock and pricing   so if I am going to change the product type to  variable in that case we can see all the product   variations then we have product thumbnail image  you can change these wigets as well because these   are simply wigets we can place them anywhere we  want then we we have all products over here then   we have product brand product categories and  visibility so brand categories and visibility   so this is what we are going to create now one by  one okay tablet is empty just created just layout   is created nothing inside if you want to delete  it you can do that okay now inside the widgets   I have created these dot files so we're going  to talk about them one by one so first of all   is the title and description to save the time you  can pause the video you can add or copy all these   values but to save the time I have added the code  over here so first of all T rounded container will   go for all the wigets because we want to add some  white space if you see in the container we have   width height pedding margin in the Box decoration  we have the default radius we have some border we   have the shadow over here these are the default  values that are already applied just for the   white background and some radius for all the same  products or the same wigets then we have a form   because want to submit the text and description  so first we going to use the title each text or   the each widget will contain a title with the same  style and theme headline small add some space and   the text form field first text form field is a  simple text form field nothing changed product   title we have a validator after that we have the  size box so that we can declare the height of this   text form field because we want to make this text  form field as multi select so if we see the text   form field to create a multi select you have to  make sure expands to two Max lines is N Text line   will be start keyboard type this is important to  multi-line and Max lines are n this is important   so that more content can be added and based on  these values we can easily create multi select   sorry multi-line I am keep repeting multi select  but it is multi-line text form field so this is   the deoration Once title and description is  created inside the stock and pricing the next   wiget is not the title but product type widget  so let's open it it is over here product type   widget. Dart it is going to contain two type of  radio buttons with the same group So currently   all the design is static we have a title again  then we have the radio button with the single   text group value is single group value is single  product type variable product type single and its   text after that we going to move to the stock and  pricing inside the stock and pricing you are going   to see one new thing or maybe you are already  familiar with with this so first of all create   a form in the column we have a stock and you can  see we have a fractionally sized box this means   that this is not a fixed sized box but this is  a fraction means whenever the screen is going to   be changed it's not a width it's a width factor  means it is going to apply 0.45 means 45% of the   complete width so whenever the screen is going  to be shrink smaller and smaller this text form   field is going to be shrink itself as well using  this fractionally sized box so we mostly use these   type of widgets for the responsiveness then inside  the text form field we have a decoration validator   keyboard is number because we only want to allow  the user to enter the stock which is numbers   this is the input formator you can use text form  text input formator and then we can add multiple   but I am just going to use filtering text input  format. digits only this going to make sure that  

you cannot enter anything else other than numbers  then we have a row and and inside the row we have   pricing and or the price and the discounted  price first of all we have inside the row we   have expanded again expanded to make it responsive  first Tex form field decoration validator keyboard   type is now not just numbers but text input type  do numbers with options decimal true this means   we also want to allow the user to add decimals  up to two points right so we have to change the   input text formator and we have to allow the reix  mean me you can add up to two decimals with a dog   right the same goes for the discounted price and  by this way we have stock and pricing widget is   completed make sure to double check while writing  all the things next we have product attributes   if you click on them we have a column for all the  attributes now to add the attribute if you see the   design we have the add product attribute we have  a text field first and the second text field for   other attributes and then we have a plus button  after that we have all attributes list so first   of all the title then in the form we have a row  in the row because you can see we have in a one   single row we have a two text fields and then we  have one button so in the row we have expanded   build attribute name this is again a text field I  have created a separate function because we have   to layout it differently because at the top you  can see if the device is the desktop screen in   that case we want to display attributes in a one  single row but if it is not a desktop screen it   is a tablet then we want to use this layout right  in the column we want to instead of row we want   to Stack all the things vertically so instead  of repeating the code I have created a function   which is going to use a single code for text form  field for the row we have the expanded widget for   the attribute but the second one is expanded with  the Flex 2 means it is going to take the double   space as compared to this widget and this widget  right and then at the bottom we have the attribute   button but for the vertical design we do not have  any expanded because we just want to keep all the   text form Fields take all the available space  then we have build at attribute button first   see the attribute name this is a text form field  simple text form field again the second one but   this is again expanded Max Line's null its height  is just 80 and rest is same as the previous one   and then we have the attribute button over here  size box is 100 elevated button do icon is used   because we just want to add the add icon or the  sign and then the label is add this is the style   okay once this form is created after that we have  list of attributes and for the list of attributes   I'm using another t- rounded container change the  background color this is the primary background   that I am using you can again get all these assets  free of cost from coding with.com from the same   product list just choose the variation of admin  panel starter kit and everything will be included   after that we have the build attributes list and  build empty attributes definitely we are going   to show one of this function either the empty  attributes or the list of attributes but just for   the design currently we have the both list first  of all see this function it is using list view do   separated shrink WP is true item count is three  then we have item Builder add space between each   list style and then in the item Builder we have a  container this is the decoration then list stle we   have this is the title subtitle and trailing icon  trailing icon will have the trash icon or it has   a trash icon but we are going to remove this  tile if required after that we have build Mt   attributes this is just a design it contains a row  with the image in it and then we have some space   and a text no attributes added for this product  and by this way all the attributes widget is now   completed the last thing we have some space and  a button generate variations button so this is   the button we will only display If the product  type is variable so just for the design it has   a button generate variations it is doing nothing  okay so this one is completed uh we are going to   complete this one then add some space and we're  going to talk about the product variations now   so this is the product variations if you see  the product variations again this is a separate   rounded container with the title over here we  have a button remove variations whenever it is   going to be pressed we will show the popup  to remove all the variations but down below   you can see we have four variations dynamically  created each variation title is its color green   size small means key and value of from this pair  and whenever it is going to be opened it has its   own form with the image stock price discounted  price and description so we have these four or   dynamically created as much attributes as much  we have we will create Dynamic variations first   of all we have a row with the title and a text  button to remove the variations then we have   list view do separated to contain or to create a  list currently for the I design we have item to   string fra is true item Builder to add some space  separator Builder sorry then item Builder is going   to build variation tile and then no variation  message or the empty variations so again if   the list of variations are being displayed this  is not going to be displayed but for the design   we have to create it so let's see first of all the  empty one it is again a row with a image space and   a text but now if we see the main variation tile  we are using the expansion tile to toggle the tile   and we will only display whenever required or  when the user click on it to view the details   instead of opening all the content so this thing  is going to go for the design then we have a title   this title will be dynamic but for now we have  color green and comma then we have size small   size as small so this is how the title will be  for each expansion tile then for its children   first thing is the image uploader to display that  image then some space then inside the row by using   again the the expanded expanded and expanded this  is the text form field for the number input type   keyboard type is number input formators this is  input formator again this is the keyboard type so   once the variation stock and pricing is created  then we have the description and by this way we   will complete our expansion T we will see how the  back end will work in the upcoming tutorials but   for now the left part is completed okay now let's  talk about the thumbnail widget in the thumbnail   widget you can see first of all we have a rounded  container column title and then in the rounded   container again for the image and button we have a  fixed height of 300 background color Center column   again we are using the row so that row can take  all the space and using the row property we can   make the image in the center then in the expanded  to make the image responsive no matter if we have   the row or Center or whatever we have the t-  rounded image width and height is 220 and 220   then image is currently static image image type is  asset later on we will display the image type as   Network then we have a button size box 200 outline  button and add thumbnail is the text of the button   once the thumbnail widget is created let's scroll  a bit down thumbnail widget is created inside this   expanded column we are going to talk about okay  create the tr- rounded container for the rounded   image and then we have a title for all product  images and this is the widget that we want to   create product additional images we're going to  pass all the product image URL that that are going   to display over here from the main screen then  we have on Tab to add images and on Tab to remove   image okay first of all we have a sized box height  is 300 previously I mistakenly added the OBX which   is not required in this case so size box with the  height of 300 in the column first of all we're   going to add a selection to add additional product  images which has an icon as you can see an icon   or the image with the text so inside the column I  am using expanded Flex is two because we have the   height as 300 that's why we can use the expanded  in the column otherwise it is going to throw an   exception with the unlimited height or the pixel  will keep going without any limit in the vertical   Direction so the flex is to the reason to add  Flex 2 as if you see over here the first one is   this section the white section after the heading  and the second section is this one with the lists   can be scrolled in the horizontal direction  we have two sections so this section is taking   double space as compared to this one so that's  why we have expanded to two in the gure detector   on Tab will lead to add images again because when  I'm going to tap over here you can see the media   screen appeared and also when I'm going to tap  on this button again the same media screen is   appeared so we have t rounded container in the  center column we are going to add one image and   a text next for the second section we have a row  because inside the row we first want to add all   the uploaded images so expanded Flex 2 means now  this this thing is going to take the double space   as compared to this one so Flex 2 then as a child  size box height is 18 then for all the list of   images we going to create a separate function and  add some space and a rounded button which is this   T rounded plus button its child is simply an icon  and whenever it is going to be tapped we are going   to add images again so if you see this function  upload images or empty list it is going to check   additional product images if it is empty or not  don't worry about this variable but we can do is   we can remove this we can also overcome this empty  list instead of showing uploaded images we are   currently going to display the empty list because  we do not have anything in it so for the empty   list we have list f. separated item count as six  scroll direction is horizontal separator Builder   with the size box and then item Builder to build  t- rounded container with the width and height   of 80 cross 8 background is this one and inside  this empty list we do not have any image right so   for the uploaded image we going to use again the  separated widget same scroll Direction item count   will be dynamically selected with these variables  So currently not added don't worry about them then   for the separator Builder we are going to add some  space item Builder is going to get the current   selected image and then in the T image uploader  we're going to display the same width and height   top right is 0 0 because T image uploader also use  a stack and a position icon to display the icon   icon like this this so that we can delete it so  top and right is zero to place that icon width and   height of the image 80 cross 80 left and bottom  is zero forry null pass the image pass the icon   as trash image type is Network on item on icon  button pressed we want to remove that icon from   the list so with this way we are done with our  additional images widget as well now it's time to   create the brand widget but for the brand widget  you see when I'm going to select this we have   all the list over here and we can Cho used only  one brand from this list for this again use Tred   container then in the column we have a title and  over here we are using the new thing which is type   ahead field right this means that when I'm going  to type only one thing it is going to suggest me   all the list and based on that list we are going  to select one single item so again let's click on   it currently you can see Samsung is written in  the field so that's why we can see the Samsung   only but when I'm going to remove this I can see  all the available space let's search for Nike and   you can see the Nike is over here I can select  it now to add the type of head field you have to   go to the pop spectr DML file inside you have to  use this widget which is flutter type ahead you   can get that widget from the pop. dev and also  you can add the multi select floter widget which   is going to use to select multiple categories so  make sure to add these two widgets and for the   type a head widget we're going to use the Builder  it's context controller and focus node we're going   to return the text form field from here here  this is the focus note as it is decoration for   the text form field outline border label suffix  icon and for the suggestions call back we have   to implement this pattern currently I have added  two static Brands but definitely we're going to   get the dynamic list of brands from here based  on these Brands we will select one of them then   we have item Builder it is going to build the list  tile with the text as suggestion. name on selected   is currently empty once the brand is completed  let's create the product categories for that again   theed container with the column title space and  multi select dialog field in the spec in the pup   spec we have to add this widget and using that  widget we will be able to use the multi select   dialogue button text is Select categories title  is categories this is the items again static items   showing category model for the multi- select item  we have to pass two things first one is category   model second one is string so the first thing is  category model then comma then the string or the   label itself so based on this label this category  model will be selected list type is Chip you can   change the list type as well values list and Chip  so on confirm is not going to do anything and   now the last widget which is a product visibility  widget it is again using the t- rounded container   then the column with the text spacing again a  column build visibility radio button two buttons   first with the publish second one with the hidden  this is the function this is going to receive the   value and a label actually it is a radio button  this is its value the group value is published on   change is empty and the child text will be passed  from here which is hidden or published and if we   want to see the bottom navigation widget this  is using t- rounded container to take all the   available space we're using row and we're going to  place all the elements at the end of the row using   the main AIS alignment and then in the children we  have two buttons the first button with the space   and the second button with the elevated button  first one is the outline button with discard   they are discard is not doing anything currently  save changes are going to save the changes but   you can add your functionality over here so we're  going to currently copy the same widgets to the   edit screen and the edit screen is again using  the product desktop and the mobile design same   layout everything is same but over here we are  going to get the product from the edit screen and   we're going to pass the product wherever needed  we'll cover that inside our backend tutorial so   now it's time to run this application okay our  application is running now let's try to add email   and password click on sign in okay we are logged  in and let's go to the products click on this add   product button and you can see the complete design  is right in front of us we have the title we have   the same description we can add multi lines  we have the add thumbnail button currently not   doing anything we have add additional images  currently they are not toggleable but we have   single and variable product displaying stock  pricing attributes all that attributes empty   widget for the attributes generate variation  button variations and definitely there is no   variation added empty variation so one of them  will be displayed and also one of them will be   displayed from attributes over here we have the  visibility they're not toggleable but we have   the categories two categories can be selected  added over here we have a brand dummy Brands   Adidas or Nike they're not selectable yet so down  below we have discard and save changes button so   that's what we wanted to create same goes for the  edit screen if we edit something you can see all   the design is same we just have to pass the data  and that's what we wanted to create so thank you   for watching I hope you learn something new and  that's it for today's tutorial if you have any   questions you can ask me know in the comments  and if you want to download the complete code   again link is in the description and also you  can watch the complete e-commerce app and admin   panel playlist from the link available in the  description thank you for watching and take care

2024-12-30 11:07

Other news