📱Slide To Widget • Flutter Tutorial ♡

yo what up welcome back to another quick flutter tutorial in this one i'm going to be showing you how you can implement this nice sliding button into your apps using flutter and to unlock the phone i just take my finger and slide it across right you want to see that again go to sleep now just before we start i want to give a shout out to the sponsor of this video which is rotato i'm sure you have all seen in all of my intros i love using rotato to showcase my work especially as an app developer this is a must-have if you want to show your work in a professional manner i'll link it below so make sure to check them out but without further ado let's do this so i've opened up a brand new flutter project but just to keep everyone on the same page in my main function i'm just running my app which brings us to this home page and this home page is just a stateful widget returning a blank scaffold so it should just be a blank white app like this and the first thing to do is let's go to our pubspec.yaml and under the dependencies i'm going to add this one so slide to act and this is just the latest version as of today so save it and let's close this once that's finished and let's just get rid of all this and go to the home page so inside the scaffold in the body let's just create it right in the center and you can start typing slide action and you can see it's going to auto import it for us so make sure this is at the top and without doing any customization let's just save this and see what it looks like so this is the default button and looks like we can drag this around so first of all you can see like once i get to the end it doesn't actually do anything so the very important property here you're going to fill out is the submitted so on submit for now i'm just gonna do this and execute nothing but this is where you can put in your method so without even filling this out just having an on submit button will allow us to slide and it sort of executes and finishes it off okay so this is where you could navigate to a different page or like slide to pay and make the payment go through so whatever your app does this is where you would put the method in but in terms of the customization to make this look a little prettier let's play around with it so the first thing i want to do is it's like stuck to the sides too closely so i'm just going to add some padding and this roundness looks pretty good but i tend to like a kind of more sharper edge but it's still rounded off the corners so you guys can control the border radius and if you actually look at the elevation you can see there's a bit of a shadow there which for me i actually don't like having any elevation so i'm just going to say zero so it's just stuck onto the flat design on the bottom and let's just play around with some colors so the important colors you want to play around with is the inner color so let's say the purple and the other one is the outer color so just to see what this is controlling i'm just going to put a jarring red okay so that's the thing at the back so from here is kind of obviously up to your preference on how you want this to look but you guys all know i love my deep purple so let's try to make this look nice with a deep purple color and you guys can change deep purple to whatever color you like so let's say i've got a background like this and then something like this this is looking a lot better and by the way at this point we should also mention this icon it's an arrow but of course you can change this you can see here the slider button icon okay and this wants a widget so you could put anything in here so let's say for example like unlock and so you can change the icon there and for this icon i want to make it like white and this slide to act is the default text so same as this i'm just going to put a const here you can change the text from the default right so it's just requiring a string so let's say slide to unlock okay so you can put any text widget in there and after playing around with this this inner color and outer color controls the slide to unlock as well as this button color but if you want some further customization you can actually use a text style to change the font and the color of the actual text right so what i like to do is to make this white and let's make it a bit bigger right so this looks pretty good and i think you notice like this icon goes upside down which is a cool effect but if you don't want that there's this slider rotate and it's currently true so i can say that's false and this thing will not rotate anymore so just some further customization you can do so you can see how easy it is to import this slide action package and play around with the different properties here like the colors and and how it looks and stuff like that and the important thing like i said outside of the aesthetic is you have to have this on submit function right so here as i said before this is where you want to do something right so whether it's unlocking the phone or like unlocking to a different page you can actually say something else like slide to pay beam if you guys have heard of that app where you pay your friends you they have this as well in the app like slide to pay so just keep that in mind all of this is just for looks and to make it look nice and this on submit is the is the actual method you're going to have to fill out in terms of whatever your app wants to do when you unlock this so hopefully that was easy to understand play around with it and let me know if you have any issues but other than that thanks for watching and i'll catch you guys in the next one peace [Music]

Channel: Mitch Koko

Views: 29,036

Keywords:

Id: B6f5tayCtUU

Length: 7min 41sec (461 seconds)

Published: Thu Jun 16 2022