refactor(ui_layouts): Refactored block using the UI components package, introducing breaking changes

2023-08-28 14:47:15 +02:00
parent 8be4efbb52
commit 791a6d0f83
24 changed files with 477 additions and 62 deletions
@@ -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,
+      );
+}
@@ -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';
@@ -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
@@ -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});
-}
@@ -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:
@@ -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 ||
-                context.components.topAppBar != null)
+        appBar: (customAppBar
+                    ?.call(context.components.topAppBarComponent(appBarId)()) !=
+                null)
            ? PreferredSize(
                preferredSize: Size.fromHeight(height),
-                child: customAppBar?.call(context.components.topAppBar) ??
-                    context.components.topAppBar!,
+                child: customAppBar?.call(
+                      context.components.topAppBarComponent(appBarId)(),
+                    ) ??
+                    context.components.topAppBarComponent(appBarId)(),
              )
            : null,
-        floatingActionButton: customFloatingActionButton
-                ?.call(context.components.floatingActionButton) ??
-            context.components.floatingActionButton,
-        bottomNavigationBar:
-            customBottomNavBar?.call(context.components.bottomNavigationBar) ??
-                context.components.bottomNavigationBar,
+        floatingActionButton: customFloatingActionButton?.call(
+              context.components
+                  .floatingActionButtonComponent(floatingActionButtonId)(),
+            ) ??
+            context.components
+                .floatingActionButtonComponent(floatingActionButtonId)(),
+        bottomNavigationBar: customBottomNavBar?.call(
+              context.components.bottomNavigationBarComponent(bottomNavBarId)(),
+            ) ??
+            context.components.bottomNavigationBarComponent(bottomNavBarId)(),
        body: body,
        floatingActionButtonLocation:
            scaffoldFieldsWrapper?.floatingActionButtonLocation,
@@ -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,
+      );
+}
@@ -16,4 +16,5 @@

 export './bottom_navigation_bar_layout.dart';
 export './frame_layout.dart';
+export './structural_layout.dart';
 export './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) =>
-      context.components.topAppBar;
+  TopAppBarComponent appBar(BuildContext context, String? barId) =>
+      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) =>
-      context.components.topNavigationBar;
+  TopNavigationBarComponent appBar(BuildContext context, String? barId) =>
+      context.components.topNavigationBarComponent(barId).call();
 }