From 835b892d7fbe808be92d5eeee7b31c7bb7a3b1eb Mon Sep 17 00:00:00 2001 From: Tirth Date: Sun, 7 May 2023 01:30:22 +0530 Subject: [PATCH] [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 --- .../lib/src/material/expansion_panel.dart | 12 ++- .../test/material/expansion_panel_test.dart | 86 +++++++++++++++++++ 2 files changed, 96 insertions(+), 2 deletions(-) diff --git a/packages/flutter/lib/src/material/expansion_panel.dart b/packages/flutter/lib/src/material/expansion_panel.dart index 62c9adf328..e994ae85c9 100644 --- a/packages/flutter/lib/src/material/expansion_panel.dart +++ b/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 createState() => _ExpansionPanelListState(); } @@ -348,7 +356,7 @@ class _ExpansionPanelListState extends State { for (int index = 0; index < widget.children.length; index += 1) { if (_isChildExpanded(index) && index != 0 && !_isChildExpanded(index - 1)) { - items.add(MaterialGap(key: _SaltedKey(context, index * 2 - 1))); + items.add(MaterialGap(key: _SaltedKey(context, index * 2 - 1), size: widget.materialGapSize)); } final ExpansionPanel child = widget.children[index]; @@ -422,7 +430,7 @@ class _ExpansionPanelListState extends State { ); if (_isChildExpanded(index) && index != widget.children.length - 1) { - items.add(MaterialGap(key: _SaltedKey(context, index * 2 + 1))); + items.add(MaterialGap(key: _SaltedKey(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 b80a3c45bc..1adbae5b3a 100644 --- a/packages/flutter/test/material/expansion_panel_test.dart +++ b/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( + 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( + 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().length, 1); + expect(mergeableMaterial.children.whereType().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().length, 1); + expect(mergeableMaterial2.children.whereType().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().length, 1); + expect(mergeableMaterial3.children.whereType().length, 2); + for (final MergeableMaterialItem e in mergeableMaterial3.children) { + if (e is MaterialGap) { + expect(e.size, 16); + } + } + }); }