How can i add expansion tile widgets inside GridView.builder() in flutter? - flutter

Question

I was working on grid views and got stuck when trying to insert expansion tiles inside the grid view.The problem that i am facing is, when tring to expand the tile, i am getting an overflow error. Is there any way to use expansion tile inside grid view in such a way that when one of the tiles is expanded, the other tiles moves down without causing any overflow error ?
Here's my code snippet :
Expanded(
child: GridView.builder(
itemCount: 21,
physics: BouncingScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: (1 / 0.46),
crossAxisCount:
(MediaQuery.of(context).orientation ==
Orientation.landscape)
? 4
: 1,
),
itemBuilder:
(BuildContext context, int index) => Card(
elevation: 6.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: ExpansionTile(
// collapsedBackgroundColor: Colors.white,
// backgroundColor: Colors.white,
trailing: FadeInImage.memoryNetwork(
image:
'https://picsum.photos/250?image=123',
placeholder: kTransparentImage,
),
title: Container(
child: Text(
'Pencil Pen Test Long String Again Test Long String',
),
),
subtitle: Padding(
padding:
const EdgeInsets.only(top: 8.0),
child: Text(
'\u{20B9} $myAmount',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Text('Price 1 :' +
' \u{20B9} $myAmount'),
),
Align(
alignment: Alignment.topLeft,
child: Text('Price 2 :' +
' \u{20B9} $myAmount'),
),
Align(
alignment: Alignment.topLeft,
child: Text('Price 3 :' +
' \u{20B9} $myAmount'),
),
SizedBox(
height: 6.0,
),
Column(
children: [
Container(
padding:
EdgeInsets.all(20.0),
child: Align(
alignment:
Alignment.centerLeft,
child: Text(
'TAGS',
style: TextStyle(
color: Colors.white,
decoration:
TextDecoration
.underline,
),
),
),
),
Row(
children: [
Expanded(
child: InputChip(
onDeleted: () {},
onPressed: () {},
label: Text('Chip a'),
avatar: Icon(
Icons.ac_unit),
),
),
Expanded(
child: InputChip(
onDeleted: () {},
onPressed: () {},
label: Text('Chip b'),
avatar: Icon(Icons
.e_mobiledata),
),
),
Expanded(
child: InputChip(
onDeleted: () {},
onPressed: () {},
label: Text('Chip c'),
avatar: Icon(Icons
.format_align_justify_outlined),
),
),
],
),
],
),
Divider(),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Row(
children: [
Text(
'In Hand : ',
style: TextStyle(
fontWeight:
FontWeight.bold,
color:
Theme.of(context)
.colorScheme
.secondary,
),
),
],
),
Row(
children: [
IconButton(
onPressed: () {
displayBottomSheetAddInventory(
context);
},
icon: Icon(
Icons.add_circle),
),
IconButton(
onPressed: () {
displayBottomSheetSubtractInventory(
context);
},
icon: Icon(Icons
.remove_circle),
),
IconButton(
onPressed: () {
displayBottomSheetEditInventory(
context);
},
icon: Icon(
Icons.edit,
),
),
],
),
],
)
],
),
)
],
),
),
),
),
),
This is what i'm getting:
And this is want i want : (The other tiles should be below this tile and readjust when collapsed.)
Can anyone help ?