HeaderBarを固定 (#167)

* add: floating app bar * Revert "add: floating app bar" This reverts commit 82b1d50. * fix: ticket と eventのHeaderItem順を修正 * fix: appBarに変更 * fix: headerBarのUI調整 * add: HeaderBarの背景にblurを追加 * fix: scroll position bug * fix: alignment
FlutterKaigi · Sep 26, 2023 · eeecda5 · eeecda5
1 parent 8fe9b57
commit eeecda5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 45 deletions.
diff --git a/lib/app/home_page.dart b/lib/app/home_page.dart
@@ -34,39 +34,37 @@ class MainPage extends HookWidget {
       sponsor: GlobalObjectKey('sponsorSectionKey'),
       staff: GlobalObjectKey('staffSectionKey'),
     );
+    const headerBarKey = GlobalObjectKey('headerBarKey');
+
+    Future<void> scrollToSection(GlobalKey key) async {
+      final displayHeight = MediaQuery.sizeOf(context).height;
+      final targetWidgetHeight = key.currentContext!.size!.height;
+      final alignment = kToolbarHeight / (displayHeight - targetWidgetHeight);
+
+      return Scrollable.ensureVisible(
+        key.currentContext!,
+        alignment: alignment,
+        curve: Curves.easeOutCirc,
+        duration: const Duration(milliseconds: 750),
+      );
+    }
 
     final items = <HeaderItemButtonData>[
       HeaderItemButtonData(
         title: 'Access',
-        onPressed: () async => Scrollable.ensureVisible(
-          sectionKeys.access.currentContext!,
-          curve: Curves.easeOutCirc,
-          duration: const Duration(milliseconds: 750),
-        ),
+        onPressed: () async => scrollToSection(sectionKeys.access),
       ),
       HeaderItemButtonData(
-        title: 'Event',
-        onPressed: () async => Scrollable.ensureVisible(
-          sectionKeys.event.currentContext!,
-          curve: Curves.easeOutCirc,
-          duration: const Duration(milliseconds: 750),
-        ),
+        title: 'Ticket',
+        onPressed: () async => scrollToSection(sectionKeys.ticket),
       ),
       HeaderItemButtonData(
-        title: 'Ticket',
-        onPressed: () async => Scrollable.ensureVisible(
-          sectionKeys.ticket.currentContext!,
-          curve: Curves.easeOutCirc,
-          duration: const Duration(milliseconds: 750),
-        ),
+        title: 'Event',
+        onPressed: () async => scrollToSection(sectionKeys.event),
       ),
       HeaderItemButtonData(
         title: 'Staff',
-        onPressed: () async => Scrollable.ensureVisible(
-          sectionKeys.staff.currentContext!,
-          curve: Curves.easeOutCirc,
-          duration: const Duration(milliseconds: 750),
-        ),
+        onPressed: () async => scrollToSection(sectionKeys.staff),
       ),
     ];
 
@@ -77,6 +75,16 @@ class MainPage extends HookWidget {
         sectionKeys: sectionKeys,
         items: items,
       ),
+      appBar: HeaderBar(
+        items: items,
+        onTitleTap: () async => scrollController.animateTo(
+          0,
+          duration: const Duration(milliseconds: 750),
+          curve: Curves.easeOutCirc,
+        ),
+        key: headerBarKey,
+      ),
+      extendBodyBehindAppBar: true,
     );
   }
 }
@@ -131,19 +139,8 @@ class _MainPageBody extends StatelessWidget {
         CustomScrollView(
           controller: scrollController,
           slivers: [
-            _Sliver(
-              padding: padding,
-              child: HeaderBar(
-                items: items,
-                onTitleTap: () async => scrollController.animateTo(
-                  0,
-                  duration: const Duration(milliseconds: 750),
-                  curve: Curves.easeOutCirc,
-                ),
-              ),
-            ),
             const SliverToBoxAdapter(
-              child: Spaces.vertical_30,
+              child: Spaces.vertical_40,
             ),
             _Sliver(
               padding: padding,

diff --git a/lib/features/header/ui/header_widget.dart b/lib/features/header/ui/header_widget.dart
@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:animations/animations.dart';
 import 'package:confwebsite2023/core/components/flutter_kaigi_logo.dart';
 import 'package:confwebsite2023/core/components/responsive_widget.dart';
@@ -27,10 +29,7 @@ class HeaderBar extends HookWidget implements PreferredSizeWidget {
         // SiteName
         TextButton(
           onPressed: onTitleTap,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(vertical: 4),
-            child: logo,
-          ),
+          child: logo,
         );
 
     final mobileBar = Row(
@@ -76,9 +75,9 @@ class HeaderBar extends HookWidget implements PreferredSizeWidget {
               iconColor: baselineColorScheme.ref.secondary.secondary80,
               textStyle: GoogleFonts.poppins(
                 color: baselineColorScheme.ref.secondary.secondary80,
-                fontSize: 18,
+                fontSize: 24,
                 fontWeight: FontWeight.w600,
-                height: 1.5,
+                height: 1.2,
               ),
             ),
           ),
@@ -99,11 +98,19 @@ class HeaderBar extends HookWidget implements PreferredSizeWidget {
         ],
       ),
     );
-    return Padding(
-      padding: const EdgeInsets.only(top: 10, left: 10, right: 10),
-      child: ResponsiveWidget(
-        largeWidget: desktopBar,
-        smallWidget: mobileBar,
+    return ClipRRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(
+          sigmaX: 16,
+          sigmaY: 16,
+        ),
+        child: Padding(
+          padding: const EdgeInsets.all(10),
+          child: ResponsiveWidget(
+            largeWidget: desktopBar,
+            smallWidget: mobileBar,
+          ),
+        ),
       ),
     );
   }