chore(ui_layput): update gitignore with macos config files

packages/wyatt_bloc_layout/example/lib/components/theme_components.dart

@@ -5,10 +5,10 @@ import 'package:bloc_layout_example/components/custom_loading_widget.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
 abstract class AppThemeComponent {
-  static const ComponentThemeData components = ComponentThemeData.raw(
+  static ComponentThemeData components = ComponentThemeData.raw(
-    topAppBar: CustomAppBar(),
+    topAppBars: const CustomAppBar().registry(),
-    bottomNavigationBar: CustomBottomBar(),
+    bottomNavigationBars: const CustomBottomBar().registry(),
-    loader: CustomLoadingWidget(),
+    loaders: const CustomLoadingWidget().registry(),
-    error: CustomErrorWidget(),
+    errors: const CustomErrorWidget().registry(),
   );
 }

packages/wyatt_bloc_layout/lib/src/core/crud_cubit_consumer_screen_mixin.dart

@@ -22,13 +22,17 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
 mixin CrudMixin<Cubit extends bloc_base.Cubit<dynamic>,
     SuccessState extends CrudSuccess> {
+  String? get loaderComponentId => null;
+  String? get errorComponentId => null;
+
   Widget errorBuilder(BuildContext context, CrudError state) =>
-      context.components.errorComponent.call(
+      context.components.errorComponent(errorComponentId).call(
-        message: (state.message != null) ? TextWrapper(state.message!) : null,
+            message:
-      );
+                (state.message != null) ? TextWrapper(state.message!) : null,
+          );
 
   Widget loadingBuilder(BuildContext context, CrudLoading state) =>
-      context.components.loader ?? const SizedBox.shrink();
+      context.components.loaderComponent(loaderComponentId).call();
 
   Widget initialBuilder(BuildContext context, CrudInitial state) =>
       const SizedBox.shrink();

packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_grid_layout_cubit_screen_crud_list.dart

@@ -24,7 +24,8 @@ abstract class BottomNavigationBarGridLayoutCubitScreenCrudList<
     with GridLayoutMixin<SuccessType> {
   const BottomNavigationBarGridLayoutCubitScreenCrudList({
     super.custom,
-    super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen.dart

@@ -26,18 +26,21 @@ abstract class BottomNavigationBarLayoutCubitScreen<
     State extends Object> extends CubitScreenBase<Cubit, State> {
   const BottomNavigationBarLayoutCubitScreen({
     this.custom,
-    this.height = 60,
+    this.barId,
+    this.scaffoldFieldsWrapper,
     super.key,
   });
 
-  final double height;
+  final ComponentCallBack<BottomNavigationBarComponent>? custom;
-  final BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
+  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
-      custom;
+  final String? barId;
 
   @override
   Widget parent(BuildContext context, Widget child) =>
-      BottomNavigationBarLayout(
+      StructuralLayout.withBottomNavBar(
         custom: custom,
+        barId: barId,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
         body: child,
       );
 }

packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud.dart

@@ -26,7 +26,8 @@ abstract class BottomNavigationBarLayoutCubitScreenCrud<
     with CrudMixin<Cubit, CrudSuccessState> {
   const BottomNavigationBarLayoutCubitScreenCrud({
     super.custom,
-    super.height,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 

packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud_item.dart

@@ -24,7 +24,8 @@ abstract class BottomNavigationBarLayoutCubitScreenCrudItem<
         CrudLoaded<SuccessType>> {
   const BottomNavigationBarLayoutCubitScreenCrudItem({
     super.custom,
-    super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud_list.dart

@@ -24,7 +24,8 @@ abstract class BottomNavigationBarLayoutCubitScreenCrudList<
         CrudListLoaded<SuccessType>> {
   const BottomNavigationBarLayoutCubitScreenCrudList({
     super.custom,
-    super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/cubit_screen_crud_item_base.dart

@@ -20,5 +20,7 @@ import 'package:wyatt_crud_bloc/wyatt_crud_bloc.dart';
 
 abstract class CubitScreenCrudItemBase<Cubit extends bloc_base.Cubit<CrudState>,
     T extends Object?> extends CubitScreenCrudBase<Cubit, CrudLoaded<T>> {
-  const CubitScreenCrudItemBase({super.key});
+  const CubitScreenCrudItemBase({
+    super.key,
+  });
 }

packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_grid_layout_cubit_screen_crud_list.dart

@@ -25,7 +25,11 @@ abstract class FrameLayoutGridCubitScreenCrudList<
   const FrameLayoutGridCubitScreenCrudList({
     super.customAppBar,
     super.customBottomNavBar,
-    super.height = 60,
+    super.floatingActionButtonId,
+    super.height,
+    super.appBarId,
+    super.bottomNavBarId,
+    super.customFloatingActionButton,
     super.scaffoldFieldsWrapper,
     super.key,
   });

packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen.dart

@@ -26,21 +26,34 @@ abstract class FrameLayoutCubitScreen<Cubit extends bloc_base.Cubit<State>,
   const FrameLayoutCubitScreen({
     this.customAppBar,
     this.customBottomNavBar,
+    this.customFloatingActionButton,
+    this.appBarId,
+    this.bottomNavBarId,
+    this.floatingActionButtonId,
     this.scaffoldFieldsWrapper,
     this.height = 60,
     super.key,
   });
 
-  final TopAppBarComponent? Function(TopAppBarComponent?)? customAppBar;
+  final ComponentCallBack<TopAppBarComponent>? customAppBar;
-  final BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
+  final ComponentCallBack<BottomNavigationBarComponent>? customBottomNavBar;
-      customBottomNavBar;
+  final ComponentCallBack<FloatingActionButtonComponent>?
+      customFloatingActionButton;
+  final String? appBarId;
+  final String? bottomNavBarId;
+  final String? floatingActionButtonId;
   final double height;
   final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
 
   @override
-  Widget parent(BuildContext context, Widget child) => FrameLayout(
+  Widget parent(BuildContext context, Widget child) =>
+      StructuralLayout.withFrame(
         customAppBar: customAppBar,
         customBottomNavBar: customBottomNavBar,
+        customFloatingActionButton: customFloatingActionButton,
+        appBarId: appBarId,
+        bottomNavBarId: bottomNavBarId,
+        floatingActionButtonId: floatingActionButtonId,
         height: height,
         scaffoldFieldsWrapper: scaffoldFieldsWrapper,
         body: child,

packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud.dart

@@ -27,9 +27,13 @@ abstract class FrameLayoutCubitScreenCrud<
   const FrameLayoutCubitScreenCrud({
     super.customAppBar,
     super.customBottomNavBar,
+    super.floatingActionButtonId,
     super.height,
-    super.key,
+    super.appBarId,
+    super.bottomNavBarId,
+    super.customFloatingActionButton,
     super.scaffoldFieldsWrapper,
+    super.key,
   });
 
   @override

packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud_item.dart

@@ -24,7 +24,11 @@ abstract class FrameLayoutCubitScreenCrudItem<
   const FrameLayoutCubitScreenCrudItem({
     super.customAppBar,
     super.customBottomNavBar,
-    super.height = 60,
+    super.floatingActionButtonId,
+    super.height,
+    super.appBarId,
+    super.bottomNavBarId,
+    super.customFloatingActionButton,
     super.scaffoldFieldsWrapper,
     super.key,
   });

packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud_list.dart

@@ -24,7 +24,11 @@ abstract class FrameLayoutCubitScreenCrudList<
   const FrameLayoutCubitScreenCrudList({
     super.customAppBar,
     super.customBottomNavBar,
-    super.height = 60,
+    super.floatingActionButtonId,
+    super.height,
+    super.appBarId,
+    super.bottomNavBarId,
+    super.customFloatingActionButton,
     super.scaffoldFieldsWrapper,
     super.key,
   });

packages/wyatt_bloc_layout/lib/src/presentation/structural_bloc_layout.dart

@@ -0,0 +1 @@
+

packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_grid_layout_cubit_screen_crud_list.dart

@@ -25,6 +25,8 @@ abstract class TopAppBarGridLayoutCubitScreenCrudList<
   const TopAppBarGridLayoutCubitScreenCrudList({
     super.custom,
     super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen.dart

@@ -25,17 +25,23 @@ abstract class TopAppBarLayoutCubitScreen<Cubit extends bloc_base.Cubit<State>,
     State extends Object> extends CubitScreenBase<Cubit, State> {
   const TopAppBarLayoutCubitScreen({
     this.custom,
+    this.barId,
+    this.scaffoldFieldsWrapper,
     this.height = 60,
     super.key,
   });
 
   final double height;
-  final TopAppBarComponent? Function(TopAppBarComponent?)? custom;
+  final ComponentCallBack<TopAppBarComponent>? custom;
+  final String? barId;
+  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
 
   @override
   Widget parent(BuildContext context, Widget child) => TopAppBarLayout(
         height: height,
         custom: custom,
+        barId: barId,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
         body: child,
       );
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud.dart

@@ -27,6 +27,8 @@ abstract class TopAppBarLayoutCubitScreenCrud<
   const TopAppBarLayoutCubitScreenCrud({
     super.custom,
     super.height,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 

packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud_item.dart

@@ -24,6 +24,8 @@ abstract class TopAppBarLayoutCubitScreenCrudItem<
   const TopAppBarLayoutCubitScreenCrudItem({
     super.custom,
     super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud_list.dart

@@ -24,6 +24,8 @@ abstract class TopAppBarLayoutCubitScreenCrudList<
   const TopAppBarLayoutCubitScreenCrudList({
     super.custom,
     super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_grid_layout_cubit_screen_crud_list.dart

@@ -25,6 +25,8 @@ abstract class TopNavigationBarGridLayoutCubitScreenCrudList<
   const TopNavigationBarGridLayoutCubitScreenCrudList({
     super.custom,
     super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen.dart

@@ -27,16 +27,23 @@ abstract class TopNavigationBarLayoutCubitScreen<
   const TopNavigationBarLayoutCubitScreen({
     this.custom,
     this.height = 60,
+    this.barId,
+    this.scaffoldFieldsWrapper,
     super.key,
   });
 
   final double height;
-  final TopNavigationBarComponent? Function(TopNavigationBarComponent?)? custom;
+  final ComponentCallBack<TopNavigationBarComponent>? custom;
+  final String? barId;
+  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
 
   @override
-  Widget parent(BuildContext context, Widget child) => TopNavigationBarLayout(
+  Widget parent(BuildContext context, Widget child) =>
-        height: height,
+      StructuralLayout.withTopNavigationBar(
+        barId: barId,
         custom: custom,
+        height: height,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
         body: child,
       );
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud.dart

@@ -27,6 +27,8 @@ abstract class TopNavigationBarLayoutCubitScreenCrud<
   const TopNavigationBarLayoutCubitScreenCrud({
     super.custom,
     super.height,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 

packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud_item.dart

@@ -25,6 +25,8 @@ abstract class TopNavigationBarLayoutCubitScreenCrudItem<
   const TopNavigationBarLayoutCubitScreenCrudItem({
     super.custom,
     super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud_list.dart

@@ -25,6 +25,8 @@ abstract class TopNavigationBarLayoutCubitScreenCrudList<
   const TopNavigationBarLayoutCubitScreenCrudList({
     super.custom,
     super.height = 60,
+    super.barId,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 }

packages/wyatt_bloc_layout/models/class-models.puml

@@ -1,12 +1,16 @@
-@startuml Class Model
+@startuml _
 set namespaceSeparator ::
 
 abstract class "wyatt_bloc_layout::src::core::mixins::gird_view_mixin.dart::GridLayoutMixin" {
+  +double verticalGap
+  +double horizontalGap
   +Widget gridChild()
   +Widget successBuilder()
 }
 
 abstract class "wyatt_bloc_layout::src::core::crud_cubit_consumer_screen_mixin.dart::CrudMixin" {
+  +String? loaderComponentId
+  +String? errorComponentId
   +Widget errorBuilder()
   +Widget loadingBuilder()
   +Widget initialBuilder()
@@ -19,11 +23,26 @@ abstract class "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::Cu
 
 "wyatt_bloc_helper::src::cubit.dart::CubitScreen" <|-- "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::CubitScreenBase"
 
+abstract class "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_list_base.dart::CubitConsumerCrudListBase" {
+}
+
+"wyatt_bloc_layout::src::presentation::cubit_consumer_crud_base.dart::CubitConsumerCrudBase" <|-- "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_list_base.dart::CubitConsumerCrudListBase"
+
+abstract class "wyatt_bloc_layout::src::presentation::cubit_consumer_base.dart::CubitConsumerBase" {
+}
+
+"wyatt_bloc_helper::src::cubit.dart::CubitConsumerScreen" <|-- "wyatt_bloc_layout::src::presentation::cubit_consumer_base.dart::CubitConsumerBase"
+
 abstract class "wyatt_bloc_layout::src::presentation::cubit_screen_crud_list_base.dart::CubitScreenCrudListBase" {
 }
 
 "wyatt_bloc_layout::src::presentation::cubit_screen_crud_base.dart::CubitScreenCrudBase" <|-- "wyatt_bloc_layout::src::presentation::cubit_screen_crud_list_base.dart::CubitScreenCrudListBase"
 
+abstract class "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_item_base.dart::CubitConsumerCrudItemBase" {
+}
+
+"wyatt_bloc_layout::src::presentation::cubit_consumer_crud_base.dart::CubitConsumerCrudBase" <|-- "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_item_base.dart::CubitConsumerCrudItemBase"
+
 abstract class "wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen_crud.dart::FrameLayoutCubitScreenCrud" {
   +Widget onBuild()
 }
@@ -39,12 +58,19 @@ abstract class "wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_l
 abstract class "wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" {
   +TopAppBarComponent? Function(TopAppBarComponent?)? customAppBar
   +BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)? customBottomNavBar
+  +FloatingActionButtonComponent? Function(FloatingActionButtonComponent?)? customFloatingActionButton
+  +String? appBarId
+  +String? bottomNavBarId
+  +String? floatingActionButtonId
   +double height
+  +ScaffoldFieldsWrapper? scaffoldFieldsWrapper
   +Widget parent()
 }
 
-"wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" o-- "null::TopAppBarComponent Function(TopAppBarComponent)"
+"wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" o-- "wyatt_ui_layout::src::presentation::layouts::structural_layouts::structural_layout.dart::TopAppBarComponent Function(TopAppBarComponent)"
-"wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" o-- "null::BottomNavigationBarComponent Function(BottomNavigationBarComponent)"
+"wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" o-- "wyatt_ui_layout::src::presentation::layouts::structural_layouts::structural_layout.dart::BottomNavigationBarComponent Function(BottomNavigationBarComponent)"
+"wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" o-- "wyatt_ui_layout::src::presentation::layouts::structural_layouts::structural_layout.dart::FloatingActionButtonComponent Function(FloatingActionButtonComponent)"
+"wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen" o-- "wyatt_ui_layout::src::core::scaffold_fields_wrapper.dart::ScaffoldFieldsWrapper"
 "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::CubitScreenBase" <|-- "wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_layout_cubit_screen.dart::FrameLayoutCubitScreen"
 
 abstract class "wyatt_bloc_layout::src::presentation::frame_bloc_layout::frame_grid_layout_cubit_screen_crud_list.dart::FrameLayoutGridCubitScreenCrudList" {
@@ -71,10 +97,13 @@ abstract class "wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::t
 abstract class "wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::top_app_bar_layout_cubit_screen.dart::TopAppBarLayoutCubitScreen" {
   +double height
   +TopAppBarComponent? Function(TopAppBarComponent?)? custom
+  +String? barId
+  +ScaffoldFieldsWrapper? scaffoldFieldsWrapper
   +Widget parent()
 }
 
-"wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::top_app_bar_layout_cubit_screen.dart::TopAppBarLayoutCubitScreen" o-- "null::TopAppBarComponent Function(TopAppBarComponent)"
+"wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::top_app_bar_layout_cubit_screen.dart::TopAppBarLayoutCubitScreen" o-- "wyatt_ui_layout::src::presentation::layouts::structural_layouts::structural_layout.dart::TopAppBarComponent Function(TopAppBarComponent)"
+"wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::top_app_bar_layout_cubit_screen.dart::TopAppBarLayoutCubitScreen" o-- "wyatt_ui_layout::src::core::scaffold_fields_wrapper.dart::ScaffoldFieldsWrapper"
 "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::CubitScreenBase" <|-- "wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::top_app_bar_layout_cubit_screen.dart::TopAppBarLayoutCubitScreen"
 
 abstract class "wyatt_bloc_layout::src::presentation::top_app_bar_bloc_layout::top_app_bar_layout_cubit_screen_crud.dart::TopAppBarLayoutCubitScreenCrud" {
@@ -108,13 +137,22 @@ abstract class "wyatt_bloc_layout::src::presentation::cubit_screen_crud_base.dar
 "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::CubitScreenBase" <|-- "wyatt_bloc_layout::src::presentation::cubit_screen_crud_base.dart::CubitScreenCrudBase"
 "wyatt_bloc_layout::src::core::crud_cubit_consumer_screen_mixin.dart::CrudMixin" <|-- "wyatt_bloc_layout::src::presentation::cubit_screen_crud_base.dart::CubitScreenCrudBase"
 
+abstract class "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_base.dart::CubitConsumerCrudBase" {
+  +Widget onBuild()
+}
+
+"wyatt_bloc_layout::src::presentation::cubit_consumer_base.dart::CubitConsumerBase" <|-- "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_base.dart::CubitConsumerCrudBase"
+"wyatt_bloc_layout::src::core::crud_cubit_consumer_screen_mixin.dart::CrudMixin" <|-- "wyatt_bloc_layout::src::presentation::cubit_consumer_crud_base.dart::CubitConsumerCrudBase"
+
 abstract class "wyatt_bloc_layout::src::presentation::bottom_navigation_bar_bloc_layout::bottom_navigation_bar_layout_cubit_screen.dart::BottomNavigationBarLayoutCubitScreen" {
-  +double height
   +BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)? custom
+  +ScaffoldFieldsWrapper? scaffoldFieldsWrapper
+  +String? barId
   +Widget parent()
 }
 
-"wyatt_bloc_layout::src::presentation::bottom_navigation_bar_bloc_layout::bottom_navigation_bar_layout_cubit_screen.dart::BottomNavigationBarLayoutCubitScreen" o-- "null::BottomNavigationBarComponent Function(BottomNavigationBarComponent)"
+"wyatt_bloc_layout::src::presentation::bottom_navigation_bar_bloc_layout::bottom_navigation_bar_layout_cubit_screen.dart::BottomNavigationBarLayoutCubitScreen" o-- "wyatt_ui_layout::src::presentation::layouts::structural_layouts::structural_layout.dart::BottomNavigationBarComponent Function(BottomNavigationBarComponent)"
+"wyatt_bloc_layout::src::presentation::bottom_navigation_bar_bloc_layout::bottom_navigation_bar_layout_cubit_screen.dart::BottomNavigationBarLayoutCubitScreen" o-- "wyatt_ui_layout::src::core::scaffold_fields_wrapper.dart::ScaffoldFieldsWrapper"
 "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::CubitScreenBase" <|-- "wyatt_bloc_layout::src::presentation::bottom_navigation_bar_bloc_layout::bottom_navigation_bar_layout_cubit_screen.dart::BottomNavigationBarLayoutCubitScreen"
 
 abstract class "wyatt_bloc_layout::src::presentation::bottom_navigation_bar_bloc_layout::bottom_navigation_bar_layout_cubit_screen_crud_item.dart::BottomNavigationBarLayoutCubitScreenCrudItem" {
@@ -154,10 +192,13 @@ abstract class "wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_la
 abstract class "wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_layout::top_navigation_bar_layout_cubit_screen.dart::TopNavigationBarLayoutCubitScreen" {
   +double height
   +TopNavigationBarComponent? Function(TopNavigationBarComponent?)? custom
+  +String? barId
+  +ScaffoldFieldsWrapper? scaffoldFieldsWrapper
   +Widget parent()
 }
 
-"wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_layout::top_navigation_bar_layout_cubit_screen.dart::TopNavigationBarLayoutCubitScreen" o-- "null::TopNavigationBarComponent Function(TopNavigationBarComponent)"
+"wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_layout::top_navigation_bar_layout_cubit_screen.dart::TopNavigationBarLayoutCubitScreen" o-- "wyatt_ui_layout::src::presentation::layouts::structural_layouts::structural_layout.dart::TopNavigationBarComponent Function(TopNavigationBarComponent)"
+"wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_layout::top_navigation_bar_layout_cubit_screen.dart::TopNavigationBarLayoutCubitScreen" o-- "wyatt_ui_layout::src::core::scaffold_fields_wrapper.dart::ScaffoldFieldsWrapper"
 "wyatt_bloc_layout::src::presentation::cubit_screen_base.dart::CubitScreenBase" <|-- "wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_layout::top_navigation_bar_layout_cubit_screen.dart::TopNavigationBarLayoutCubitScreen"
 
 abstract class "wyatt_bloc_layout::src::presentation::top_navigation_bar_bloc_layout::top_navigation_bar_layout_cubit_screen_crud_item.dart::TopNavigationBarLayoutCubitScreenCrudItem" {

packages/wyatt_ui_components/lib/src/features/component_theme_data.dart

@@ -68,23 +68,23 @@ class ComponentThemeData {
   // /// {@macro component_theme_data}
   factory ComponentThemeData.fromOther(ComponentThemeData other) =>
       ComponentThemeData(
-        topAppBars: other.topAppBars,
+        topAppBars: other._topAppBars,
-        topNavigationBars: other.topNavigationBars,
+        topNavigationBars: other._topNavigationBars,
-        bottomNavigationBars: other.bottomNavigationBars,
+        bottomNavigationBars: other._bottomNavigationBars,
-        errors: other.errors,
+        errors: other._errors,
-        loaders: other.loaders,
+        loaders: other._loaders,
-        richTextBuilders: other.richTextBuilders,
+        richTextBuilders: other._richTextBuilders,
-        textInputs: other.textInputs,
+        textInputs: other._textInputs,
-        fileSelectionButtons: other.fileSelectionButtons,
+        fileSelectionButtons: other._fileSelectionButtons,
-        flatButtons: other.flatButtons,
+        flatButtons: other._flatButtons,
-        simpleIconButtons: other.simpleIconButtons,
+        simpleIconButtons: other._simpleIconButtons,
-        symbolButtons: other.symbolButtons,
+        symbolButtons: other._symbolButtons,
-        informationCards: other.informationCards,
+        informationCards: other._informationCards,
-        portfolioCards: other.portfolioCards,
+        portfolioCards: other._portfolioCards,
-        quoteCards: other.quoteCards,
+        quoteCards: other._quoteCards,
-        skillCards: other.skillCards,
+        skillCards: other._skillCards,
-        pricingCards: other.pricingCards,
+        pricingCards: other._pricingCards,
-        floatingActionButtons: other.floatingActionButtons,
+        floatingActionButtons: other._floatingActionButtons,
       );
 
   /// Create a [ComponentThemeData] given a set of exact values. Most values
@@ -94,24 +94,40 @@ class ComponentThemeData {
   /// create intermediate themes based on two themes created with the
   /// [ComponentThemeData] constructor.
   const ComponentThemeData.raw({
-    this.topAppBars,
+    ComponentRegistry<TopAppBarComponent>? topAppBars,
-    this.topNavigationBars,
+    ComponentRegistry<TopNavigationBarComponent>? topNavigationBars,
-    this.bottomNavigationBars,
+    ComponentRegistry<BottomNavigationBarComponent>? bottomNavigationBars,
-    this.errors,
+    ComponentRegistry<ErrorComponent>? errors,
-    this.loaders,
+    ComponentRegistry<LoaderComponent>? loaders,
-    this.richTextBuilders,
+    ComponentRegistry<RichTextBuilderComponent>? richTextBuilders,
-    this.textInputs,
+    ComponentRegistry<TextInputComponent>? textInputs,
-    this.fileSelectionButtons,
+    ComponentRegistry<FileSelectionButtonComponent>? fileSelectionButtons,
-    this.flatButtons,
+    ComponentRegistry<FlatButtonComponent>? flatButtons,
-    this.simpleIconButtons,
+    ComponentRegistry<SimpleIconButtonComponent>? simpleIconButtons,
-    this.symbolButtons,
+    ComponentRegistry<SymbolButtonComponent>? symbolButtons,
-    this.informationCards,
+    ComponentRegistry<InformationCardComponent>? informationCards,
-    this.portfolioCards,
+    ComponentRegistry<PortfolioCardComponent>? portfolioCards,
-    this.quoteCards,
+    ComponentRegistry<QuoteCardComponent>? quoteCards,
-    this.skillCards,
+    ComponentRegistry<SkillCardComponent>? skillCards,
-    this.pricingCards,
+    ComponentRegistry<PricingCardComponent>? pricingCards,
-    this.floatingActionButtons,
+    ComponentRegistry<FloatingActionButtonComponent>? floatingActionButtons,
-  });
+  })  : _floatingActionButtons = floatingActionButtons,
+        _symbolButtons = symbolButtons,
+        _simpleIconButtons = simpleIconButtons,
+        _flatButtons = flatButtons,
+        _fileSelectionButtons = fileSelectionButtons,
+        _textInputs = textInputs,
+        _richTextBuilders = richTextBuilders,
+        _pricingCards = pricingCards,
+        _skillCards = skillCards,
+        _quoteCards = quoteCards,
+        _portfolioCards = portfolioCards,
+        _informationCards = informationCards,
+        _loaders = loaders,
+        _errors = errors,
+        _bottomNavigationBars = bottomNavigationBars,
+        _topNavigationBars = topNavigationBars,
+        _topAppBars = topAppBars;
 
   R _get<T extends Component, R>(T? component, R? returned) {
     if (component == null) {
@@ -129,90 +145,97 @@ class ComponentThemeData {
   }
 
   // Bars
-  final ComponentRegistry<TopAppBarComponent>? topAppBars;
+  final ComponentRegistry<TopAppBarComponent>? _topAppBars;
   $TopAppBarComponentCWProxy topAppBarComponent([String? id]) =>
-      _get(topAppBars?.call(id), topAppBars?.call(id)?.copyWith);
+      _get(_topAppBars?.call(id), _topAppBars?.call(id)?.copyWith);
 
-  final ComponentRegistry<TopNavigationBarComponent>? topNavigationBars;
+  final ComponentRegistry<TopNavigationBarComponent>? _topNavigationBars;
   $TopNavigationBarComponentCWProxy topNavigationBarComponent([String? id]) =>
-      _get(topNavigationBars?.call(id), topNavigationBars?.call(id)?.copyWith);
+      _get(
+        _topNavigationBars?.call(id),
+        _topNavigationBars?.call(id)?.copyWith,
+      );
 
-  final ComponentRegistry<BottomNavigationBarComponent>? bottomNavigationBars;
+  final ComponentRegistry<BottomNavigationBarComponent>? _bottomNavigationBars;
   $BottomNavigationBarComponentCWProxy bottomNavigationBarComponent([
     String? id,
   ]) =>
       _get(
-        bottomNavigationBars?.call(id),
+        _bottomNavigationBars?.call(id),
-        bottomNavigationBars?.call(id)?.copyWith,
+        _bottomNavigationBars?.call(id)?.copyWith,
       );
 
   // CRUD Widgets
-  final ComponentRegistry<ErrorComponent>? errors;
+  final ComponentRegistry<ErrorComponent>? _errors;
   $ErrorComponentCWProxy errorComponent([String? id]) =>
-      _get(errors?.call(id), errors?.call(id)?.copyWith);
+      _get(_errors?.call(id), _errors?.call(id)?.copyWith);
 
-  final ComponentRegistry<LoaderComponent>? loaders;
+  final ComponentRegistry<LoaderComponent>? _loaders;
   $LoaderComponentCWProxy loaderComponent([String? id]) =>
-      _get(loaders?.call(id), loaders?.call(id)?.copyWith);
+      _get(_loaders?.call(id), _loaders?.call(id)?.copyWith);
 
   // Cards
-  final ComponentRegistry<InformationCardComponent>? informationCards;
+  final ComponentRegistry<InformationCardComponent>? _informationCards;
   $InformationCardComponentCWProxy informationCardComponent([String? id]) =>
-      _get(informationCards?.call(id), informationCards?.call(id)?.copyWith);
+      _get(_informationCards?.call(id), _informationCards?.call(id)?.copyWith);
 
-  final ComponentRegistry<PortfolioCardComponent>? portfolioCards;
+  final ComponentRegistry<PortfolioCardComponent>? _portfolioCards;
   $PortfolioCardComponentCWProxy portfolioCardComponent([String? id]) =>
-      _get(portfolioCards?.call(id), portfolioCards?.call(id)?.copyWith);
+      _get(_portfolioCards?.call(id), _portfolioCards?.call(id)?.copyWith);
 
-  final ComponentRegistry<QuoteCardComponent>? quoteCards;
+  final ComponentRegistry<QuoteCardComponent>? _quoteCards;
   $QuoteCardComponentCWProxy quoteCardComponent([String? id]) =>
-      _get(quoteCards?.call(id), quoteCards?.call(id)?.copyWith);
+      _get(_quoteCards?.call(id), _quoteCards?.call(id)?.copyWith);
 
-  final ComponentRegistry<SkillCardComponent>? skillCards;
+  final ComponentRegistry<SkillCardComponent>? _skillCards;
   $SkillCardComponentCWProxy skillCardComponent([String? id]) =>
-      _get(skillCards?.call(id), skillCards?.call(id)?.copyWith);
+      _get(_skillCards?.call(id), _skillCards?.call(id)?.copyWith);
-  final ComponentRegistry<PricingCardComponent>? pricingCards;
+  final ComponentRegistry<PricingCardComponent>? _pricingCards;
   $PricingCardComponentCWProxy pricingCardComponent([String? id]) =>
-      _get(pricingCards?.call(id), pricingCards?.call(id)?.copyWith);
+      _get(_pricingCards?.call(id), _pricingCards?.call(id)?.copyWith);
 
   // Rich Text
-  final ComponentRegistry<RichTextBuilderComponent>? richTextBuilders;
+  final ComponentRegistry<RichTextBuilderComponent>? _richTextBuilders;
   $RichTextBuilderComponentCWProxy richTextBuilderComponent([String? id]) =>
-      _get(richTextBuilders?.call(id), richTextBuilders?.call(id)?.copyWith);
+      _get(_richTextBuilders?.call(id), _richTextBuilders?.call(id)?.copyWith);
 
   // Text Inputs
-  final ComponentRegistry<TextInputComponent>? textInputs;
+  final ComponentRegistry<TextInputComponent>? _textInputs;
   $TextInputComponentCWProxy textInputComponent([String? id]) =>
-      _get(textInputs?.call(id), textInputs?.call(id)?.copyWith);
+      _get(_textInputs?.call(id), _textInputs?.call(id)?.copyWith);
 
   // Buttons
-  final ComponentRegistry<FileSelectionButtonComponent>? fileSelectionButtons;
+  final ComponentRegistry<FileSelectionButtonComponent>? _fileSelectionButtons;
   $FileSelectionButtonComponentCWProxy fileSelectionButtonComponent([
     String? id,
   ]) =>
       _get(
-        fileSelectionButtons?.call(id),
+        _fileSelectionButtons?.call(id),
-        fileSelectionButtons?.call(id)?.copyWith,
+        _fileSelectionButtons?.call(id)?.copyWith,
       );
 
-  final ComponentRegistry<FlatButtonComponent>? flatButtons;
+  final ComponentRegistry<FlatButtonComponent>? _flatButtons;
   $FlatButtonComponentCWProxy flatButtonComponent([String? id]) =>
-      _get(flatButtons?.call(id), flatButtons?.call(id)?.copyWith);
+      _get(_flatButtons?.call(id), _flatButtons?.call(id)?.copyWith);
 
-  final ComponentRegistry<SimpleIconButtonComponent>? simpleIconButtons;
+  final ComponentRegistry<SimpleIconButtonComponent>? _simpleIconButtons;
   $SimpleIconButtonComponentCWProxy simpleIconButtonComponent([String? id]) =>
-      _get(simpleIconButtons?.call(id), simpleIconButtons?.call(id)?.copyWith);
+      _get(
+        _simpleIconButtons?.call(id),
+        _simpleIconButtons?.call(id)?.copyWith,
+      );
 
-  final ComponentRegistry<SymbolButtonComponent>? symbolButtons;
+  final ComponentRegistry<SymbolButtonComponent>? _symbolButtons;
   $SymbolButtonComponentCWProxy symbolButtonComponent([String? id]) =>
-      _get(symbolButtons?.call(id), symbolButtons?.call(id)?.copyWith);
+      _get(_symbolButtons?.call(id), _symbolButtons?.call(id)?.copyWith);
 
-  final ComponentRegistry<FloatingActionButtonComponent>? floatingActionButtons;
+  final ComponentRegistry<FloatingActionButtonComponent>?
+      _floatingActionButtons;
   $FloatingActionButtonComponentCWProxy floatingActionButtonComponent([
     String? id,
   ]) =>
       _get(
-        floatingActionButtons?.call(id),
+        _floatingActionButtons?.call(id),
-        floatingActionButtons?.call(id)?.copyWith,
+        _floatingActionButtons?.call(id)?.copyWith,
       );
 }

packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart

@@ -30,13 +30,13 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  context.components.flatButtonComponent().call(
-                    label: const TextWrapper('En savoir plus'),
+                        label: const TextWrapper('En savoir plus'),
-                    suffix: const Icon(
+                        suffix: const Icon(
-                      Icons.arrow_forward_ios,
+                          Icons.arrow_forward_ios,
-                      size: 15,
+                          size: 15,
-                    ),
+                        ),
-                  ),
+                      ),
                 ],
                 assets: [
                   Image.asset(
@@ -65,13 +65,13 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  context.components.flatButtonComponent().call(
-                    label: const TextWrapper('En savoir plus'),
+                        label: const TextWrapper('En savoir plus'),
-                    suffix: const Icon(
+                        suffix: const Icon(
-                      Icons.arrow_forward_ios,
+                          Icons.arrow_forward_ios,
-                      size: 15,
+                          size: 15,
-                    ),
+                        ),
-                  ),
+                      ),
                 ],
                 assets: [
                   Image.asset(
@@ -100,13 +100,13 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  context.components.flatButtonComponent().call(
-                    label: const TextWrapper('En savoir plus'),
+                        label: const TextWrapper('En savoir plus'),
-                    suffix: const Icon(
+                        suffix: const Icon(
-                      Icons.arrow_forward_ios,
+                          Icons.arrow_forward_ios,
-                      size: 15,
+                          size: 15,
-                    ),
+                        ),
-                  ),
+                      ),
                 ],
                 assets: [
                   Image.asset(
@@ -145,13 +145,13 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  context.components.flatButtonComponent().call(
-                    label: const TextWrapper('En savoir plus'),
+                        label: const TextWrapper('En savoir plus'),
-                    suffix: const Icon(
+                        suffix: const Icon(
-                      Icons.arrow_forward_ios,
+                          Icons.arrow_forward_ios,
-                      size: 15,
+                          size: 15,
-                    ),
+                        ),
-                  ),
+                      ),
                 ],
                 assets: [
                   Image.asset(

packages/wyatt_ui_kit/example/lib/cards/pricing_card/pricing_cards.dart

@@ -73,20 +73,20 @@ class PricingCards extends StatelessWidget {
                     ),
                   ),
                 ],
-                cta: context.components.flatButtonComponent.call(
+                cta: context.components.flatButtonComponent().call(
-                  label: const TextWrapper(
+                      label: const TextWrapper(
-                    'Contactez-nous',
+                        'Contactez-nous',
-                    style: TextStyle(color: Colors.white),
+                        style: TextStyle(color: Colors.white),
-                  ),
-                  normalStyle: FlatButtonThemeExtensionImpl.dark(
-                    theme: Theme.of(context),
-                  ).normalStyle?.copyWith(
-                        backgroundColors:
-                            const MultiColor(Constants.blueBtnGradient),
-                        borderColors:
-                            const MultiColor(Constants.blueBtnGradient),
                       ),
-                ),
+                      normalStyle: FlatButtonThemeExtensionImpl.dark(
+                        theme: Theme.of(context),
+                      ).normalStyle?.copyWith(
+                            backgroundColors:
+                                const MultiColor(Constants.blueBtnGradient),
+                            borderColors:
+                                const MultiColor(Constants.blueBtnGradient),
+                          ),
+                    ),
               ),
               const Gap(20),
               PricingCard(
@@ -130,20 +130,20 @@ class PricingCards extends StatelessWidget {
                     ),
                   ),
                 ],
-                cta: context.components.flatButtonComponent.call(
+                cta: context.components.flatButtonComponent().call(
-                  label: const TextWrapper(
+                      label: const TextWrapper(
-                    'Contactez-nous',
+                        'Contactez-nous',
-                    style: TextStyle(color: Colors.white),
+                        style: TextStyle(color: Colors.white),
-                  ),
-                  normalStyle: FlatButtonThemeExtensionImpl.dark(
-                    theme: Theme.of(context),
-                  ).normalStyle?.copyWith(
-                        backgroundColors:
-                            const MultiColor(Constants.purpleGradient),
-                        borderColors:
-                            const MultiColor(Constants.purpleGradient),
                       ),
-                ),
+                      normalStyle: FlatButtonThemeExtensionImpl.dark(
+                        theme: Theme.of(context),
+                      ).normalStyle?.copyWith(
+                            backgroundColors:
+                                const MultiColor(Constants.purpleGradient),
+                            borderColors:
+                                const MultiColor(Constants.purpleGradient),
+                          ),
+                    ),
               ),
             ],
           ),

packages/wyatt_ui_kit/lib/src/features/wyatt_component_theme_data.dart

@@ -22,23 +22,22 @@ import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 /// {@endtemplate}
 abstract class WyattComponentThemeData {
   /// {@macro wyatt_component_theme_data}
-  static const ComponentThemeData wyattComponentThemeData =
+  static ComponentThemeData wyattComponentThemeData = ComponentThemeData.raw(
-      ComponentThemeData.raw(
+    topAppBars: const TopAppBar().registry(),
-    topAppBar: TopAppBar(),
+    topNavigationBars: const TopNavigationBar().registry(),
-    topNavigationBar: TopNavigationBar(),
+    // bottomNavigationBars: ,
-    // bottomNavigationBar: ,
+    // errors: ,
-    // error: ,
+    loaders: const Loader().registry(),
-    loader: Loader(),
+    richTextBuilders: const RichTextBuilder().registry(),
-    richTextBuilder: RichTextBuilder(),
+    textInputs: const TextInput().registry(),
-    textInput: TextInput(),
+    fileSelectionButtons: const FileSelectionButton().registry(),
-    fileSelectionButton: FileSelectionButton(),
+    flatButtons: const FlatButton().registry(),
-    flatButton: FlatButton(),
+    simpleIconButtons: const SimpleIconButton().registry(),
-    simpleIconButton: SimpleIconButton(),
+    symbolButtons: const SymbolButton().registry(),
-    symbolButton: SymbolButton(),
+    informationCards: const InformationCard().registry(),
-    informationCard: InformationCard(),
+    portfolioCards: const PortfolioCard().registry(),
-    portfolioCard: PortfolioCard(),
+    quoteCards: const QuoteCard().registry(),
-    quoteCard: QuoteCard(),
+    skillCards: const SkillCard().registry(),
-    skillCard: SkillCard(),
+    pricingCards: const PricingCard().registry(),
-    pricingCard: PricingCard(),
   );
 }

packages/wyatt_ui_layout/example/lib/components/custom_bottom_navigation_bar.g.dart

@@ -17,11 +17,15 @@ class $CustomBottomNavigationBarCWProxyImpl
   CustomBottomNavigationBar currentIndex(int? currentIndex) =>
       this(currentIndex: currentIndex);
   @override
+  CustomBottomNavigationBar items(List<BottomNavigationBarItem>? items) =>
+      this(items: items);
+  @override
   CustomBottomNavigationBar key(Key? key) => this(key: key);
   @override
   CustomBottomNavigationBar call({
     void Function(BuildContext, int)? onTap,
     int? currentIndex,
+    List<BottomNavigationBarItem>? items,
     Key? key,
   }) =>
       CustomBottomNavigationBar(

packages/wyatt_ui_layout/example/lib/components/custom_desktop_app_bar.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+
+part 'custom_desktop_app_bar.g.dart';
+
+@ComponentCopyWithExtension()
+class CustomDesktopAppBar extends TopAppBarComponent
+    with $CustomDesktopAppBarCWMixin {
+  const CustomDesktopAppBar({
+    super.title,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => AppBar(
+        backgroundColor: Colors.green,
+        title: Text(title?.data ?? ''),
+      );
+}

packages/wyatt_ui_layout/example/lib/components/custom_desktop_app_bar.g.dart

@@ -0,0 +1,104 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'custom_desktop_app_bar.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $CustomDesktopAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
+  const $CustomDesktopAppBarCWProxyImpl(this._value);
+  final CustomDesktopAppBar _value;
+  @override
+  CustomDesktopAppBar title(TextWrapper? title) => this(title: title);
+  @override
+  CustomDesktopAppBar centerTitle(bool? centerTitle) =>
+      this(centerTitle: centerTitle);
+  @override
+  CustomDesktopAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  CustomDesktopAppBar systemOverlayStyle(
+          SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  CustomDesktopAppBar automaticallyImplyLeading(
+          bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  CustomDesktopAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  CustomDesktopAppBar bottom(PreferredSizeWidget? bottom) =>
+      this(bottom: bottom);
+  @override
+  CustomDesktopAppBar elevation(double? elevation) =>
+      this(elevation: elevation);
+  @override
+  CustomDesktopAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  CustomDesktopAppBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  CustomDesktopAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  CustomDesktopAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  CustomDesktopAppBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  CustomDesktopAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  CustomDesktopAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  CustomDesktopAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  CustomDesktopAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
+  CustomDesktopAppBar leading(Widget? leading) => this(leading: leading);
+  @override
+  CustomDesktopAppBar actions(List<Widget>? actions) => this(actions: actions);
+  @override
+  CustomDesktopAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
+  CustomDesktopAppBar key(Key? key) => this(key: key);
+  @override
+  CustomDesktopAppBar call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  }) =>
+      CustomDesktopAppBar(
+        title: title ?? _value.title,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $CustomDesktopAppBarCWMixin on Component {
+  $TopAppBarComponentCWProxy get copyWith =>
+      $CustomDesktopAppBarCWProxyImpl(this as CustomDesktopAppBar);
+}

packages/wyatt_ui_layout/example/lib/components/custom_mobile_app_bar.dart

@@ -3,17 +3,19 @@ import 'package:flutter/services.dart';
 import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
-part 'custom_app_bar.g.dart';
+part 'custom_mobile_app_bar.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomAppBar extends TopAppBarComponent with $CustomAppBarCWMixin {
+class CustomMobileAppBar extends TopAppBarComponent
-  const CustomAppBar({
+    with $CustomMobileAppBarCWMixin {
+  const CustomMobileAppBar({
     super.title,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) => AppBar(
+        backgroundColor: Colors.red,
         title: Text(title?.data ?? ''),
       );
 }

packages/wyatt_ui_layout/example/lib/components/custom_mobile_app_bar.g.dart

@@ -0,0 +1,103 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'custom_mobile_app_bar.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $CustomMobileAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
+  const $CustomMobileAppBarCWProxyImpl(this._value);
+  final CustomMobileAppBar _value;
+  @override
+  CustomMobileAppBar title(TextWrapper? title) => this(title: title);
+  @override
+  CustomMobileAppBar centerTitle(bool? centerTitle) =>
+      this(centerTitle: centerTitle);
+  @override
+  CustomMobileAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  CustomMobileAppBar systemOverlayStyle(
+          SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  CustomMobileAppBar automaticallyImplyLeading(
+          bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  CustomMobileAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  CustomMobileAppBar bottom(PreferredSizeWidget? bottom) =>
+      this(bottom: bottom);
+  @override
+  CustomMobileAppBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  CustomMobileAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  CustomMobileAppBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  CustomMobileAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  CustomMobileAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  CustomMobileAppBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  CustomMobileAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  CustomMobileAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  CustomMobileAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  CustomMobileAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
+  CustomMobileAppBar leading(Widget? leading) => this(leading: leading);
+  @override
+  CustomMobileAppBar actions(List<Widget>? actions) => this(actions: actions);
+  @override
+  CustomMobileAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
+  CustomMobileAppBar key(Key? key) => this(key: key);
+  @override
+  CustomMobileAppBar call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  }) =>
+      CustomMobileAppBar(
+        title: title ?? _value.title,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $CustomMobileAppBarCWMixin on Component {
+  $TopAppBarComponentCWProxy get copyWith =>
+      $CustomMobileAppBarCWProxyImpl(this as CustomMobileAppBar);
+}

packages/wyatt_ui_layout/example/lib/core/app_theme_component.dart

@@ -1,14 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
-import 'package:wyatt_ui_layout_example/components/custom_app_bar.dart';
 import 'package:wyatt_ui_layout_example/components/custom_bottom_navigation_bar.dart';
+import 'package:wyatt_ui_layout_example/components/custom_desktop_app_bar.dart';
+import 'package:wyatt_ui_layout_example/components/custom_mobile_app_bar.dart';
 import 'package:wyatt_ui_layout_example/pages/bottom_navigation_bar_layout_page_1.dart';
 import 'package:wyatt_ui_layout_example/pages/bottom_navigation_bar_layout_page_2.dart';
 
 class AppThemeComponent {
   static ComponentThemeData get components => ComponentThemeData.raw(
-        topAppBar: const CustomAppBar(),
+        topAppBars: {
-        bottomNavigationBar: CustomBottomNavigationBar(
+          'mobile': const CustomMobileAppBar(),
+          'desktop': const CustomDesktopAppBar(),
+        }.registry(),
+        bottomNavigationBars: CustomBottomNavigationBar(
           onTap: (context, index) {
             switch (index) {
               case 0:
@@ -37,6 +41,6 @@ class AppThemeComponent {
                 break;
             }
           },
-        ),
+        ).registry(),
       );
 }

packages/wyatt_ui_layout/example/lib/pages/app_bar_layout_page.dart

@@ -6,12 +6,15 @@ class AppBarLayoutPage extends StatelessWidget {
   const AppBarLayoutPage({super.key});
 
   @override
-  Widget build(BuildContext context) => TopAppBarLayout(
+  Widget build(BuildContext context) => LayoutBuilder(
-        custom: (topBar) =>
+        builder: (context, constraint) => StructuralLayout.withTopAppBar(
-            topBar?.copyWith.title(const TextWrapper('New Title')),
+          barId: constraint.maxWidth < 600 ? 'mobile' : 'desktop',
-        body: const Center(
+          custom: (topBar) =>
-          child: Text(
+              topBar?.copyWith.title(const TextWrapper('New Title')),
-            'Body',
+          body: const Center(
+            child: Text(
+              'Body',
+            ),
           ),
         ),
       );

packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_1.dart

@@ -5,7 +5,7 @@ class BottomNavigationBarLayoutPage1 extends StatelessWidget {
   const BottomNavigationBarLayoutPage1({super.key});
 
   @override
-  Widget build(BuildContext context) => BottomNavigationBarLayout(
+  Widget build(BuildContext context) => StructuralLayout.withBottomNavBar(
         custom: (p0) => p0?.copyWith.call(currentIndex: 0),
         body: const TopAppBarLayout(
           body: Center(

packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_2.dart

@@ -5,7 +5,7 @@ class BottomNavigationBarLayoutPage2 extends StatelessWidget {
   const BottomNavigationBarLayoutPage2({super.key});
 
   @override
-  Widget build(BuildContext context) => BottomNavigationBarLayout(
+  Widget build(BuildContext context) => StructuralLayout.withBottomNavBar(
         custom: (p0) => p0?.copyWith.currentIndex(1),
         body: const TopAppBarLayout(
           body: Center(

packages/wyatt_ui_layout/example/macos/.gitignore

@@ -1,5 +1,6 @@
 # Flutter-related
-**/Flutter/ephemeral/
+Flutter/ephemeral/
+Flutter/Generated.xcconfig
 **/Pods/
 
 # Xcode-related

packages/wyatt_ui_layout/example/macos/Flutter/ephemeral/Flutter-Generated.xcconfig

@@ -1,11 +0,0 @@
-// This is a generated file; do not edit or check into version control.
-FLUTTER_ROOT=/Users/maloleon/Library/flutter
-FLUTTER_APPLICATION_PATH=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example
-COCOAPODS_PARALLEL_CODE_SIGN=true
-FLUTTER_BUILD_DIR=build
-FLUTTER_BUILD_NAME=1.0.0
-FLUTTER_BUILD_NUMBER=1
-DART_OBFUSCATION=false
-TRACK_WIDGET_CREATION=true
-TREE_SHAKE_ICONS=false
-PACKAGE_CONFIG=.dart_tool/package_config.json

packages/wyatt_ui_layout/example/macos/Flutter/ephemeral/flutter_export_environment.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-# This is a generated file; do not edit or check into version control.
-export "FLUTTER_ROOT=/Users/maloleon/Library/flutter"
-export "FLUTTER_APPLICATION_PATH=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example"
-export "COCOAPODS_PARALLEL_CODE_SIGN=true"
-export "FLUTTER_BUILD_DIR=build"
-export "FLUTTER_BUILD_NAME=1.0.0"
-export "FLUTTER_BUILD_NUMBER=1"
-export "DART_OBFUSCATION=false"
-export "TRACK_WIDGET_CREATION=true"
-export "TREE_SHAKE_ICONS=false"
-export "PACKAGE_CONFIG=.dart_tool/package_config.json"

packages/wyatt_ui_layout/example/macos/Runner.xcodeproj/project.pbxproj

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

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

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

packages/wyatt_ui_layout/example/pubspec.yaml

@@ -18,7 +18,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=3.0.0 <4.0.0"
 
 # Dependencies specify other packages that your package needs in order to work.
 # To automatically upgrade your package dependencies to the latest versions

packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/content_layout.dart

@@ -0,0 +1,39 @@
+// Copyright (C) 2022 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+import 'package:wyatt_ui_layout/wyatt_ui_layout.dart';
+
+/// {@template content_layout}
+/// An abstract class that provides a base for creating custom content layout
+/// widgets.
+/// {@endtemplate}
+abstract class ContentLayout extends Layout {
+  /// {@macro content_layout}
+  const ContentLayout({super.key});
+
+  factory ContentLayout.withGrid({
+    required List<Widget> children,
+    double verticalGap = 30,
+    double horizontalGap = 30,
+  }) =>
+      GridLayout(
+        verticalGap: verticalGap,
+        horizontalGap: horizontalGap,
+        children: children,
+      );
+}

packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/content_layouts.dart

@@ -14,4 +14,5 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+export './content_layout.dart';
 export './grid_layout.dart';

packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/grid_layout.dart

@@ -16,7 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/content_layouts/content_layout.dart';
 
 /// {@template grid_layout}
 /// A concrete implementation of the [ContentLayout] abstract class for a layout

packages/wyatt_ui_layout/lib/src/presentation/layouts/layout.dart

@@ -28,21 +28,3 @@ abstract class Layout extends StatelessWidget {
   /// {@macro layout}
   const Layout({super.key});
 }
-
-/// {@template structural_layout}
-/// An abstract class that provides a base for creating custom structural layout
-/// widgets.
-/// {@endtemplate}
-abstract class StructuralLayout extends Layout {
-  /// {@macro structural_layout}
-  const StructuralLayout({super.key});
-}
-
-/// {@template content_layout}
-/// An abstract class that provides a base for creating custom content layout
-/// widgets.
-/// {@endtemplate}
-abstract class ContentLayout extends Layout {
-  /// {@macro content_layout}
-  const ContentLayout({super.key});
-}

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/bottom_navigation_bar_layout.dart

@@ -19,6 +19,7 @@ import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_layout/src/core/scaffold_fields_wrapper.dart';
 import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/structural_layout.dart';
 
 /// {@template bottom_navigation_bar_layout}
 /// A concrete implementation of the [Layout] abstract class for a layout which
@@ -29,6 +30,7 @@ class BottomNavigationBarLayout extends StructuralLayout {
   const BottomNavigationBarLayout({
     required this.body,
     this.custom,
+    this.barId,
     this.scaffoldFieldsWrapper,
     super.key,
   });
@@ -41,15 +43,23 @@ class BottomNavigationBarLayout extends StructuralLayout {
   final BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
       custom;
 
+  /// The parameter [barId] enables to specify the particular
+  /// bottom bar to utilize.
+  final String? barId;
+
+  /// The [scaffoldFieldsWrapper] is a final variable that serves as a wrapper
+  /// for customizing the scaffold.
+  /// It allows for tailored modifications and enhancements to the standard
+  /// scaffold functionality.
   final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
 
   @override
   Widget build(BuildContext context) => Scaffold(
         body: body,
         bottomNavigationBar: custom?.call(
-              context.components.bottomNavigationBar,
+              context.components.bottomNavigationBarComponent(barId).call(),
             ) ??
-            context.components.bottomNavigationBar,
+            context.components.bottomNavigationBarComponent(barId).call(),
         floatingActionButtonLocation:
             scaffoldFieldsWrapper?.floatingActionButtonLocation,
         floatingActionButtonAnimator:

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/frame_layout.dart

@@ -18,7 +18,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_layout/src/core/scaffold_fields_wrapper.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/structural_layout.dart';
 
 /// {@template frame_layout}
 /// A layout that contains a top app bar, a body and a bottom navigation bar.
@@ -36,6 +36,9 @@ class FrameLayout extends StructuralLayout {
     this.customAppBar,
     this.customBottomNavBar,
     this.customFloatingActionButton,
+    this.appBarId,
+    this.bottomNavBarId,
+    this.floatingActionButtonId,
     this.height = 60,
     this.scaffoldFieldsWrapper,
     super.key,
@@ -53,6 +56,18 @@ class FrameLayout extends StructuralLayout {
   final FloatingActionButtonComponent? Function(FloatingActionButtonComponent?)?
       customFloatingActionButton;
 
+  /// The parameter [appBarId] enables to specify the particular
+  /// app bar to utilize.
+  final String? appBarId;
+
+  /// The parameter [bottomNavBarId] enables to specify the particular
+  /// bottom bar to utilize.
+  final String? bottomNavBarId;
+
+  /// The parameter [floatingActionButtonId] enables to specify
+  /// the particular floating action button to utilize.
+  final String? floatingActionButtonId;
+
   /// The main content of the layout.
   final Widget body;
 
@@ -63,20 +78,27 @@ class FrameLayout extends StructuralLayout {
 
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: (customAppBar?.call(context.components.topAppBar) != null ||
+        appBar: (customAppBar
-                context.components.topAppBar != null)
+                    ?.call(context.components.topAppBarComponent(appBarId)()) !=
+                null)
             ? PreferredSize(
                 preferredSize: Size.fromHeight(height),
-                child: customAppBar?.call(context.components.topAppBar) ??
+                child: customAppBar?.call(
-                    context.components.topAppBar!,
+                      context.components.topAppBarComponent(appBarId)(),
+                    ) ??
+                    context.components.topAppBarComponent(appBarId)(),
               )
             : null,
-        floatingActionButton: customFloatingActionButton
+        floatingActionButton: customFloatingActionButton?.call(
-                ?.call(context.components.floatingActionButton) ??
+              context.components
-            context.components.floatingActionButton,
+                  .floatingActionButtonComponent(floatingActionButtonId)(),
-        bottomNavigationBar:
+            ) ??
-            customBottomNavBar?.call(context.components.bottomNavigationBar) ??
+            context.components
-                context.components.bottomNavigationBar,
+                .floatingActionButtonComponent(floatingActionButtonId)(),
+        bottomNavigationBar: customBottomNavBar?.call(
+              context.components.bottomNavigationBarComponent(bottomNavBarId)(),
+            ) ??
+            context.components.bottomNavigationBarComponent(bottomNavBarId)(),
         body: body,
         floatingActionButtonLocation:
             scaffoldFieldsWrapper?.floatingActionButtonLocation,

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/structural_layout.dart

@@ -0,0 +1,99 @@
+// Copyright (C) 2022 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+import 'package:wyatt_ui_layout/wyatt_ui_layout.dart';
+
+typedef ComponentCallBack<T extends Component> = T? Function(T? component);
+
+/// {@template structural_layout}
+/// An abstract class that provides a base for creating custom structural layout
+/// widgets.
+/// {@endtemplate}
+abstract class StructuralLayout extends Layout {
+  /// {@macro structural_layout}
+  const StructuralLayout({super.key});
+
+  factory StructuralLayout.withTopAppBar({
+    required Widget body,
+    ComponentCallBack<TopAppBarComponent>? custom,
+    String? barId,
+    double height = 60,
+    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
+  }) =>
+      TopAppBarLayout(
+        body: body,
+        barId: barId,
+        custom: custom,
+        height: height,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
+      );
+
+  factory StructuralLayout.withTopNavigationBar({
+    required Widget body,
+    ComponentCallBack<TopNavigationBarComponent>? custom,
+    String? barId,
+    double height = 60,
+    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
+  }) =>
+      TopNavigationBarLayout(
+        body: body,
+        barId: barId,
+        custom: custom,
+        height: height,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
+      );
+
+  factory StructuralLayout.withFrame({
+    required Widget body,
+    ComponentCallBack<TopAppBarComponent>? customAppBar,
+    ComponentCallBack<BottomNavigationBarComponent>? customBottomNavBar,
+    ComponentCallBack<FloatingActionButtonComponent>?
+        customFloatingActionButton,
+    String? appBarId,
+    String? bottomNavBarId,
+    String? floatingActionButtonId,
+    double height = 60,
+    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
+  }) =>
+      FrameLayout(
+        body: body,
+        customAppBar: customAppBar,
+        customBottomNavBar: customBottomNavBar,
+        customFloatingActionButton: customFloatingActionButton,
+        appBarId: appBarId,
+        bottomNavBarId: bottomNavBarId,
+        floatingActionButtonId: floatingActionButtonId,
+        height: height,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
+      );
+
+  factory StructuralLayout.withBottomNavBar({
+    required Widget? body,
+    BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
+        custom,
+    String? barId,
+    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
+  }) =>
+      BottomNavigationBarLayout(
+        body: body,
+        custom: custom,
+        barId: barId,
+        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
+      );
+}

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/structural_layouts.dart

@@ -16,4 +16,5 @@
 
 export './bottom_navigation_bar_layout.dart';
 export './frame_layout.dart';
+export './structural_layout.dart';
 export './top_app_bar_layout.dart';

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/top_app_bar_layout.dart

@@ -18,7 +18,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_layout/src/core/scaffold_fields_wrapper.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/structural_layout.dart';
 
 /// {@template top_bar_layout}
 /// An abstract class for creating layouts with a top bar component.
@@ -27,7 +27,7 @@ import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
 /// component, such as an app bar or navigation bar.
 ///
 /// Implementations of this class must provide a concrete implementation of
-/// the [child] method, which returns the specific top bar component for the
+/// the [appBar] method, which returns the specific top bar component for the
 /// given [BuildContext].
 ///
 /// [T] represents the type of the top bar component.
@@ -38,6 +38,7 @@ abstract class TopBarLayout<T extends TopBarComponent>
   const TopBarLayout({
     required this.body,
     this.custom,
+    this.barId,
     this.height = 60,
     this.scaffoldFieldsWrapper,
     super.key,
@@ -51,20 +52,31 @@ abstract class TopBarLayout<T extends TopBarComponent>
   /// a customized top bar component.
   final T? Function(T?)? custom;
 
+  /// The parameter [barId] enables to specify the particular app bar to use.
+  final String? barId;
+
   /// The height of the top bar.
   final double height;
 
   /// Returns the top bar component for the given [BuildContext].
-  T? child(BuildContext context);
+  T appBar(BuildContext context, String? barId);
 
+  /// The [scaffoldFieldsWrapper] is a final variable that serves as a wrapper
+  /// for customizing the scaffold.
+  /// It allows for tailored modifications and enhancements to the standard
+  /// scaffold functionality.
   final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
 
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: (custom?.call(child(context)) != null || child(context) != null)
+        appBar: (custom?.call(
+                  appBar(context, barId),
+                ) !=
+                null)
             ? PreferredSize(
                 preferredSize: Size.fromHeight(height),
-                child: custom?.call(child(context)) ?? child(context)!,
+                child: custom?.call(appBar(context, barId)) ??
+                    appBar(context, barId),
               )
             : null,
         body: body,
@@ -111,14 +123,16 @@ class TopAppBarLayout extends TopBarLayout<TopAppBarComponent> {
   /// [height] represents the height of the top bar.
   const TopAppBarLayout({
     required super.body,
+    super.barId,
     super.custom,
     super.height,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 
   @override
-  TopAppBarComponent? child(BuildContext context) =>
+  TopAppBarComponent appBar(BuildContext context, String? barId) =>
-      context.components.topAppBar;
+      context.components.topAppBarComponent(barId).call();
 }
 
 /// A concrete implementation of [TopBarLayout] for a navigation bar.
@@ -131,12 +145,14 @@ class TopNavigationBarLayout extends TopBarLayout<TopNavigationBarComponent> {
   /// [height] represents the height of the top bar.
   const TopNavigationBarLayout({
     required super.body,
+    super.barId,
     super.custom,
     super.height,
+    super.scaffoldFieldsWrapper,
     super.key,
   });
 
   @override
-  TopNavigationBarComponent? child(BuildContext context) =>
+  TopNavigationBarComponent appBar(BuildContext context, String? barId) =>
-      context.components.topNavigationBar;
+      context.components.topNavigationBarComponent(barId).call();
 }

packages/wyatt_ui_layout/pubspec.yaml

@@ -6,7 +6,7 @@ version: 0.1.1
 publish_to: https://git.wyatt-studio.fr/api/packages/Wyatt-FOSS/pub
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=3.0.0 <4.0.0"
 
 dependencies:
   flutter: { sdk: flutter }