Flutter Widgets | GestureDetector & InkWell

[Music] basic use of gesture detector and inkwell widgets let's clear all the widgets from the body and also remove the act bar so we can see the codes for this video widgets more clearly in the recent video of buttons i introduce a switch that has touch properties now what if we want any widgets to have tapping or pressing property guess what flutter gave us exactly what we need that is gesture detector and ink well though we will see more of them in the future these two are the most commonly used to demonstrate gesture detector and inkwell widgets let's create two container widgets within a column and take some time to decorate our container and copy same widget as the second container [Music] along with these two widgets i would like to introduce center widget i would not be making separate video for this widget as its only purpose is to center a child widget within the center of the experiment widget see it yourself in the simulator to understand how it works [Music] now let's wrap the containers with each one of these which is one with gesture detector and other would think well you all might be thinking why are these two different widgets though they both function the same way well there's a slight difference that is inkwell has splash color around the child widget on tapping keep on watching you will see it what i am talking about and also gesture detector has way more tapping properties than ink well though most of them are not really commonly used let's convert our stateless widget to staple widget to test out the typing features of these two widgets though there are many gesture properties i will be showing only two that is double tap property and on tap properties almost all of them are pretty similar and are not really necessary i would still recommend you to try out the rest let's create a list of color for the inkwell widget we will be changing the color of the container randomly from the list of color we created within inkwell by using the double tap property which takes an anonymous function now create an integer variable to randomly pick an index from the color list and create a void function for it that will allow us to change the color of the container randomly on double tapping [Music] do [Music] now let's call the function within the double tap property of inkwell and list of colors and container color property providing the index value and on the ontap property of gesture detector let's create a new screen or page that will allow us to navigate to the new screen on calling the [Music] function [Music] as you can see the color of the container with an inkwell changes its color on double tapping the container now let's write the syntax that will navigate us to the new screen on typing the container within gesture detector [Music] as you can see on taping a container within gesture detector it navigate us to the new screen [Music] now let's change color of splash effect in the inkwell widget using splash color property so you can clearly see it in the simulator and understand what i was talking about earlier that's all for today's widgets thank you for watching please support my channel by clicking on subscribe and like button good day guys you

Channel: FLUTTER WIDGETS

Views: 19,104

Keywords:

Id: OdpvgOUDLxI

Length: 6min 21sec (381 seconds)

Published: Thu Apr 08 2021