Hide the fab while scrolling on the notifications page

Wolfteam · Jun 2, 2021 · 68eb851 · 68eb851
1 parent 22182b2
commit 68eb851
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 7 deletions.
diff --git a/lib/presentation/calculator_asc_materials/calculator_sessions_page.dart b/lib/presentation/calculator_asc_materials/calculator_sessions_page.dart
@@ -23,6 +23,7 @@ class CalculatorSessionsPage extends StatefulWidget {
 class _CalculatorSessionsPageState extends State<CalculatorSessionsPage> with SingleTickerProviderStateMixin {
   ScrollController _scrollController;
   AnimationController _hideFabAnimController;
+  int _numberOfItems = 0;
 
   @override
   void initState() {
@@ -40,7 +41,18 @@ class _CalculatorSessionsPageState extends State<CalculatorSessionsPage> with Si
   @override
   Widget build(BuildContext context) {
     final s = S.of(context);
-    return BlocBuilder<CalculatorAscMaterialsSessionsBloc, CalculatorAscMaterialsSessionsState>(
+    return BlocConsumer<CalculatorAscMaterialsSessionsBloc, CalculatorAscMaterialsSessionsState>(
+      listener: (ctx, state) {
+        state.maybeMap(
+          loaded: (state) {
+            if (_numberOfItems != state.sessions.length) {
+              _hideFabAnimController.forward();
+            }
+            _numberOfItems = state.sessions.length;
+          },
+          orElse: () {},
+        );
+      },
       builder: (ctx, state) => Scaffold(
         appBar: state.map(
           loading: (_) => null,
@@ -49,10 +61,12 @@ class _CalculatorSessionsPageState extends State<CalculatorSessionsPage> with Si
             actions: [
               if (state.sessions.length > 1)
                 IconButton(
+                  tooltip: s.priority,
                   icon: const Icon(Icons.unfold_more),
                   onPressed: () => _showReorderDialog(state.sessions, context),
                 ),
               IconButton(
+                tooltip: s.information,
                 icon: const Icon(Icons.info),
                 onPressed: () => _showInfoDialog(context),
               ),
@@ -78,7 +92,7 @@ class _CalculatorSessionsPageState extends State<CalculatorSessionsPage> with Si
                 return ListView.separated(
                   controller: _scrollController,
                   itemCount: state.sessions.length,
-                  separatorBuilder: (ctx, index) => const Divider(),
+                  separatorBuilder: (ctx, index) => const Divider(height: 1),
                   itemBuilder: (ctx, index) => SessionListItem(session: state.sessions[index]),
                 );
               },

diff --git a/lib/presentation/notifications/notifications_page.dart b/lib/presentation/notifications/notifications_page.dart
@@ -4,7 +4,9 @@ import 'package:genshindb/application/bloc.dart';
 import 'package:genshindb/domain/enums/enums.dart';
 import 'package:genshindb/domain/models/models.dart' as models;
 import 'package:genshindb/generated/l10n.dart';
+import 'package:genshindb/presentation/shared/app_fab.dart';
 import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart';
+import 'package:genshindb/presentation/shared/extensions/scroll_controller_extensions.dart';
 import 'package:genshindb/presentation/shared/info_dialog.dart';
 import 'package:genshindb/presentation/shared/nothing_found_column.dart';
 import 'package:genshindb/presentation/shared/styles.dart';
@@ -16,7 +18,29 @@ import 'widgets/items/notification_list_tile.dart';
 import 'widgets/items/notification_realm_currency_subtitle.dart';
 import 'widgets/items/notification_resin_list_subtitle.dart';
 
-class NotificationsPage extends StatelessWidget {
+class NotificationsPage extends StatefulWidget {
+  @override
+  _NotificationsPageState createState() => _NotificationsPageState();
+}
+
+class _NotificationsPageState extends State<NotificationsPage> with SingleTickerProviderStateMixin {
+  ScrollController _scrollController;
+  AnimationController _hideFabAnimController;
+  int _numberOfItems = 0;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _scrollController = ScrollController();
+    _hideFabAnimController = AnimationController(
+      vsync: this,
+      duration: kThemeAnimationDuration,
+      value: 1, // initially visible
+    );
+    _scrollController.addListener(() => _scrollController.handleScrollForFab(_hideFabAnimController, hideOnTop: false));
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -25,11 +49,21 @@ class NotificationsPage extends StatelessWidget {
       appBar: AppBar(
         title: Text(s.notifications),
         actions: [
-          IconButton(icon: const Icon(Icons.info), onPressed: () => _showInfoDialog(context)),
+          IconButton(
+            tooltip: s.information,
+            icon: const Icon(Icons.info),
+            onPressed: () => _showInfoDialog(context),
+          ),
         ],
       ),
       body: SafeArea(
-        child: BlocBuilder<NotificationsBloc, NotificationsState>(
+        child: BlocConsumer<NotificationsBloc, NotificationsState>(
+          listener: (ctx, state) {
+            if (_numberOfItems != state.notifications.length) {
+              _hideFabAnimController.forward();
+            }
+            _numberOfItems = state.notifications.length;
+          },
           builder: (ctx, state) => state.map(
             initial: (state) {
               if (state.notifications.isEmpty) {
@@ -38,6 +72,7 @@ class NotificationsPage extends StatelessWidget {
 
               return GroupedListView<models.NotificationItem, String>(
                 elements: state.notifications,
+                controller: _scrollController,
                 groupBy: (item) => s.translateAppNotificationType(item.type),
                 itemBuilder: (context, element) => _buildNotificationItem(state.useTwentyFourHoursFormat, element),
                 groupSeparatorBuilder: (type) => Container(
@@ -50,13 +85,23 @@ class NotificationsPage extends StatelessWidget {
           ),
         ),
       ),
-      floatingActionButton: FloatingActionButton(
+      floatingActionButton: AppFab(
         onPressed: () => _showAddModal(context),
-        child: const Icon(Icons.add),
+        icon: const Icon(Icons.add),
+        hideFabAnimController: _hideFabAnimController,
+        scrollController: _scrollController,
+        mini: false,
       ),
     );
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    _hideFabAnimController.dispose();
+    super.dispose();
+  }
+
   Widget _buildNotificationItem(bool useTwentyFourHoursFormat, models.NotificationItem element) {
     Widget subtitle;
     switch (element.type) {