top app bar

ZebraDevs · May 10, 2024 · 1828e9e · 1828e9e
1 parent 2c4649f
commit 1828e9e
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 60 deletions.
diff --git a/example/lib/home.dart b/example/lib/home.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:zeta_example/pages/components/accordion_example.dart';
-import 'package:zeta_example/pages/components/app_bar_example.dart';
+import 'package:zeta_example/pages/components/top_app_bar_example.dart';
 import 'package:zeta_example/pages/components/avatar_example.dart';
 import 'package:zeta_example/pages/components/badges_example.dart';
 import 'package:zeta_example/pages/components/banner_example.dart';

diff --git a/...lib/pages/components/app_bar_example.dart → ...pages/components/top_app_bar_example.dart b/...lib/pages/components/app_bar_example.dart → ...pages/components/top_app_bar_example.dart
@@ -7,7 +7,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 class AppBarExample extends StatefulWidget {
   const AppBarExample({super.key});
 
-  static const String name = 'AppBar';
+  static const String name = 'Top App Bar';
 
   @override
   State<AppBarExample> createState() => _AppBarExampleState();
@@ -30,7 +30,7 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Default
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu_rounded),
@@ -64,7 +64,7 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Centered
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 type: ZetaAppBarType.centeredTitle,
                 leading: IconButton(
                   onPressed: () {},
@@ -83,7 +83,7 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Contextual
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(ZetaIcons.close_round),
@@ -115,7 +115,7 @@ class _AppBarExampleState extends State<AppBarExample> {
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
               child: Column(
                 children: [
-                  ZetaAppBar(
+                  ZetaTopAppBar(
                     type: ZetaAppBarType.centeredTitle,
                     leading: BackButton(),
                     title: Text("Title"),
@@ -151,7 +151,7 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Extended
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 type: ZetaAppBarType.extendedTitle,
                 leading: IconButton(
                   onPressed: () {},

diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
@@ -4,7 +4,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import 'pages/assets/icon_widgetbook.dart';
 import 'pages/components/accordion_widgetbook.dart';
-import 'pages/components/app_bar_widgetbook.dart';
+import 'pages/components/top_app_bar_widgetbook.dart';
 import 'pages/components/avatar_widgetbook.dart';
 import 'pages/components/badges_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
@@ -61,9 +61,10 @@ class HotReload extends StatelessWidget {
           isInitiallyExpanded: false,
           children: [
             WidgetbookComponent(
-              name: 'App Bar',
+              name: 'Top App Bar',
               useCases: [
-                WidgetbookUseCase(name: 'Default', builder: (context) => defaultAppBarUseCase(context)),
+                WidgetbookUseCase(name: 'Default', builder: (context) => defaultTopAppBarUseCase(context)),
+                WidgetbookUseCase(name: 'Extended', builder: (context) => extendedTopAppBarUseCase(context)),
                 WidgetbookUseCase(name: 'Search', builder: (context) => searchAppBarUseCase(context)),
               ],
             ),

diff --git a/.../pages/components/app_bar_widgetbook.dart → ...es/components/top_app_bar_widgetbook.dart b/.../pages/components/app_bar_widgetbook.dart → ...es/components/top_app_bar_widgetbook.dart
@@ -6,7 +6,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-Widget defaultAppBarUseCase(BuildContext context) {
+Widget defaultTopAppBarUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
@@ -17,7 +17,7 @@ Widget defaultAppBarUseCase(BuildContext context) {
           options: [
             ZetaAppBarType.defaultAppBar,
             ZetaAppBarType.centeredTitle,
-            ZetaAppBarType.extendedTitle,
+            // ZetaAppBarType.extendedTitle,
           ],
           initialOption: ZetaAppBarType.defaultAppBar,
           labelBuilder: (type) => type.name,
@@ -48,7 +48,7 @@ Widget defaultAppBarUseCase(BuildContext context) {
           labelBuilder: (icon) => icon.key.toString(),
         );
 
-        return ZetaAppBar(
+        return ZetaTopAppBar(
           leading: IconButton(
             onPressed: () {},
             icon: leadingIcon,
@@ -77,6 +77,86 @@ Widget defaultAppBarUseCase(BuildContext context) {
   );
 }
 
+Widget extendedTopAppBarUseCase(BuildContext context) {
+  return WidgetbookTestWidget(widget: LayoutBuilder(builder: (context, constraints) {
+    final title = context.knobs.string(label: "Title", initialValue: "Title");
+
+    final type = context.knobs.list(
+      label: "Type",
+      options: [
+        ZetaAppBarType.defaultAppBar,
+        ZetaAppBarType.centeredTitle,
+        // ZetaAppBarType.extendedTitle,
+      ],
+      initialOption: ZetaAppBarType.defaultAppBar,
+      labelBuilder: (type) => type.name,
+    );
+
+    final enabledActions = context.knobs.boolean(
+      label: "Enabled actions",
+      initialValue: true,
+    );
+
+    final leadingIcon = context.knobs.list<Icon>(
+      label: "Leading Icon",
+      options: [
+        Icon(
+          key: Key("Menu"),
+          Icons.menu_rounded,
+        ),
+        Icon(
+          key: Key("Close"),
+          ZetaIcons.close_round,
+        ),
+        Icon(
+          key: Key("Arrow back"),
+          ZetaIcons.arrow_back_round,
+        ),
+      ],
+      initialOption: Icon(Icons.menu_rounded),
+      labelBuilder: (icon) => icon.key.toString(),
+    );
+
+    return SizedBox(
+      width: constraints.maxWidth,
+      height: 200, // constraints.maxHeight,
+      child: CustomScrollView(
+        slivers: [
+          ZetaTopAppBar(
+            type: ZetaAppBarType.extendedTitle,
+            leading: IconButton(
+              onPressed: () {},
+              icon: leadingIcon,
+            ),
+            title: Text(title),
+            actions: enabledActions
+                ? [
+                    IconButton(
+                      onPressed: () {},
+                      icon: Icon(Icons.language),
+                    ),
+                    IconButton(
+                      onPressed: () {},
+                      icon: Icon(Icons.favorite),
+                    ),
+                    IconButton(
+                      onPressed: () {},
+                      icon: Icon(ZetaIcons.more_vertical_round),
+                    )
+                  ]
+                : null,
+          ),
+          SliverFillRemaining(
+            child: ColoredBox(
+              color: Colors.green,
+            ),
+          )
+        ],
+      ),
+    );
+  }));
+}
+
 Widget searchAppBarUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: _SearchUseCase(),
@@ -135,7 +215,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
       initialValue: false,
     );
 
-    return ZetaAppBar(
+    return ZetaTopAppBar(
       leading: IconButton(
         onPressed: () {},
         icon: leadingIcon,

diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
@@ -41,11 +41,11 @@ class ZetaButtonGroup extends StatelessWidget {
     for (final (index, button) in buttons.indexed) {
       mappedButtons.add(
         button.copyWith(
-          large: isLarge,
-          inverse: isInverse,
-          round: rounded,
-          fin: index == buttons.length - 1,
-          initial: index == 0,
+          isLarge: isLarge,
+          isInverse: isInverse,
+          rounded: rounded,
+          isFinal: index == buttons.length - 1,
+          isInitial: index == 0,
         ),
       );
     }
@@ -153,23 +153,23 @@ class ZetaGroupButton extends StatefulWidget {
 
   /// Returns copy of [ZetaGroupButton] with fields.
   ZetaGroupButton copyWith({
-    bool? fin,
-    bool? initial,
-    bool? large,
-    bool? round,
-    bool? inverse,
+    bool? isFinal,
+    bool? isInitial,
+    bool? isLarge,
+    bool? rounded,
+    bool? isInverse,
   }) {
     return ZetaGroupButton._(
       key: key,
       label: label,
       icon: icon,
       onPressed: onPressed,
       dropdown: dropdown,
-      isFinal: fin ?? isFinal,
-      isInitial: initial ?? isInitial,
-      isLarge: large ?? isLarge,
-      rounded: round ?? rounded,
-      isInverse: inverse ?? isInverse,
+      isFinal: isFinal ?? this.isFinal,
+      isInitial: isInitial ?? this.isInitial,
+      isLarge: isLarge ?? this.isLarge,
+      rounded: rounded ?? this.rounded,
+      isInverse: isInverse ?? this.isInverse,
     );
   }
 
@@ -327,11 +327,6 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(
-      DiagnosticsProperty<MaterialStatesController>(
-        'controller',
-        controller,
-      ),
-    );
+    properties.add(DiagnosticsProperty<MaterialStatesController>('controller', controller));
   }
 }
diff --git a/lib/src/components/screen_header_bar/screen_header_bar.dart b/lib/src/components/screen_header_bar/screen_header_bar.dart
@@ -27,7 +27,7 @@ class ZetaScreenHeaderBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ZetaAppBar(
+    return ZetaTopAppBar(
       leading: IconButton(
         onPressed: () async => Navigator.maybePop(context),
         icon: Icon(rounded ? ZetaIcons.chevron_left_round : ZetaIcons.chevron_left_sharp),