refactor: header component (#13)

booktcc · Oct 13, 2022 · f87931e · f87931e
1 parent a9756c3
commit f87931e
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 49 deletions.
diff --git a/lib/components/header.dart b/lib/components/header.dart
@@ -1,8 +1,21 @@
 import 'package:app_flutter/configs/themes.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 class Header extends StatefulWidget with PreferredSizeWidget {
-  const Header({super.key});
+  final List<Widget>? actions;
+  final Widget? leading;
+  final bool showBackButton;
+  final bool showLogo;
+  final String? title;
+  const Header({
+    super.key,
+    this.actions,
+    this.leading,
+    this.showBackButton = false,
+    this.showLogo = false,
+    this.title,
+  });
 
   @override
   State<Header> createState() => _HeaderState();
@@ -16,53 +29,55 @@ class _HeaderState extends State<Header> {
   Widget build(BuildContext context) {
     return AppBar(
       toolbarHeight: 52,
-      centerTitle: true,
-      title: RichText(
-        text: const TextSpan(
-          style: TextStyle(
-            fontSize: 18,
-            letterSpacing: 18 * 0.29,
-            fontWeight: FontWeight.w600,
-          ),
-          children: [
-            TextSpan(text: "LIVROD"),
-            TextSpan(
-              text: "IN",
-              style: TextStyle(
-                color: red,
+      centerTitle: widget.showLogo || widget.title == null,
+      title: widget.title != null
+          ? Text(
+              widget.title!,
+              style: const TextStyle(
+                fontWeight: FontWeight.w900,
+                fontSize: 18,
               ),
-            ),
-          ],
-        ),
-      ),
+            )
+          : widget.showLogo
+              ? RichText(
+                  text: const TextSpan(
+                    style: TextStyle(
+                      fontSize: 18,
+                      letterSpacing: 18 * 0.29,
+                      fontWeight: FontWeight.w600,
+                    ),
+                    children: [
+                      TextSpan(text: "LIVROD"),
+                      TextSpan(
+                        text: "IN",
+                        style: TextStyle(
+                          color: red,
+                        ),
+                      ),
+                    ],
+                  ),
+                )
+              : null,
       backgroundColor: dark,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(
-          bottom: Radius.circular(20),
-        ),
-      ),
       actions: [
         Padding(
           padding: const EdgeInsets.only(right: 8),
           child: Row(
-            children: [
-              IconButton(
-                icon: const Icon(Icons.notifications),
-                onPressed: () {},
-              ),
-              IconButton(
-                icon: const Icon(Icons.search),
-                onPressed: () {},
-              ),
-            ],
+            children: widget.actions ?? [],
           ),
         ),
       ],
-      leading: IconButton(
-        icon: const Icon(Icons.settings),
-        onPressed: () {},
+      leading: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (widget.showBackButton)
+            IconButton(
+              icon: const Icon(Icons.arrow_back),
+              onPressed: () => Get.back(),
+            ),
+          if (widget.leading != null) widget.leading!,
+        ],
       ),
-      elevation: 0,
     );
   }
 }
diff --git a/storybook/components/header.stories.dart b/storybook/components/header.stories.dart
@@ -0,0 +1,89 @@
+import 'package:app_flutter/components/header.dart';
+import 'package:flutter/material.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class HeaderStories extends StatefulWidget {
+  const HeaderStories({super.key});
+
+  @override
+  State<HeaderStories> createState() => _HeaderStoriesState();
+}
+
+enum _HeaderStoriesType {
+  homepage,
+  profile,
+  offer,
+  bookDetails;
+
+  Header header() {
+    switch (this) {
+      case _HeaderStoriesType.homepage:
+        return Header(
+          showLogo: true,
+          leading: IconButton(
+            icon: const Icon(Icons.settings),
+            onPressed: () {},
+          ),
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.notifications),
+              onPressed: () {},
+            ),
+            IconButton(
+              icon: const Icon(Icons.search),
+              onPressed: () {},
+            ),
+          ],
+        );
+      case _HeaderStoriesType.profile:
+        return Header(
+          title: 'Perfil',
+          showBackButton: true,
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.manage_accounts),
+              onPressed: () {},
+            ),
+          ],
+        );
+      case _HeaderStoriesType.offer:
+        return const Header(
+          title: 'Doações',
+          showBackButton: true,
+        );
+      case _HeaderStoriesType.bookDetails:
+        return Header(
+          showLogo: true,
+          showBackButton: true,
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.notifications),
+              onPressed: () {},
+            ),
+            IconButton(
+              icon: const Icon(Icons.search),
+              onPressed: () {},
+            ),
+          ],
+        );
+    }
+  }
+}
+
+class _HeaderStoriesState extends State<HeaderStories> {
+  final _HeaderStoriesType current = _HeaderStoriesType.homepage;
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: context.knobs.options(
+      label: "Variantes",
+      initial: _HeaderStoriesType.homepage.header(),
+      options: _HeaderStoriesType.values
+          .map((e) => Option(
+                label: e.name.toString(),
+                value: e.header(),
+              ))
+          .toList(),
+    ));
+  }
+}
diff --git a/storybook/main.dart b/storybook/main.dart
@@ -4,7 +4,6 @@ import 'package:app_flutter/components/button_option.dart';
 import 'package:app_flutter/components/button_option_badge.dart';
 import 'package:app_flutter/components/cards/book_card.dart';
 import 'package:app_flutter/components/cards/genrer_card.dart';
-import 'package:app_flutter/components/header.dart';
 import 'package:app_flutter/components/transaction_painel.dart';
 import 'package:app_flutter/configs/themes.dart';
 import 'package:app_flutter/pages/home_page.dart';
@@ -14,6 +13,7 @@ import 'package:flutter/material.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
 import 'components/filter_option.stories.dart';
+import 'components/header.stories.dart';
 import 'components/profile_icon.stories.dart';
 import 'components/profile_info.stories.dart';
 import 'components/toggle_offer_status.stories.dart';
@@ -34,13 +34,11 @@ class StorybookApp extends StatefulWidget {
 class _StorybookAppState extends State<StorybookApp> {
   @override
   Widget build(BuildContext context) => Storybook(
-        wrapperBuilder: (context, child) => SafeArea(
-          child: MaterialApp(
-            title: 'Livrodin',
-            theme: themeData,
-            home: child,
-            debugShowCheckedModeBanner: false,
-          ),
+        wrapperBuilder: (context, child) => MaterialApp(
+          title: 'Livrodin',
+          theme: themeData,
+          home: child,
+          debugShowCheckedModeBanner: false,
         ),
         stories: [
           Story(
@@ -57,9 +55,7 @@ class _StorybookAppState extends State<StorybookApp> {
           ),
           Story(
             name: 'Components/Header',
-            builder: (context) => const Scaffold(
-              appBar: Header(),
-            ),
+            builder: (context) => const HeaderStories(),
           ),
           Story(
             name: 'Components/BottomMenu',