i have a exoansiontile and i want it to be like a box, everything centered, the problem is that if i add a text that is too long, i get the overflow error and i think this is caused by the trailing of the expansion tile. Here is a picture: https://gyazo.com/c29329106dc5dcb162b71b5f41951b67
Here is the code:
ExpansionTile(
trailing: Text(''),
leading: Container(
margin: new EdgeInsets.only(left: 0, top: 10.0, right: 0.0, bottom: 0.0),
child: Image.asset(
'images/food.png'
)),
title: Row(
children: < Widget > [
Padding(
padding: const EdgeInsets.only(right: 0, left: 10, top: 15, bottom: 15),
child: Column(textDirection: TextDirection.ltr, crossAxisAlignment: CrossAxisAlignment.start, children: < Widget > [
Container(
margin: new EdgeInsets.only(left: 0.0, top: 7.0, right: 0.0, bottom: 3.0),
child: Text(
'Food System', textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
)),
Text(
'Customize the food system', textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
)
])),
], ),
children: < Widget > [
Container(
width: 300,
margin: new EdgeInsets.only(left: 10.0, top: 0.0, right: 10.0, bottom: 10.0),
color: Colors.transparent,
child: new Container(
padding: new EdgeInsets.all(20),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: < Widget > [
Container(
margin: new EdgeInsets.only(left: 15.0, top: .0, right: 20.0, bottom: 5.0),
child: Text('Storage', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ),
Center(child: Column(children: < Widget > [
Container(
child: Column(children: < Widget > [
Text('2.4 KG left - 7 Days', style: TextStyle(color: Colors.white, fontSize: 20)),
Text('200 G / Meal - 600 G / Day', style: TextStyle(color: Colors.white, fontSize: 20)),
], ),
margin: new EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 10.0),
)
], )),
Container(
margin: new EdgeInsets.only(left: 18.0, top: .0, right: 20.0, bottom: 5.0),
child: Text('Meal times', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ),
Center(child: Column(children: < Widget > [
Text('1. Breakfast - 8:30 AM', style: TextStyle(color: Colors.white, fontSize: 20)),
Text('2. Lunch - 2:00 PM', style: TextStyle(color: Colors.white, fontSize: 20)),
Text('3. Dinner - 9:15 PM', style: TextStyle(color: Colors.white, fontSize: 20)),
], ))
], ), )
),
Container(
height: 50.0,
width: 300,
margin: new EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0),
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Color(0xff37b9ff), Color(0xff5d3afd)]),
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
)
),
child: Center(child:
Text('Edit', style: TextStyle(color: Colors.white, fontSize: 15))
, )
)
),
]
Update
just add
if you wants to make full customizing on each matrail classes you can flow second way of this answer