YaruMasterDetailPage: replace "page item" with indexed builders

example/lib/main.dart

@@ -49,6 +49,10 @@ class _HomeState extends State<Home> {
       iconBuilder: (context, selected) => const Icon(YaruIcons.settings),
     );
 
+    final pageItems = _filteredItems.isNotEmpty
+        ? _filteredItems
+        : [configItem] + examplePageItems;
+
     return MaterialApp(
       title: 'Yaru Widgets Factory',
       scrollBehavior: TouchMouseStylusScrollBehavior(),
@@ -60,9 +64,13 @@ class _HomeState extends State<Home> {
           : YaruMasterDetailPage(
               leftPaneWidth: 280,
               previousIconData: YaruIcons.go_previous,
-              pageItems: _filteredItems.isNotEmpty
-                  ? _filteredItems
-                  : [configItem] + examplePageItems,
+              length: pageItems.length,
+              iconBuilder: (context, index, selected) =>
+                  pageItems[index].iconBuilder(context, selected),
+              titleBuilder: (context, index, selected) =>
+                  pageItems[index].titleBuilder(context),
+              pageBuilder: (context, index) =>
+                  pageItems[index].builder(context),
               appBar: AppBar(
                 title: const Text('Example'),
               ),

lib/src/pages/layouts/yaru_landscape_layout.dart

@@ -1,26 +1,37 @@
 import 'package:flutter/material.dart';
 import 'package:yaru/yaru.dart';
 
-import 'yaru_page_item.dart';
+import 'yaru_master_detail_page.dart';
 import 'yaru_page_item_list_view.dart';
 
 class YaruLandscapeLayout extends StatefulWidget {
   /// Creates a landscape layout
   const YaruLandscapeLayout({
     super.key,
+    required this.length,
     required this.selectedIndex,
-    required this.pageItems,
+    required this.iconBuilder,
+    required this.titleBuilder,
+    required this.pageBuilder,
     required this.onSelected,
     required this.leftPaneWidth,
     this.appBar,
   });
 
+  /// The total number of pages.
+  final int length;
+
   /// Current index of the selected page.
   final int selectedIndex;
 
-  /// Creates horizontal array of pages.
-  /// All the `children` will be of type [YaruPageItem]
-  final List<YaruPageItem> pageItems;
+  /// A builder that is called for each page to build its icon.
+  final YaruMasterDetailBuilder iconBuilder;
+
+  /// A builder that is called for each page to build its title.
+  final YaruMasterDetailBuilder titleBuilder;
+
+  /// A builder that is called for each page to build its content.
+  final IndexedWidgetBuilder pageBuilder;
 
   /// Callback that returns an index when the page changes.
   final ValueChanged<int> onSelected;
@@ -68,11 +79,11 @@ class _YaruLandscapeLayoutState extends State<YaruLandscapeLayout> {
                 if (widget.appBar != null)
                   Expanded(
                     child: AppBar(
-                      title: widget.pageItems[
-                              widget.pageItems.length > _selectedIndex
-                                  ? _selectedIndex
-                                  : 0]
-                          .titleBuilder(context),
+                      title: widget.titleBuilder(
+                        context,
+                        widget.length > _selectedIndex ? _selectedIndex : 0,
+                        false,
+                      ),
                     ),
                   )
               ],
@@ -95,9 +106,11 @@ class _YaruLandscapeLayoutState extends State<YaruLandscapeLayout> {
                       ),
                     ),
                     child: YaruPageItemListView(
+                      length: widget.length,
                       selectedIndex: _selectedIndex,
                       onTap: _onTap,
-                      pages: widget.pageItems,
+                      iconBuilder: widget.iconBuilder,
+                      titleBuilder: widget.titleBuilder,
                     ),
                   ),
                 ),
@@ -110,10 +123,9 @@ class _YaruLandscapeLayoutState extends State<YaruLandscapeLayout> {
                       pages: [
                         MaterialPage(
                           key: ValueKey(_selectedIndex),
-                          child: widget.pageItems.length > _selectedIndex
-                              ? widget.pageItems[_selectedIndex]
-                                  .builder(context)
-                              : widget.pageItems[0].builder(context),
+                          child: widget.length > _selectedIndex
+                              ? widget.pageBuilder(context, _selectedIndex)
+                              : widget.pageBuilder(context, 0),
                         ),
                       ],
                       onPopPage: (route, result) => route.didPop(result),

lib/src/pages/layouts/yaru_master_detail_page.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/material.dart';
 import 'yaru_landscape_layout.dart';
-import 'yaru_page_item.dart';
 import 'yaru_portrait_layout.dart';
 
+typedef YaruMasterDetailBuilder = Widget Function(
+  BuildContext context,
+  int index,
+  bool selected,
+);
+
 class YaruMasterDetailPage extends StatefulWidget {
   /// Creates a basic responsive layout with yaru theme,
   /// renders layout based on [width] constrain.
@@ -21,17 +26,26 @@ class YaruMasterDetailPage extends StatefulWidget {
   /// ```
   const YaruMasterDetailPage({
     super.key,
-    required this.pageItems,
+    required this.length,
+    required this.iconBuilder,
+    required this.titleBuilder,
+    required this.pageBuilder,
     this.previousIconData,
     required this.leftPaneWidth,
     this.appBar,
   });
 
-  /// Creates horizontal array of pages.
-  /// All the `children` will be of type [YaruPageItem].
-  ///
-  /// These List of items are passed to [YaruLandscapeLayout] and [YaruPortraitLayout].
-  final List<YaruPageItem> pageItems;
+  /// The total number of pages.
+  final int length;
+
+  /// A builder that is called for each page to build its icon.
+  final YaruMasterDetailBuilder iconBuilder;
+
+  /// A builder that is called for each page to build its title.
+  final YaruMasterDetailBuilder titleBuilder;
+
+  /// A builder that is called for each page to build its content.
+  final IndexedWidgetBuilder pageBuilder;
 
   /// Specifies the width of left pane.
   final double leftPaneWidth;
@@ -61,16 +75,22 @@ class _YaruMasterDetailPageState extends State<YaruMasterDetailPage> {
       builder: (context, constraints) {
         if (constraints.maxWidth < 620) {
           return YaruPortraitLayout(
+            length: widget.length,
             selectedIndex: _index,
-            pageItems: widget.pageItems,
+            iconBuilder: widget.iconBuilder,
+            titleBuilder: widget.titleBuilder,
+            pageBuilder: widget.pageBuilder,
             onSelected: _setIndex,
             previousIconData: widget.previousIconData,
             appBar: widget.appBar,
           );
         } else {
           return YaruLandscapeLayout(
+            length: widget.length,
             selectedIndex: _index == -1 ? _previousIndex : _index,
-            pageItems: widget.pageItems,
+            iconBuilder: widget.iconBuilder,
+            titleBuilder: widget.titleBuilder,
+            pageBuilder: widget.pageBuilder,
             onSelected: _setIndex,
             leftPaneWidth: widget.leftPaneWidth,
             appBar: widget.appBar,

lib/src/pages/layouts/yaru_page_item_list_view.dart

@@ -8,13 +8,17 @@ const double _kScrollbarMargin = 2.0;
 class YaruPageItemListView extends StatelessWidget {
   const YaruPageItemListView({
     super.key,
-    required this.pages,
+    required this.length,
     required this.selectedIndex,
+    required this.iconBuilder,
+    required this.titleBuilder,
     required this.onTap,
     this.materialTiles = false,
   });
 
-  final List<YaruPageItem> pages;
+  final int length;
+  final YaruMasterDetailBuilder iconBuilder;
+  final YaruMasterDetailBuilder titleBuilder;
   final int selectedIndex;
   final Function(int index) onTap;
   final bool materialTiles;
@@ -33,20 +37,19 @@ class YaruPageItemListView extends StatelessWidget {
             )
           : null,
       controller: ScrollController(),
-      itemCount: pages.length,
+      itemCount: length,
       itemBuilder: (context, index) => materialTiles
           ? ListTile(
               visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
               selected: index == selectedIndex,
-              title: pages[index].titleBuilder(context),
-              leading:
-                  pages[index].iconBuilder(context, index == selectedIndex),
+              title: titleBuilder(context, index, index == selectedIndex),
+              leading: iconBuilder(context, index, index == selectedIndex),
               onTap: () => onTap(index),
             )
           : _YaruListTile(
               selected: index == selectedIndex,
-              title: pages[index].titleBuilder(context),
-              icon: pages[index].iconBuilder(context, index == selectedIndex),
+              title: titleBuilder(context, index, index == selectedIndex),
+              icon: iconBuilder(context, index, index == selectedIndex),
               onTap: () => onTap(index),
             ),
     );

lib/src/pages/layouts/yaru_portrait_layout.dart

@@ -1,21 +1,27 @@
 import 'package:flutter/material.dart';
 import 'package:yaru/yaru.dart';
 
-import 'yaru_page_item.dart';
+import 'yaru_master_detail_page.dart';
 import 'yaru_page_item_list_view.dart';
 
 class YaruPortraitLayout extends StatefulWidget {
   const YaruPortraitLayout({
     super.key,
+    required this.length,
     required this.selectedIndex,
-    required this.pageItems,
+    required this.iconBuilder,
+    required this.titleBuilder,
+    required this.pageBuilder,
     required this.onSelected,
     this.previousIconData,
     this.appBar,
   });
 
+  final int length;
   final int selectedIndex;
-  final List<YaruPageItem> pageItems;
+  final YaruMasterDetailBuilder iconBuilder;
+  final YaruMasterDetailBuilder titleBuilder;
+  final IndexedWidgetBuilder pageBuilder;
   final ValueChanged<int> onSelected;
   final IconData? previousIconData;
 
@@ -52,19 +58,19 @@ class _YaruPortraitLayoutState extends State<YaruPortraitLayout> {
     final width = MediaQuery.of(context).size.width;
     return MaterialPageRoute(
       builder: (context) {
-        final page = widget.pageItems[_selectedIndex];
         return Scaffold(
           appBar: widget.appBar != null
               ? AppBar(
-                  title: page.titleBuilder(context),
+                  title: widget.titleBuilder(context, index, false),
                   leading: InkWell(
                     child:
                         Icon(widget.previousIconData ?? Icons.navigate_before),
                     onTap: _goBack,
                   ),
                 )
               : null,
-          body: SizedBox(width: width, child: page.builder(context)),
+          body:
+              SizedBox(width: width, child: widget.pageBuilder(context, index)),
           floatingActionButton: widget.appBar == null
               ? FloatingActionButton(
                   child: Icon(widget.previousIconData),
@@ -96,9 +102,11 @@ class _YaruPortraitLayoutState extends State<YaruPortraitLayout> {
                   return Scaffold(
                     appBar: widget.appBar,
                     body: YaruPageItemListView(
+                      length: widget.length,
                       selectedIndex: _selectedIndex,
                       onTap: _onTap,
-                      pages: widget.pageItems,
+                      iconBuilder: widget.iconBuilder,
+                      titleBuilder: widget.titleBuilder,
                     ),
                   );
                 },