Merge pull request #2295 from acterglobal/kumar/quick-action-buttons

Quick action buttons

.changes/2295-quick-action-buttons.md

@@ -0,0 +1 @@
+- New Quick action buttons now accessible by swipe-up on bottom navigation bar and from side bar navigation panel

app/lib/common/drag_handle_widget.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class DragHandleWidget extends StatelessWidget {
+  final double? width;
+  final Color? color;
+
+  const DragHandleWidget({
+    super.key,
+    this.width,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 3,
+      width: width ?? 40,
+      decoration: BoxDecoration(
+        color: color ?? Theme.of(context).colorScheme.onSurface,
+        borderRadius: const BorderRadius.all(Radius.circular(30.0)),
+      ),
+    );
+  }
+}

app/lib/common/themes/colors/color_scheme.dart

@@ -12,6 +12,11 @@ Color backgroundColor = const Color(0xff0d0f11);
 //On colors
 Color whiteColor = Colors.white;
 
+Color pinFeatureColor = const Color(0xff7c4a4a);
+Color eventFeatureColor = const Color(0xff206a9a);
+Color taskFeatureColor = const Color(0xff406c6e);
+Color boastFeatureColor = Colors.blueGrey;
+
 var colorScheme = ColorScheme.dark(
   brightness: Brightness.dark,
   //Primary

app/lib/common/widgets/action_button_widget.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class ActionButtonWidget extends StatelessWidget {
+  final String title;
+  final IconData iconData;
+  final Color color;
+  final EdgeInsets? padding;
+  final VoidCallback? onPressed;
+
+  const ActionButtonWidget({
+    super.key,
+    required this.title,
+    required this.iconData,
+    required this.color,
+    this.padding,
+    this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding ?? EdgeInsets.zero,
+      child: TextButton.icon(
+        key: key,
+        onPressed: onPressed,
+        icon: Container(
+          padding: const EdgeInsets.all(10),
+          decoration: BoxDecoration(
+            color: color,
+            borderRadius: const BorderRadius.all(Radius.circular(100)),
+          ),
+          child: Icon(iconData, size: 14),
+        ),
+        label: Text(title),
+      ),
+    );
+  }
+}

app/lib/config/app_shell.dart

@@ -1,5 +1,4 @@
 import 'package:acter/common/providers/common_providers.dart';
-import 'package:acter/common/providers/keyboard_visbility_provider.dart';
 import 'package:acter/common/tutorial_dialogs/bottom_navigation_tutorials/bottom_navigation_tutorials.dart';
 import 'package:acter/common/utils/constants.dart';
 import 'package:acter/common/utils/device.dart';
@@ -11,10 +10,10 @@ import 'package:acter/features/bug_report/providers/bug_report_providers.dart';
 import 'package:acter/features/calendar_sync/calendar_sync.dart';
 import 'package:acter/features/cross_signing/widgets/cross_signing.dart';
 import 'package:acter/features/home/providers/client_providers.dart';
-import 'package:acter/features/home/providers/navigation.dart';
 import 'package:acter/features/home/widgets/sidebar_widget.dart';
 import 'package:acter/features/labs/model/labs_features.dart';
 import 'package:acter/features/labs/providers/labs_providers.dart';
+import 'package:acter/features/main/widgets/bottom_navigation_widget.dart';
 import 'package:acter_flutter_sdk/acter_flutter_sdk.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -203,62 +202,22 @@ class AppShellState extends ConsumerState<AppShell> {
     );
   }
 
-  Widget bottomNavigationWidget(BuildContext context) {
-    final keyboardVisibility = ref.watch(keyboardVisibleProvider);
-    if (keyboardVisibility.valueOrNull != false) {
-      return const SizedBox.shrink();
-    }
-    return Stack(
-      children: [
-        SizedBox(
-          height: 50,
-          child: Row(
-            children: bottomBarItems
-                .map(
-                  (bottomBarNav) => Expanded(
-                    child: Center(
-                      child: SizedBox(
-                        key: bottomBarNav.tutorialGlobalKey,
-                        height: 40,
-                        width: 40,
-                      ),
-                    ),
-                  ),
-                )
-                .toList(),
-          ),
-        ),
-        BottomNavigationBar(
-          showSelectedLabels: false,
-          showUnselectedLabels: false,
-          currentIndex: widget.navigationShell.currentIndex,
-          onTap: (index) {
-            widget.navigationShell.goBranch(
-              index,
-              initialLocation: index == widget.navigationShell.currentIndex,
-            );
-          },
-          items: bottomBarItems,
-          type: BottomNavigationBarType.fixed,
-        ),
-      ],
-    );
-  }
-
   SlotLayout bottomNavigationLayout() {
     return SlotLayout(
       config: <Breakpoint, SlotLayoutConfig>{
         Breakpoints.small: SlotLayout.from(
           key: Keys.mainNav,
           inAnimation: AdaptiveScaffold.bottomToTop,
           outAnimation: AdaptiveScaffold.topToBottom,
-          builder: bottomNavigationWidget,
+          builder: (context) =>
+              BottomNavigationWidget(navigationShell: widget.navigationShell),
         ),
         Breakpoints.medium: SlotLayout.from(
           key: Keys.mainNav,
           inAnimation: AdaptiveScaffold.bottomToTop,
           outAnimation: AdaptiveScaffold.topToBottom,
-          builder: bottomNavigationWidget,
+          builder: (context) =>
+              BottomNavigationWidget(navigationShell: widget.navigationShell),
         ),
       },
     );

app/lib/features/home/pages/dashboard.dart

@@ -1,5 +1,7 @@
+import 'dart:io';
 import 'package:acter/common/providers/space_providers.dart';
 import 'package:acter/common/themes/app_theme.dart';
+import 'package:acter/common/themes/colors/color_scheme.dart';
 import 'package:acter/common/toolkit/buttons/primary_action_button.dart';
 import 'package:acter/common/utils/routes.dart';
 import 'package:acter/common/widgets/empty_state_widget.dart';
@@ -10,10 +12,12 @@ import 'package:acter/features/home/widgets/in_dashboard.dart';
 import 'package:acter/features/home/widgets/my_events.dart';
 import 'package:acter/features/home/widgets/my_spaces_section.dart';
 import 'package:acter/features/home/widgets/my_tasks.dart';
+import 'package:acter/features/main/providers/main_providers.dart';
 import 'package:acter_avatar/acter_avatar.dart';
 import 'package:acter_flutter_sdk/acter_flutter_sdk.dart';
 import 'package:atlas_icons/atlas_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -28,8 +32,14 @@ class Dashboard extends ConsumerWidget {
     final hasSpaces = ref.watch(hasSpacesProvider);
     return InDashboard(
       child: SafeArea(
+        bottom: false,
         child: Scaffold(
+          floatingActionButtonLocation: Platform.isIOS
+              ? FloatingActionButtonLocation.miniEndDocked
+              : FloatingActionButtonLocation.miniEndFloat,
+          floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
           appBar: _buildDashboardAppBar(context, client),
+          floatingActionButton: manageQuickAddButton(context, ref),
           body: Padding(
             padding: const EdgeInsets.only(
               top: 20,
@@ -40,7 +50,6 @@ class Dashboard extends ConsumerWidget {
               child: hasSpaces
                   ? Column(
                       children: [
-                        searchWidget(context),
                         featuresNav(context),
                         const SizedBox(height: 20),
                         const MyEventsSection(
@@ -96,26 +105,6 @@ class Dashboard extends ConsumerWidget {
     );
   }
 
-  Widget searchWidget(BuildContext context) {
-    return InkWell(
-      onTap: () => context.goNamed(Routes.search.name),
-      child: Container(
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
-          borderRadius: const BorderRadius.all(Radius.circular(16)),
-        ),
-        child: Row(
-          children: [
-            const Icon(Icons.search),
-            const SizedBox(width: 8),
-            Text(L10n.of(context).search),
-          ],
-        ),
-      ),
-    );
-  }
-
   Widget featuresNav(BuildContext context) {
     final lang = L10n.of(context);
     return Column(
@@ -127,15 +116,15 @@ class Dashboard extends ConsumerWidget {
               context: context,
               title: lang.pins,
               iconData: Atlas.pin,
-              color: const Color(0xff7c4a4a),
+              color: pinFeatureColor,
               onTap: () => context.pushNamed(Routes.pins.name),
             ),
             const SizedBox(width: 20),
             featuresNavItem(
               context: context,
               title: lang.events,
               iconData: Atlas.calendar_dots,
-              color: const Color(0xff206a9a),
+              color: eventFeatureColor,
               onTap: () => context.pushNamed(Routes.calendarEvents.name),
             ),
           ],
@@ -147,15 +136,15 @@ class Dashboard extends ConsumerWidget {
               context: context,
               title: lang.tasks,
               iconData: Atlas.list,
-              color: const Color(0xff406c6e),
+              color: taskFeatureColor,
               onTap: () => context.pushNamed(Routes.tasks.name),
             ),
             const SizedBox(width: 20),
             featuresNavItem(
               context: context,
               title: lang.boosts,
               iconData: Atlas.megaphone_thin,
-              color: Colors.blueGrey,
+              color:boastFeatureColor,
               onTap: () => context.pushNamed(Routes.updateList.name),
             ),
           ],
@@ -202,6 +191,40 @@ class Dashboard extends ConsumerWidget {
     );
   }
 
+  SlotLayout manageQuickAddButton(BuildContext context, WidgetRef ref) {
+    return SlotLayout(
+      config: <Breakpoint, SlotLayoutConfig>{
+        Breakpoints.small: SlotLayout.from(
+          key: const Key('quick-add'),
+          inAnimation: AdaptiveScaffold.bottomToTop,
+          outAnimation: AdaptiveScaffold.topToBottom,
+          builder: (context) => quickAddActionUI(context, ref),
+        ),
+        Breakpoints.medium: SlotLayout.from(
+          key: const Key('quick-add'),
+          inAnimation: AdaptiveScaffold.bottomToTop,
+          outAnimation: AdaptiveScaffold.topToBottom,
+          builder: (context) => quickAddActionUI(context, ref),
+        ),
+      },
+    );
+  }
+
+  FloatingActionButton quickAddActionUI(BuildContext context, WidgetRef ref) {
+    final showQuickActions = ref.watch(quickActionVisibilityProvider);
+    return FloatingActionButton.small(
+      onPressed: () {
+        if (showQuickActions) {
+          ref.read(quickActionVisibilityProvider.notifier).state = false;
+        } else {
+          ref.read(quickActionVisibilityProvider.notifier).state = true;
+        }
+      },
+      backgroundColor: Theme.of(context).primaryColor,
+      child: Icon(showQuickActions ? Icons.close : Icons.add),
+    );
+  }
+
   Widget emptyState(BuildContext context) {
     final lang = L10n.of(context);
     return Center(