3.5 - Radio Button in Flutter Example - Flutter Crash Course

assalamualaikum welcome back to coding with tea today we're going to learn how to create a radio button in the flutter basically in fact we call it a radio we are in section 3 and we are about to create the fifth video of this section as at the end of this video we are going to create a form so we are following a single project in the previous tutorial we created checkbox that you can see it has been displaying as a fifth tutorial but we created in the previous tutorial so the fifth tutorial is the one using radio buttons so you can get that link from the description below okay in today's tutorial we are going to create the radio button inside the form or inside the application we are creating in our section three in which we are going to create a form at the end so you can see in the previous tutorial we created this check box that checkbox is going to check that this product is on the top we design this product we see two types of the check boxes so same for today's tutorial we are going to cover the two type of radio button that we have in the flutter the first one is a simple radio and the second one is the radio list tile then we will use the radio list style because radio list will provide us the title property and we will also see the difference between these two we will try to understand how radio button works with the basic example and then using enum we are going to create a professional radio button after that we are going to use the radio button and design them like this by making them interactable using setstate property and once we created these two because you can see we have two radio buttons in the same design so instead of repeating the code we are going to create a custom button but in this custom button or in this custom widget we are not going to make that widget as stateful widget but we will keep that as a stateless widget and we will try to handle the set state in our parent widget which is the formula dot so let's get started with today's tutorial open android studio so we are inside the project we created for our stateful widgets for the section three so for today's tutorial so basically we will be following three steps the first one is going to create two type of radio buttons their pros and cons then the second part we make our radio buttons dynamic or interactive using set state and then at the end we are going to use custom widget and in this custom widget we are going to learn how to call set state from this screen in the form.basically that screen or that custom widget will be stateless widget but the state will be handled inside the form. or inside its parent widget so let's get started with the today's tutorial let's create first our radio widget if you follow the previous tutorial in the check box we have only two values required in the check box value and on change but inside the radio we have one extra value which is group value so add a comma here let's pass for now null values to all and let's create the second one which is radial style and also pass null to each value so these are basically two type of radio designs that we can deal with the first one is a simple radio and the second one is just radius style same as a check box list style radio list style provide us with our title attribute that we can add any text widget or any widget we want to use with the radio or with the check box but in simple check box and in simple radio we don't have any title or label attributes let's try to run the application as you can see on the screen we have two radio buttons the first one is in the center and the second one is this list style radio button so these two are not clickable yet and these two are by default selected so let's try to assign its value one and two maybe let's save the code and you can see that both are unchecked currently still they are not selectable so how this value and group value works basically inside the radio button we use radios because we want user to select only one option among all of these so group value is basically the one which is going to uniquely identify all the radio buttons in a group so group value must be unique but this radio value can be changed and unique for each radio button not in the whole group so for example to understand it before going to create enums because enum is used for the radius let's say we have a value 1 and value 2 but in the group value we have to make sure one thing that this group value is unique among all the radio buttons so only one radio button can be clicked at or selected at one time whenever the value is equal to group value the radio button will be selected so in this case the value 1 is equal to group value 1 but this value is not equal to group value so the first radio button should be selected as you can see so let's try to make this group value as two so it should be unique so i have created two here as well save the code and the second one is selected so same like others for example you can see we have different values one to seven but the group value must be unique so we have only one group value let's save the code and you can see we have seven radio buttons but currently they are not clickable but you can see the second group value has been selected if we make it three and now you can see the third value selected so this is basically the concept of radio buttons so now because in the radio buttons we use enums so let's create the first enum to create a name we have to go above this class keyword enum so i have created two properties downloadable enum and deliverable you can create for example enum as a gender and in here you can pass male female and any other genders you want to add ok now head back towards our radio buttons in here you can see that as a value we have to pass unique values of each radio button so let's say the first one value product type enum dot let's say the first one is deliverable and same instead of this two we will use product type enum dot downloadable so we have unique values the first one is deliverable second one is downloadable but remember that we have to make sure that this group value should be unique so to do that inside our class we have to call this enum that we created at the top product type enum nullable question mark means it's nullable and let's create a private product type enum let's copy this and instead of this three let's paste control alt to align the code okay in here you can see that the group value for these two radio tiles are same this is a prototype enum and this is a prototype beta so whatever will be initialized to this prototype enum will be same throughout these all radio buttons so inside this one change we are going to set the state or to update the state and make radio button intractable so in this on change basically we will try to update whatever radio button is selected and we'll initialize the value inside this prototype enum so when our widget will be redrawn this new value will be assigned to all the radio buttons and it will be unique throughout this group value so to create a function because on change is a function when value will be changed we will get some value inside this function we need to update the state so we know how to update the state we learned in the previous tutorial again if you are new you can get the link from the description below or from the right top corner now inside this set state simply we are going to assign product type enum is equal to new value so this new value what is this new value this new value is this one when this radio button is going to be selected this value is going to be picked from there and assigned to this one prototype enum or deliverable which is unique in all the radio buttons will be assigned to this group value so all the group values will be product type enum dot deliverable and then this value and group value is going to be equal that review button is going to be selected you can see that the error is that it is object type the radio button is an object type which is a generic type but the value we are getting is a product type enum so this value is a product type because we use this here so we just have to map this radio as product type enum and error will be gone copy this paste it here and also we are going to copy this on change instead of this null and the same this set state is working for this product type enum whatever the value it is going to get in this in this case it is going to get product type enum dot downloadable and is initialized to this one again in the set state all the group values will be holding this value so let's save the code and you can see we have two radio buttons these two are clickable and you can see only one is being selected at a time but remember the issue is with the radio button that we cannot assign any title to it but with the radio list style we can have a property of title as a widget we can assign any widget but as a widget let's now for example we add the product type enum so simply copy this one dot name so this is going to paste whatever the name of the enum is save it or to use any widget as a title we cannot use a radio we will use this radio list style so currently we have you can see we have two radial styles so both are working so now what if we want to convert them into a single line and you can see that one more issue that we have an extra space in the list style right from this icon you can see that so to remove that extra space we have content padding property in the radial style remember it's only in the radial style not in the radio and you can see the deliverable remove the space around it and also we are going to copy this one paste it in here and the space is also gone so as we seen at the start we have to convert them into a single line so for that we first need a row variable row widget sorry inside the row we have a children's property in the children's we have to add these two to make them in single row if you don't know about the row or if you knew about the rows and columns you can watch the video link is in the description let's save it and boom it's gone because currently we are facing an error because they are going outside our design so let's try to wrap this radial style in expanded to wrap any widget in another widget press alt enter and wrap with the widget name it expanded and that's it save the code and our design is back now let's try to add a background color so we have a tile color property colors dot d purple dot shade 50 save it and copy this one in the second currently you can see that we have two issues the first one is that we need space so we have a size box let's add some width 5.0 comma save the code a small space has been included now furthermore if you want to shrink our radial style we have we have a property called dense this is going to this is a boolean type this is going to make its little small copy and paste it in the second one save the code and you can see that both list styles are working perfectly so to change the shape of the style or the background we also have a shape property use rounded rectangle border as a border radius border radius dot circular 5.0 save the code and it's been changed to circular copy and paste it for the other one as well save it now you can see that we are all doing the work we have to expand it they are currently taking all the space so let's convert these two into a custom widget to widgets let's create a new file i have already created a file named my radio button in here we have to import material.dart and to create a stateless class name it my radio button and in here we have to just replace this container with our expanded this one remove the comma and we have bunch of errors let me just import form dot dot here and we also need enum over here because we don't need enum in this class now so let's just cut it from here get back create enum okay so in here we have to identify that what we need we need a unique value of each radio button we need same group value for each button and also we need title here as well let me just align them so we have title value and group value then this is a design and also we need this on change as a function so no first i have to create the variables so we are going to get these values from the user whenever this my radio button is going to be called so we will do that in the constructor we will add a required keyword required this dot title and remove this constant as well so we initialize these values in here and also we need on change so when you hover over this unchanged you can see we need a function and its value will be product type enum nullable function is also nullable and its name so let's create a function and in here we need to pass a product type enum which will be nullable function will also be available and let's name it we also want to get this from the user so we will also make this as required because set state should be provided by the user so we have four values that we need to provide when we are going to call this my radio button widget heads towards the form dot dot and in here in here we first need to create my radio button and you can see now we have to provide four values press ctrl alt l to align now as a title we know that we have to provide product type enum dot the first one is deliverable so we provided a name then you remember that each radio button has a unique value so in this case this unique value is this deliverable group here so i didn't name it as a group so i should name it as a group and in the on change we have to set the state remember this is a function so we created a function this on change is going to receive some value let's say it's a well here inside this function we need to call the set state we just have to call this product type enum is equal to whatever the new value is so that's it so basically sending this on change which we called in here as a set state so let's just remove this and instead of that we need to call the function we just created at the top okay in here i forgot to add or to replace these titles okay now let's run the code so you can see that here you can see we have only one my radio button and it is currently showing deliverable in the whole row it is taking complete row and let me just duplicate it this time we have to change this title to downloadable also this to as downloadable unique value but the prototype enum and set state will be same let's save it and you can see we have two my radio buttons so we can add again size box with the width comma save it this is how we use our custom widgets and also we send these on states or all change properties or complete functions from the stateful widgets you can see all these classes are basically stateless widgets you can see my check checkbox is stateless text field is a stateless my button is also stateless so basically these all are the stateless but this form class is stateful widget this video was a bit long video than other videos but i hope you learned something new in this video if you learned something new please like the video and if you are new to this channel please don't forget to hit the subscribe button because in upcoming videos we are going to create much more amazing videos so thank you for watching take care allah office

Channel: Coding With T

Views: 25,564

Keywords: radio button in flutter, flutter radio button, radio button flutter, radioListTile flutter, Radio List Tile flutter, Radio List Tile, radio, flutter radioListTile, how to create radio button in flutter, radio button in flutter example, radio button flutter decoration, coding with tea, flutter tutorials, flutter for beginners, flutter UI, flutter, how to make radio button in flutter, radio button in flutter 2022, flutter radio button 2022, flutter radio button example 2022

Id: JLdit0tnwp8

Length: 17min 31sec (1051 seconds)

Published: Fri Jun 24 2022