[ExpansionPanelList] add materialGapSize property in ExpansionPanelList Widget (#123971)

Adds `materialGapSize` property to `ExpansionPanelList` widget.

| `materialGapSize: 0` | `materialGapSize: 16` (default) | `materialGapSize: 30` |
| --- | --- | --- |
| ![screenshot_1680450783](https://user-images.githubusercontent.com/13456345/229366131-8dd105cd-6371-4852-b57b-5900e3dbd203.png) | ![screenshot_1680453525](https://user-images.githubusercontent.com/13456345/229366640-e2ae5f95-0cd6-4694-b8ff-0de7fb7c8554.png) | ![screenshot_1680450910](https://user-images.githubusercontent.com/13456345/229366742-3121331b-b22e-46a1-bdfa-20b5663cbe2b.png) |
| ![screenshot_1680450785](https://user-images.githubusercontent.com/13456345/229366133-bf345914-9d74-4dcc-afc4-a6a9ccca13ab.png) | ![screenshot_1680453527](https://user-images.githubusercontent.com/13456345/229366644-bfff8e4f-8a66-4419-90b8-6a16442b7157.png) | ![screenshot_1680450912](https://user-images.githubusercontent.com/13456345/229366745-364b1a1e-ed2c-4463-a74d-d8e94bf509b9.png) |
| ![screenshot_1680450787](https://user-images.githubusercontent.com/13456345/229366138-3f6280f0-e58a-4621-aced-c7eee2077ef8.png) | ![screenshot_1680453530](https://user-images.githubusercontent.com/13456345/229366648-3805db23-29b0-46a3-82ce-92688e65f0fd.png) | ![screenshot_1680450914](https://user-images.githubusercontent.com/13456345/229366747-73d46f9c-3edc-4197-8f02-651ff8499323.png) |
| ![screenshot_1680450789](https://user-images.githubusercontent.com/13456345/229366140-4ff8572c-8d06-4985-a697-3af0ce0e5743.png) | ![screenshot_1680453532](https://user-images.githubusercontent.com/13456345/229366651-88af37ac-7503-4abc-b6a6-d8556a583871.png) | ![screenshot_1680450916](https://user-images.githubusercontent.com/13456345/229366749-0db156b0-6b53-4ef2-9699-0d3e8704433b.png) |

Fixes: #118167

packages/flutter/lib/src/material/expansion_panel.dart

@@ -171,6 +171,7 @@ class ExpansionPanelList extends StatefulWidget {
     this.dividerColor,
     this.elevation = 2,
     this.expandIconColor,
+    this.materialGapSize = 16.0,
   }) : _allowOnlyOnePanelOpen = false,
        initialOpenPanelValue = null;
 
@@ -197,6 +198,7 @@ class ExpansionPanelList extends StatefulWidget {
     this.dividerColor,
     this.elevation = 2,
     this.expandIconColor,
+    this.materialGapSize = 16.0,
   }) : _allowOnlyOnePanelOpen = true;
 
   /// The children of the expansion panel list. They are laid out in a similar
@@ -253,6 +255,12 @@ class ExpansionPanelList extends StatefulWidget {
   /// {@macro flutter.material.ExpandIcon.color}
   final Color? expandIconColor;
 
+  /// Defines the [MaterialGap.size] of the [MaterialGap] which is placed
+  /// between the [ExpansionPanelList.children] when they're expanded.
+  ///
+  /// Defaults to `16.0`.
+  final double materialGapSize;
+
   @override
   State<StatefulWidget> createState() => _ExpansionPanelListState();
 }
@@ -348,7 +356,7 @@ class _ExpansionPanelListState extends State<ExpansionPanelList> {
 
     for (int index = 0; index < widget.children.length; index += 1) {
       if (_isChildExpanded(index) && index != 0 && !_isChildExpanded(index - 1)) {
-        items.add(MaterialGap(key: _SaltedKey<BuildContext, int>(context, index * 2 - 1)));
+        items.add(MaterialGap(key: _SaltedKey<BuildContext, int>(context, index * 2 - 1), size: widget.materialGapSize));
       }
 
       final ExpansionPanel child = widget.children[index];
@@ -422,7 +430,7 @@ class _ExpansionPanelListState extends State<ExpansionPanelList> {
       );
 
       if (_isChildExpanded(index) && index != widget.children.length - 1) {
-        items.add(MaterialGap(key: _SaltedKey<BuildContext, int>(context, index * 2 + 1)));
+        items.add(MaterialGap(key: _SaltedKey<BuildContext, int>(context, index * 2 + 1), size: widget.materialGapSize));
       }
     }
 

packages/flutter/test/material/expansion_panel_test.dart

@@ -1619,4 +1619,90 @@ void main() {
     expect((mergeableMaterial.children.first as MaterialSlice).color, firstPanelColor);
     expect((mergeableMaterial.children.last as MaterialSlice).color, secondPanelColor);
   });
+
+  testWidgets('ExpansionPanelList.materialGapSize defaults to 16.0', (WidgetTester tester) async {
+    await tester.pumpWidget(MaterialApp(
+      home: SingleChildScrollView(
+        child: ExpansionPanelList(
+          children: <ExpansionPanel>[
+            ExpansionPanel(
+              canTapOnHeader: true,
+              body: const SizedBox.shrink(),
+              headerBuilder: (BuildContext context, bool isExpanded) {
+                return const SizedBox.shrink();
+              },
+            )
+          ],
+        ),
+      ),
+    ));
+
+    final ExpansionPanelList expansionPanelList = tester.widget(find.byType(ExpansionPanelList));
+    expect(expansionPanelList.materialGapSize, 16);
+  });
+
+  testWidgets('ExpansionPanelList respects materialGapSize', (WidgetTester tester) async {
+    Widget buildWidgetForTest({double materialGapSize = 16}) {
+      return MaterialApp(
+        home: SingleChildScrollView(
+          child: ExpansionPanelList(
+            materialGapSize: materialGapSize,
+            children: <ExpansionPanel>[
+              ExpansionPanel(
+                isExpanded: true,
+                canTapOnHeader: true,
+                body: const SizedBox.shrink(),
+                headerBuilder: (BuildContext context, bool isExpanded) {
+                  return const SizedBox.shrink();
+                },
+              ),
+              ExpansionPanel(
+                canTapOnHeader: true,
+                body: const SizedBox.shrink(),
+                headerBuilder: (BuildContext context, bool isExpanded) {
+                  return const SizedBox.shrink();
+                },
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildWidgetForTest(materialGapSize: 0));
+    await tester.pumpAndSettle();
+    final MergeableMaterial mergeableMaterial = tester.widget(find.byType(MergeableMaterial));
+    expect(mergeableMaterial.children.length, 3);
+    expect(mergeableMaterial.children.whereType<MaterialGap>().length, 1);
+    expect(mergeableMaterial.children.whereType<MaterialSlice>().length, 2);
+    for (final MergeableMaterialItem e in mergeableMaterial.children) {
+      if (e is MaterialGap) {
+        expect(e.size, 0);
+      }
+    }
+
+    await tester.pumpWidget(buildWidgetForTest(materialGapSize: 20));
+    await tester.pumpAndSettle();
+    final MergeableMaterial mergeableMaterial2 = tester.widget(find.byType(MergeableMaterial));
+    expect(mergeableMaterial2.children.length, 3);
+    expect(mergeableMaterial2.children.whereType<MaterialGap>().length, 1);
+    expect(mergeableMaterial2.children.whereType<MaterialSlice>().length, 2);
+    for (final MergeableMaterialItem e in mergeableMaterial2.children) {
+      if (e is MaterialGap) {
+        expect(e.size, 20);
+      }
+    }
+
+    await tester.pumpWidget(buildWidgetForTest());
+    await tester.pumpAndSettle();
+    final MergeableMaterial mergeableMaterial3 = tester.widget(find.byType(MergeableMaterial));
+    expect(mergeableMaterial3.children.length, 3);
+    expect(mergeableMaterial3.children.whereType<MaterialGap>().length, 1);
+    expect(mergeableMaterial3.children.whereType<MaterialSlice>().length, 2);
+    for (final MergeableMaterialItem e in mergeableMaterial3.children) {
+      if (e is MaterialGap) {
+        expect(e.size, 16);
+      }
+    }
+  });
 }