Merge pull request #64 from CodandoTV/feature/expandable-fab-menu

Expandable Menu for Large Screens

Author: gabrielbmoro

lib/ui/components/widgets/card_wrapper_widget.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+class CardWrapperWidget extends StatelessWidget {
+  final Color backgroundColor;
+  final Function()? onTap;
+  final Widget child;
+
+  const CardWrapperWidget(
+      {super.key,
+      required this.child,
+      required this.onTap,
+      required this.backgroundColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 2,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+      ),
+      color: backgroundColor,
+      clipBehavior: Clip.hardEdge,
+      child: InkWell(
+        onTap: onTap,
+        child: child,
+      ),
+    );
+  }
+}

…nents/widgets/checklist_form_widget.dart …ets/checklist/checklist_form_widget.dartlib/ui/components/widgets/checklist_form_widget.dart renamed to lib/ui/components/widgets/checklist/checklist_form_widget.dart lib/ui/components/widgets/checklist_form_widget.dart renamed to lib/ui/components/widgets/checklist/checklist_form_widget.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:todoapp/ui/components/form_validator.dart';
+import 'package:todoapp/ui/components/widgets/form/form_field_widget.dart';
 
 class ChecklistFormWidget extends StatelessWidget {
   final Key formKey;
@@ -24,21 +25,15 @@ class ChecklistFormWidget extends StatelessWidget {
       autovalidateMode: AutovalidateMode.onUserInteraction,
       child: Column(
         children: [
-          TextFormField(
-            autofocus: true,
-            controller: checklistEditingController,
-            decoration: InputDecoration(
+          FormFieldWidget(
               labelText: checklistLabel,
-              labelStyle: Theme.of(context).textTheme.titleMedium,
-              border: const OutlineInputBorder(),
-            ),
-            validator: (value) {
-              if (formScreenValidator.validateValue(value) == false) {
-                return checklistErrorMessage;
-              }
-              return null;
-            },
-          ),
+              controller: checklistEditingController,
+              validator: (value) {
+                if (formScreenValidator.validateValue(value) == false) {
+                  return checklistErrorMessage;
+                }
+                return null;
+              }),
         ],
       ),
     );

lib/ui/components/widgets/checklist/checklist_full_widget.dart

@@ -75,6 +75,17 @@ class ChecklistsListFullWidgetState extends State<ChecklistsListFullWidget> {
     }
   }
 
+  void onSortTasks() {
+    _tasksViewModel.onSort();
+  }
+
+  Future<void> onShareTasks() async {
+    final checklistName = selected?.title;
+    if (checklistName != null) {
+      await _tasksViewModel.shareTasks(checklistName: checklistName);
+    }
+  }
+
   Widget _buildTaskList(BuildContext context) {
     final localizations = AppLocalizations.of(context)!;
     return Row(

lib/ui/components/widgets/checklist/checklist_item_widget.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:todoapp/data/model/checklist.dart';
+import 'package:todoapp/ui/components/widgets/card_wrapper_widget.dart';
 
 class ChecklistItemWidget extends StatelessWidget {
   final Checklist checklist;
@@ -43,27 +44,10 @@ class ChecklistItemWidget extends StatelessWidget {
       backgroundColor = Theme.of(context).colorScheme.tertiaryContainer;
     }
 
-    return Card(
-      elevation: 2,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.all(
-          Radius.circular(12),
-        ),
-      ),
-      color: backgroundColor,
-      clipBehavior: Clip.hardEdge,
-      child: InkWell(
-        onTap: () => onSelectChecklist(checklist),
-        child: Padding(
-          padding: const EdgeInsets.only(
-            left: 8,
-            right: 8,
-            top: 16,
-            bottom: 16,
-          ),
-          child: _internalContent(context, checklist),
-        ),
-      ),
+    return CardWrapperWidget(
+      onTap: () => onSelectChecklist(checklist),
+      backgroundColor: backgroundColor,
+      child: _internalContent(context, checklist),
     );
   }
 }

lib/ui/components/widgets/checklist/checklist_navigation_rail_menu.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';
+import 'package:todoapp/ui/components/widgets/checklist/fabmenu/checklist_fabmenu_item.dart';
+import 'package:todoapp/ui/l10n/app_localizations.dart';
+
+class ChecklistExpandableFabMenu extends StatefulWidget {
+  final Function() onNewChecklistPressed;
+  final Function() onNewTaskPressed;
+  final Function() onSharePressed;
+  final Function() onSortPressed;
+
+  const ChecklistExpandableFabMenu({
+    super.key,
+    required this.onNewChecklistPressed,
+    required this.onNewTaskPressed,
+    required this.onSharePressed,
+    required this.onSortPressed,
+  });
+
+  @override
+  State<ChecklistExpandableFabMenu> createState() =>
+      _ChecklistExpandableFabMenuState();
+}
+
+class _ChecklistExpandableFabMenuState
+    extends State<ChecklistExpandableFabMenu> {
+  final _key = GlobalKey<ExpandableFabState>();
+
+  @override
+  Widget build(BuildContext context) {
+    final localizations = AppLocalizations.of(context)!;
+
+    return ExpandableFab(
+      key: _key,
+      type: ExpandableFabType.side,
+      overlayStyle: const ExpandableFabOverlayStyle(
+        blur: 1.0,
+      ),
+      children: [
+        ChecklistFabMenuItem(
+          heroTag: 'new_task',
+          onPressed: () => {
+            _key.currentState?.close(),
+            widget.onNewTaskPressed(),
+          },
+          label: localizations.task,
+          icon: Icons.add_task,
+        ),
+        ChecklistFabMenuItem(
+          heroTag: 'new_checklist',
+          onPressed: () => {
+            _key.currentState?.close(),
+            widget.onNewChecklistPressed(),
+          },
+          label: localizations.checklist,
+          icon: Icons.plus_one,
+        ),
+        ChecklistFabMenuItem(
+          heroTag: 'share',
+          onPressed: () => {
+            _key.currentState?.close(),
+            widget.onSharePressed(),
+          },
+          label: localizations.share,
+          icon: Icons.share,
+        ),
+        ChecklistFabMenuItem(
+          heroTag: 'sort',
+          onPressed: () => {
+            _key.currentState?.close(),
+            widget.onSortPressed(),
+          },
+          label: localizations.sort,
+          icon: Icons.sort,
+        )
+      ],
+    );
+  }
+}

lib/ui/components/widgets/checklist/fabmenu/checklist_expandable_fab_menu.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class ChecklistFabMenuItem extends StatelessWidget {
+  final String heroTag;
+  final String label;
+  final IconData icon;
+  final Function() onPressed;
+
+  const ChecklistFabMenuItem(
+      {super.key,
+      required this.label,
+      required this.onPressed,
+      required this.icon,
+      required this.heroTag});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        FloatingActionButton.small(
+          heroTag: heroTag,
+          onPressed: onPressed,
+          child: Icon(icon),
+        ),
+        const SizedBox(height: 8),
+        Text(label),
+      ],
+    );
+  }
+}

lib/ui/components/widgets/checklist/fabmenu/checklist_fabmenu_item.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+class FormFieldWidget extends StatelessWidget {
+  final String labelText;
+  final TextEditingController controller;
+  final String? Function(String?)? validator;
+
+  const FormFieldWidget({
+    super.key,
+    required this.labelText,
+    required this.controller,
+    this.validator,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      autofocus: true,
+      maxLines: 3,
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: labelText,
+        labelStyle: Theme.of(context).textTheme.titleMedium,
+        border: const OutlineInputBorder(),
+      ),
+      validator: validator,
+    );
+  }
+}

lib/ui/components/widgets/form/form_field_widget.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:todoapp/data/model/task.dart';
+import 'package:todoapp/ui/components/widgets/card_wrapper_widget.dart';
 import 'package:todoapp/ui/components/widgets/task/task_title_widget.dart';
 
 class TaskCellWidget extends StatelessWidget {
@@ -20,13 +21,9 @@ class TaskCellWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const cardShape = RoundedRectangleBorder(
-      borderRadius: BorderRadius.all(Radius.circular(8)),
-    );
-
-    return Card(
-      elevation: 4,
-      shape: cardShape,
+    return CardWrapperWidget(
+      onTap: null,
+      backgroundColor: Theme.of(context).colorScheme.surfaceBright,
       child: ListTile(
         leading: IconButton(
           onPressed: () => {onRemoveTask(task)},

lib/ui/components/widgets/task/task_cell_widget.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:todoapp/ui/components/form_validator.dart';
+import 'package:todoapp/ui/components/widgets/form/form_field_widget.dart';
 
 class TaskFormWidget extends StatelessWidget {
   final Key formKey;
@@ -25,14 +26,9 @@ class TaskFormWidget extends StatelessWidget {
       autovalidateMode: AutovalidateMode.onUserInteraction,
       child: Column(
         children: [
-          TextFormField(
-            autofocus: true,
+          FormFieldWidget(
+            labelText: taskLabel,
             controller: taskEditingController,
-            decoration: InputDecoration(
-              labelText: taskLabel,
-              labelStyle: Theme.of(context).textTheme.titleMedium,
-              border: const OutlineInputBorder(),
-            ),
             validator: (value) {
               if (formScreenValidator.validateValue(value) == false) {
                 return taskErrorMessage;