Repository: flutter
Issue: ExpansionTile shows children background on animation
Labels: framework,f: material design,has reproducible steps,P3,found in release: 3.0,found in release: 3.1,workaround available,team-design,triaged-design

## Steps to Reproduce

Consider the following widget:

```dart

    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:** <!-- what did you see? -->

[![enter image description here][1]][1]

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. 

  [1]: https://i.stack.imgur.com/O8ADo.gif

**Expected results:** <!-- what did you want to see? -->

The background of `ExpansionTile` children mustn't be visible over `ExapnsionTile`.

The problem was also discussed on [SO](https://stackoverflow.com/questions/72828518/how-to-remove-children-background-color-from-expansiontile-title-on-animation)