fix: Make YaruExpansionPanel build lazily

Ref #814

example/lib/pages/expansion_panel_page.dart

@@ -6,32 +6,26 @@ class ExpansionPanelPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return YaruScrollViewUndershoot.builder(
-      builder: (context, controller) {
-        return SingleChildScrollView(
-          controller: controller,
-          child: Padding(
-            padding: const EdgeInsets.all(kYaruPagePadding),
-            child: YaruExpansionPanel(
-              width: 500,
-              headers: List.generate(
-                10,
-                (index) => Text(
-                  'Header $index',
-                  style: Theme.of(context).textTheme.bodyLarge,
-                ),
-              ),
-              children: List.generate(
-                10,
-                (index) => Padding(
-                  padding: const EdgeInsets.all(40.0),
-                  child: Text('Child $index'),
-                ),
-              ),
-            ),
+    return Padding(
+      padding: const EdgeInsets.all(kYaruPagePadding),
+      child: YaruExpansionPanel(
+        width: 500,
+        height: 500,
+        headers: List.generate(
+          10,
+          (index) => Text(
+            'Header $index',
+            style: Theme.of(context).textTheme.bodyLarge,
           ),
-        );
-      },
+        ),
+        children: List.generate(
+          10,
+          (index) => Padding(
+            padding: const EdgeInsets.all(40.0),
+            child: Text('Child $index'),
+          ),
+        ),
+      ),
     );
   }
 }

example/macos/Runner.xcodeproj/project.pbxproj

@@ -203,7 +203,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {

example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

lib/src/widgets/yaru_expansion_panel.dart

@@ -4,34 +4,85 @@ import 'package:yaru/constants.dart';
 import 'package:yaru/widgets.dart';
 
 class YaruExpansionPanel extends StatefulWidget {
+  /// Takes two lists of [children] and [headers]
+  /// and wraps them inside a [ListView] of [YaruExpandable]s
+  /// surrounded by a [YaruBorderContainer]
   const YaruExpansionPanel({
     super.key,
     required this.children,
     this.borderRadius =
         const BorderRadius.all(Radius.circular(kYaruContainerRadius)),
+    this.border,
     required this.headers,
     this.width,
     this.height,
     this.padding,
+    this.margin,
     this.expandIconPadding = const EdgeInsets.all(10),
     this.headerPadding = const EdgeInsets.only(left: 20),
     this.color,
     this.placeDividers = true,
     this.expandIcon,
-  });
+    this.shrinkWrap = false,
+    this.scrollPhysics = const ClampingScrollPhysics(),
+    this.collapsOnExpand = true,
+  }) : assert(headers.length == children.length);
+
+  /// A list of [Widget]s
+  /// where each child is put it in a [YaruExpandable] as its child.
+  /// The length mus be equal to the length of the [headers]
 
   final List<Widget> children;
+
+  /// A list of [Widget]s
+  /// where each element is put it a [YaruExpandable] as its header.
+  /// The length mus be equal to the length of the [children]
   final List<Widget> headers;
+
+  /// The [BorderRadius] forwarded to [YaruBorderContainer]
   final BorderRadius borderRadius;
+
+  /// The [BoxBorder] forwarded to [YaruBorderContainer]
+  final BoxBorder? border;
+
+  /// The width, which is forwarded to [YaruBorderContainer]
   final double? width;
+
+  /// The height, forwarded to [YaruBorderContainer]
   final double? height;
+
+  /// [EdgeInsetsGeometry] forwarded as the padding to [YaruBorderContainer]
   final EdgeInsetsGeometry? padding;
+
+  /// [EdgeInsetsGeometry] forwarded as the margin to [YaruBorderContainer]
+  final EdgeInsetsGeometry? margin;
+
+  /// [EdgeInsetsGeometry] forwarded to each header
   final EdgeInsetsGeometry expandIconPadding;
+
+  /// [EdgeInsetsGeometry] forwarded to each header
   final EdgeInsetsGeometry headerPadding;
+
+  /// The [Color] forwarded to [YaruBorderContainer]
   final Color? color;
+
+  /// Defines if a [Divider] follows each [YaruExpandable]
+  /// in the [ListView]
   final bool placeDividers;
+
+  /// The [Widget] used as the icon to expand a [YaruExpandable]
   final Widget? expandIcon;
 
+  /// Forwarded to the internal [ListView]
+  final bool shrinkWrap;
+
+  /// Forwarded to the internal [ListView]
+  final ScrollPhysics scrollPhysics;
+
+  /// Defines if all other [YaruExpandable]s should collapse
+  /// if one expands.
+  final bool collapsOnExpand;
+
   @override
   State<YaruExpansionPanel> createState() => _YaruExpansionPanelState();
 }
@@ -51,46 +102,62 @@ class _YaruExpansionPanelState extends State<YaruExpansionPanel> {
     assert(widget.children.length == widget.headers.length);
 
     return YaruBorderContainer(
+      border: widget.border,
+      borderRadius: widget.borderRadius,
       color: widget.color,
       width: widget.width,
       height: widget.height,
       padding: widget.padding,
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          for (int index = 0; index < widget.children.length; index++)
-            Column(
-              children: [
-                YaruExpandable(
-                  expandIcon: widget.expandIcon,
-                  expandIconPadding: widget.expandIconPadding,
-                  isExpanded: _expandedStore[index],
-                  onChange: (_) {
-                    setState(() {
-                      _expandedStore[index] = !_expandedStore[index];
-
-                      for (var n = 0; n < _expandedStore.length; n++) {
-                        if (n != index && _expandedStore[index] == true) {
-                          _expandedStore[n] = false;
-                        }
-                      }
-                    });
-                  },
-                  header: Padding(
-                    padding: widget.headerPadding,
-                    child: widget.headers[index],
-                  ),
-                  child: widget.children[index],
-                ),
-                if (index != widget.children.length - 1 && widget.placeDividers)
-                  const Padding(
+      margin: widget.margin,
+      child: widget.placeDividers
+          ? ListView.separated(
+              shrinkWrap: widget.shrinkWrap,
+              physics: widget.scrollPhysics,
+              itemCount: widget.children.length,
+              itemBuilder: _itemBuilder,
+              separatorBuilder: (context, index) {
+                if (index != widget.children.length - 1) {
+                  return const Padding(
                     padding: EdgeInsets.symmetric(vertical: 1),
                     child: Divider(),
-                  ),
-              ],
+                  );
+                } else {
+                  return const SizedBox.shrink();
+                }
+              },
+            )
+          : ListView.builder(
+              shrinkWrap: widget.shrinkWrap,
+              physics: widget.scrollPhysics,
+              itemCount: widget.children.length,
+              itemBuilder: _itemBuilder,
             ),
-        ],
+    );
+  }
+
+  Widget? _itemBuilder(context, index) {
+    return YaruExpandable(
+      expandIcon: widget.expandIcon,
+      expandIconPadding: widget.expandIconPadding,
+      isExpanded: _expandedStore[index],
+      onChange: widget.collapsOnExpand
+          ? (_) {
+              setState(() {
+                _expandedStore[index] = !_expandedStore[index];
+
+                for (var n = 0; n < _expandedStore.length; n++) {
+                  if (n != index && _expandedStore[index] == true) {
+                    _expandedStore[n] = false;
+                  }
+                }
+              });
+            }
+          : null,
+      header: Padding(
+        padding: widget.headerPadding,
+        child: widget.headers[index],
       ),
+      child: widget.children[index],
     );
   }
 }