CODEWITHSUNDEEP
flutterlistviewanimation
Book Teeranai
Book Teeranai

Reputation: 111

Make widget shows on tapping another widget Flutter

I'm working on a Flutter app that shows smart home devices in each room that looks something like this

enter image description here

When I tap on the picture of the room, I want to make the part in the red circle appear right below it but I have no idea how is this kind of animation is called.

I'm using ListView for the part in the circle and InkWell for the picture.

Thank you in advance

UPDATE After following the suggestion from the comments (thank you) I found this package https://pub.dev/packages/expandable super easy to use, very intuitive. I would recommend anyone that's trying to create this expandable card to check it out

Upvotes: 0

Views: 287

Answers (2)

MickaelHrndz
MickaelHrndz

Reputation: 3832

I would suggest you put the devices list in an AnimatedContainer like that :

AnimatedContainer(
   height: isKitchenOpened ? 400 : 0,
   duration: Duration(milliseconds: 300),
   child: Placeholder(),
)

isKitchenOpened being a boolean that you toggle when tapping the kitchen picture.

You can also change the animation curve, like curve: Curves.decelerate

Upvotes: 1

king mort
king mort

Reputation: 1473

Please check this out... There are several solutions here to reaching your goal How to make Expandable card?

Upvotes: 1

Related Questions