Flutter:How to remove elevation from ExpansionPanelList? - flutter

Question

I was trying to list dropdown like widget, but luckily found the expansion panel list widget to get my desired UX to feel.
So, I am using ExpansionPanelList in my flutter app, but don't require the default elevation/border-shadow it comes with.
I have no idea how to remove it, so as to make it look part of the body rather than an elevated container.
Currently looking like this:
Following is my code:
class _PracticetestComp extends State<Practicetest> {
var listofpracticetest;
List<Item> _data = [
Item(
headerValue: 'Previous Question Papers',
expandedValue: '',
)
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffF8FDF7),
appBar: AppBar(
backgroundColor: Color(0xffF8FDF7), // status bar color
brightness: Brightness.light,
elevation: 0.0,
leading: Container(
margin: EdgeInsets.only(left: 17),
child: RawMaterialButton(
onPressed: () {
Navigator.pushNamed(context, '/');
},
child: new Icon(
Icons.keyboard_backspace,
color: Colors.red[900],
size: 25.0,
),
shape: new CircleBorder(),
elevation: 4.0,
fillColor: Colors.white,
padding: const EdgeInsets.all(5.0),
),
),
),
body: Container(
// height: 200,
margin: EdgeInsets.only(top: 40),
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 30),
child: Theme(
data: Theme.of(context)
.copyWith(cardColor: Color(0xffF8FDF7)),
child: _buildPanelPreviousPapers()))
],
)
],
),
));
}
Widget _buildPanelPreviousPapers() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: Container(
child: ListTile(
leading: Text(
'Alegbra',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
),
),
),
),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}
// stores ExpansionPanel state information
class Item {
Item({
this.expandedValue,
this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}

Answer 1

wrap your entire expansion widget child inside Material widget and change the elevation based on expansion child is expanded or not with method
Material(
elevation: isSelected ? 4 : 0,
child: ExpansionTile(
onExpansionChanged:(value){
isSelected=value;
setState(){};
},
title: getExpantionTitle(context),
children: getChildrentList(),
),
),
),
in case if you don't like divider in ExpansionTile tile do some thing like this
final theme = Theme.of(context).copyWith(dividerColor:
Colors.transparent);
//use as a child
child:Theme(data: theme, child: ExpansionTile(...));

Answer 2

Just add this line:
ExpansionPanelList(
elevation: 0, // this line
expansionCallback: ...

Answer 3

First, it isn't recommended to not use elevation for ExpansionPanelList according to Material design spec.
However, if you really want to do that, there are 2 solutions for you, either you create your own custom ExpansionPanelList, or get ready to add couple of lines to the source file. I'm providing you the latter solution.
Open expansion_panel.dart file, go to the build() method of _ExpansionPanelListState and make following changes
return MergeableMaterial(
hasDividers: true,
children: items,
elevation: 0, // 1st add this line
);
Now open mergeable_material.dart file, navigate to _paintShadows method of _RenderMergeableMaterialListBody class and make following changes:
void _paintShadows(Canvas canvas, Rect rect) {
// 2nd add this line
if (boxShadows == null) return;
for (final BoxShadow boxShadow in boxShadows) {
final Paint paint = boxShadow.toPaint();
canvas.drawRRect(kMaterialEdges[MaterialType.card].toRRect(rect), paint);
}
}
Screenshot:

Answer 4

Unfortunately ExpansionPanelList elevation hardcoded, but you can make same widget with ExpansionTile, check this dartpad example.
https://dartpad.dev/0412a5ed17e28af4a46f053ef0f7a5c2

Answer 5

I would wrap it in a ClipRect.
Widget _buildPanelPreviousPapers() {
final panel = ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: Container(
child: ListTile(
leading: Text(
'Alegbra',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
),
),
),
),
isExpanded: item.isExpanded,
);
}).toList(),
);
return ClipRect(child: panel);
}
To alter the default card background color add a Theme override:
return ClipRect(
child: Theme(
data: Theme.of(context).copyWith(cardColor: Colors.pink),
child: child,
),
);

Answer 6

I was able to set elevation in the constructor (default value is 2), perhaps this is a recent API change:
https://api.flutter.dev/flutter/material/ExpansionPanelList/ExpansionPanelList.html