How to use expansion tile inside a container in Flutter? - android-studio

Question

This is set of expansion tile. Here I want to warp Expansion tile inside a container so that i can give border , shape and shadow to the tile. Also
I want the expanded result as same like this. How can I achieve this. Please help me
I have tried the below pattern. But when I expand I am getting Render overflow error
Container(
height: 80,
width: MediaQuery.of(context).size.width - 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Theme.of(context).hintColor.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5)
],
),
child:
ExpansionTile(
backgroundColor: Colors.white,
trailing: Icon(Icons.arrow_forward_ios_rounded),
initiallyExpanded: false,
title: Text(
'Messages',
style: Theme.of(context)
.textTheme
.subtitle),
children: List.generate(
3, (indexProduct) {
return Text("terwyteuwte");
}),
)
),
please help me..

Answer 1

You can do the following thing
Add the following widgets in ListView() according to your use
class ItemTile extends StatefulWidget {
// final OrderItem orderItem;
// OrderItemTile(this.title);
#override
_ItemTileState createState() => _ItemTileState();
}
class _ItemTileState extends State<ItemTile> {
bool _expanded = false;
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
height: _expanded
? 350
: 100,
child: Card(
elevation: 10,
color: Theme.of(context).canvasColor,
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
children: <Widget>[
ListTile(
title: (Text(
'File',
style: TextStyle(
fontSize: 22, fontWeight: FontWeight.bold),
)),
trailing: IconButton(
icon: _expanded
? Icon(Icons.expand_less)
: Icon(Icons.expand_more),
onPressed: () {
setState(() {
_expanded = !_expanded;
});
}),
),
AnimatedContainer(
duration: Duration(milliseconds: 300),
height: _expanded
? 300
: 0,
width: MediaQuery.of(context).size.width,
child: ItemExpandedTile(),
)
],
),
),
);
}
}
the widget which is shown after expanding
class ItemExpandedTile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Stack(
children: <Widget>[
Positioned(
top: 5,
child: Container(
height: 90,
width: MediaQuery.of(context).size.width - 75,
padding: EdgeInsets.all(10),
decoration: new BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 15.0,
spreadRadius: 0.5,
offset: Offset(
1.0,
1.0,
),
)
],
),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
'Title',
style: TextStyle(
fontSize: 12, fontWeight: FontWeight.bold),
),
],
),
],
),
),
),
],
),
);
}
}
Th Result: