[ExpansionPanelList] add materialGapSize property in ExpansionPanelList Widget (#123971)
Adds `materialGapSize` property to `ExpansionPanelList` widget.
| `materialGapSize: 0` | `materialGapSize: 16` (default) | `materialGapSize: 30` |
| --- | --- | --- |
|  |  |  |
|  |  |  |
|  |  |  |
|  |  |  |
Fixes: #118167
diff --git a/packages/flutter/lib/src/material/expansion_panel.dart b/packages/flutter/lib/src/material/expansion_panel.dart
index 62c9adf..e994ae8 100644
--- a/packages/flutter/lib/src/material/expansion_panel.dart
+++ b/packages/flutter/lib/src/material/expansion_panel.dart
@@ -171,6 +171,7 @@
this.dividerColor,
this.elevation = 2,
this.expandIconColor,
+ this.materialGapSize = 16.0,
}) : _allowOnlyOnePanelOpen = false,
initialOpenPanelValue = null;
@@ -197,6 +198,7 @@
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 @@
/// {@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 @@
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 @@
);
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));
}
}
diff --git a/packages/flutter/test/material/expansion_panel_test.dart b/packages/flutter/test/material/expansion_panel_test.dart
index b80a3c4..1adbae5 100644
--- a/packages/flutter/test/material/expansion_panel_test.dart
+++ b/packages/flutter/test/material/expansion_panel_test.dart
@@ -1619,4 +1619,90 @@
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);
+ }
+ }
+ });
}
