ExpansionListTile Flutter Customization - flutter

Question

I have to design this expansion tile and I'm having trouble. Please help. The children take the design of the expansion tile.
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xff155cb0),
),
child: ExpansionTile(
title: Text('Select Time Slot',
style: TextStyle(color: Colors.white,fontSize: 15.0)
),
trailing: isExpanded1 ?
Icon(Icons.keyboard_arrow_down,color: Colors.white,size: 33):
Icon(Icons.keyboard_arrow_right,color: Colors.white,size: 33),
onExpansionChanged: (bool expanding) => setState(() => this.isExpanded1 = expanding),
children: <Widget>[
Text(tile1[0]),
],
),
),
But, I am getting this result.
enter image description here

Answer 1

If you are looking for a design this should help. This is not the exact code for the image you shared.
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey),
borderRadius: BorderRadius.all(Radius.circular(20))
),
margin: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
padding: EdgeInsets.all(10),
child: ExpandableNotifier(
child: ScrollOnExpand(
child: ExpansionTile(
title: Text(widgetsCategories[index], style: TextStyle(fontSize: 20),),
children: <Widget>[
Category()
],
),
),
),
);
},
You can also add this plugin for further customization and code like this :
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey),
borderRadius: BorderRadius.all(Radius.circular(20))
),
margin: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
padding: EdgeInsets.all(10),
child: ExpandableNotifier(
child: ScrollOnExpand(
child: ExpandablePanel(
theme: ExpandableThemeData(
iconColor: Theme.of(context).accentColor,
headerAlignment: ExpandablePanelHeaderAlignment.center,
animationDuration: const Duration(milliseconds: 500),
),
header: Center(child: Text(widgetsCategories[index], style: Theme.of(context).textTheme.headline5)),
//collapsed: Text('dhfhkjdfh', softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis,),
expanded: Category(),
),
),
),
);