Make widget shows on tapping another widget Flutter

Question

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

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

Should it be at the bottom of the screen... If so I would recommend a MODALBOTTOMSHEET. — king mort, Jul 17 '20 at 15:34
It should appear right below the picture that has been tapped. Like if I tap the bedroom, the listview should appear between bedroom and kitchen. — Book Teeranai, Jul 17 '20 at 15:37

score 1 · Answer 1 · answered Jul 17 '20 at 15:54

1

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

answered Jul 17 '20 at 15:54

king mort

1,423
8
12

score 1 · Answer 2 · answered Jul 17 '20 at 15:58

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

Make widget shows on tapping another widget Flutter

2 Answers2