Flutter: Card widget with Dropdown - flutter

Question

When I click on my card widget, I want it to be dropdown according to my upcoming data. I have text and icon on my card. I added Inkwell to be clickable. but as I click, I want my coming data to be added down. Is this possible?
child: Card(
child: InkWell(
onTap: () { });
},
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0),
child: Icon(
Icons.favorite,
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0),
child: Text(
snapshot.text,
style: TextStyle(fontSize: 16),
),
),
],
),
),
),
I have a list like this,
and when an item is clicked, I want related subtext as below. For example, I want 2 companies related to the country to come. Like the card open. (Sorry for the bad visuals. i did it quickly:))

Answer 1

It is indeed possible, the whole idea is based on this theory:
Your country card and it's associated company card should be a different StatefulWidget, which will be controlled by the boolean
Please note: I have given a very basic representation of the view, you can play with the UI and make it look like your own desired UI
This is your card view should look like:
class CardWidget extends StatefulWidget {
// right now it only accepts title, but you can add more
// arguments to be accepted by this widget
CardWidget({Key key, this.title}) : super(key: key);
final String title;
#override
_CardWidgetState createState() => _CardWidgetState();
}
class _CardWidgetState extends State<CardWidget> {
// responsible for toggle
bool _showData = false;
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10.0),
// list card containing country name
GestureDetector(
onTap: (){
setState(() => _showData = !_showData);
},
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(0.0, 3.0))]
),
child: Padding(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// add your other icon here
Text(widget.title)
]
)
)
)
),
// this is the company card which is toggling based upon the bool
_showData ? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: ['Kia','Samsung'].map((e){
// make changes in the UI here for your company card
return Card(child: Text(e));
}).toList()
) : SizedBox() // else blank
]
);
}
}
Here how I am calling the CardWidget in the main UI
// this is dummy data, you can play with the data and the UI
Column(
children: ['Korea', 'China', 'Japan', 'USA', 'India'].map((country){
// returning the CardWidget passing only title
return CardWidget(title: country);
}).toList()
)
Result