Show your support by subscribing to my blog. Don’t worry it’s free!!!

EID MUBARAK EVERYONE! ❤

I know its too late for that but I was on a vacation and just meeting you guys now so… better late than never. 🙂

Hope you have successfully completed the layout challenge given in part two – many many congratulations for that, you made me proud.

Now we’ll be creating a single item consisting of a simple animation to identify if it is tapped on or not.

Let us examine the app once again and take a closer look on a single item:

An item is composed of a Image and a label grouped together in a Column Widget.

On tapping an item two things happen: The image grows in size. A border appears around the label

When tapped again the item is restored to its original form

And these are exactly the steps we’ll be following.

Lets start off by creating the onTap animation. It’s super simple.

For this we’ll be needing a stateless widget i.e. simply a widget that possesses a changeable state in this case the size of the image.

class Item extends StatefulWidget { @override _ItemState createState() => _ItemState(); } class _ItemState extends State<Item> { var size = 10; @override Widget build(BuildContext context) { return GestureDetector( child: AnimatedContainer( width: size, height: size, duration: Duration(milliseconds: 100), child: Container( color: Colors.blue, ), ), onTap: (){ setState(() { size += 10; }); }, ); } }

What I have done here is used an animated container inside a gesture detector widget and also instead of using the image right away I’m using a blue container (just to keep it simple) with a variable height and width.

So, when a tap gesture is detected by the Gesture Detector it calls out the set state method changing the state of the widget i.e increasing it’s size by 10.

Whereas, the animated container takes care of the animation giving a smooth transition from smaller to larger size in the specified duration.

Now the only problem is that our container keeps increasing in size on every tap when we need it to toggle between big and small.

To achieve that rather than changing the size of the container on tap we’ll be using a Boolean variable that becomes true or false on tap.

Than we’ll use the conditional statement to change the size of the container.

class Item extends StatefulWidget { Item({Key key, this.size}) : super(key: key); final double size; @override _ItemState createState() => _ItemState(); } class _ItemState extends State<Item> { var isPressed = false; @override Widget build(BuildContext context) { return GestureDetector( child: AnimatedContainer( width: isPressed? widget.size + 10 : widget.size, height: isPressed? widget.size + 10 : widget.size, duration: Duration(milliseconds: 100), child: Container( color: Colors.blue, ), ), onTap: (){ setState(() { if (isPressed) isPressed = false; else isPressed = true; }); }, ); } }

Note that I am passing the size via a constructor in order to make the class flexible as we have item’s of different sizes. (Reusable Code)

That’s it. Now our container grows or shrinks on tapping.

Finally we’ll just replace the container with an image that we added when we set up the application.

Image( image: AssetImage('assets/' + widget.type + '.png'), ),

Guess why we are doing the widget.type constructor thing? 🙂

For today’s code and research challenge I want you to create the label along with the appearing and disappearing of it’s border. And yes don’t forget to keep it flexible… 😉

If you have any queries feel free to reach out in the comments below I’ll be happy to help.

Cheers. 🙂

DON’T FORGET TO LIKE AND SUBSCRIBE TO KEEP UPDATED ❤