ExpansionTile shows children background on animation #107030
Description
Steps to Reproduce
Consider the following widget:
class Temp extends StatefulWidget {
const Temp({Key? key}) : super(key: key);
@override
State<Temp> createState() => _TempState();
}
// stores ExpansionPanel state information
class Item {
Item(bool exp) {
this.isExpanded = exp;
}
late bool isExpanded;
}
List<Item> items = [Item(false), Item(true), Item(true), Item(false)];
class _TempState extends State<Temp> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold(
body: SingleChildScrollView(
child: Container(
child: ExpansionPanelList(
expandedHeaderPadding: EdgeInsets.zero,
expansionCallback: (int index, bool isExpanded) {
setState(() {
items[index].isExpanded = !isExpanded;
});
},
children: [
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text("Test", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700)),
leading: Icon(Icons.info),
minLeadingWidth : 4,
contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
dense:true,
);
},
body: Column(
children: [
ListTile(
title: Text("Test 1", style: TextStyle(fontSize: 16)),
leading: Icon(Icons.handshake_outlined),
minLeadingWidth : 4,
contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
dense:true,
),
ExpansionTile(
title: const Text('Test 2', style: TextStyle(color: Colors.black87),),
leading: Icon(Icons.handshake_outlined, color: Colors.black54,),
trailing: Column(),
children: <Widget>[
ListTile(
dense: true,
tileColor: Color(0xffffeed4),
title: Text('Foo', style: TextStyle (fontSize: 16),),
trailing: SizedBox(
child: Text("foo", style: TextStyle (fontSize: 16),)
),
),
ListTile(
tileColor: Color(0xffffeed4),
title: Text('Bar', style: TextStyle (fontSize: 16),),
dense: true,
trailing: SizedBox(
child: Text("bar", style: TextStyle (fontSize: 16),)
),
),
Container(
height: 10,
color: Color(0xffffeed4),
),
Container(
color: Color(0xffffeed4),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.indigo,
shape: CircleBorder(),
),
child: Icon(
Icons.copy,
color: Colors.white,
),
onPressed: () {},
),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.indigo,
shape: CircleBorder(),
),
child: Icon(
Icons.delete_rounded,
color: Colors.white,
),
onPressed: () {},
),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.indigo,
shape: CircleBorder(),
),
child: Icon(
Icons.info_outline,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
Container(
height: 10,
color: Color(0xffffeed4),
)
],
onExpansionChanged: (bool expanded) {
//setState(() => _customTileExpanded = expanded);
},
),
],
),
isExpanded: items[1].isExpanded,
canTapOnHeader: true
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: null,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
)
);
}
}Actual results:
As you see when ExpansionTile title/header is clicked then children background is visible not only on this ExpansionTile title/header (Test 2) but also on the previous one (Test 1). As a result it is rather ugly.
Expected results:
The background of ExpansionTile children mustn't be visible over ExapnsionTile.
The problem was also discussed on SO