topics intermediate

2024-08-21 13:36:58 +02:00
parent e75052aa99
commit 7fedbe260c
35 changed files with 2511 additions and 198 deletions
@@ -0,0 +1,124 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:lensai/features/topics/presentation/widgets/material_color_picker.dart';
+
+typedef TopicResult = ({String? name, Color color});
+
+enum _DialogMode { create, edit }
+
+class TopicDialog extends HookWidget {
+  final _DialogMode _mode;
+
+  final String? initialName;
+  final Color initialColor;
+
+  const TopicDialog._({
+    required _DialogMode mode,
+    required this.initialColor,
+    this.initialName,
+  }) : _mode = mode;
+
+  factory TopicDialog.create({required Color initialColor}) {
+    return TopicDialog._(
+      mode: _DialogMode.create,
+      initialColor: initialColor,
+    );
+  }
+
+  factory TopicDialog.edit({
+    required String? name,
+    required Color initialColor,
+  }) {
+    return TopicDialog._(
+      mode: _DialogMode.edit,
+      initialColor: initialColor,
+      initialName: name,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedColor = useState<Color>(initialColor);
+    final textController = useTextEditingController(text: initialName);
+
+    return SimpleDialog(
+      titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 16.0),
+      contentPadding: const EdgeInsets.only(
+        left: 20.0,
+        right: 20.0,
+        bottom: 24.0,
+      ),
+      insetPadding: const EdgeInsets.symmetric(
+        horizontal: 20.0,
+        vertical: 24.0,
+      ),
+      title: Text(
+        switch (_mode) {
+          _DialogMode.create => 'New Topic',
+          _DialogMode.edit => 'Edit Topic',
+        },
+      ),
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4.0),
+          child: TextField(
+            decoration: InputDecoration(
+              prefixIcon: Padding(
+                padding: const EdgeInsets.all(10.0),
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 300),
+                  height: 24,
+                  width: 24,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: selectedColor.value,
+                  ),
+                ),
+              ),
+              label: const Text('Name'),
+            ),
+            controller: textController,
+          ),
+        ),
+        const SizedBox(height: 16),
+        MaterialPicker(
+          pickerColor: selectedColor.value,
+          onColorChanged: (value) {
+            selectedColor.value = value;
+          },
+        ),
+        const SizedBox(height: 24),
+        OverflowBar(
+          alignment: MainAxisAlignment.end,
+          spacing: 8.0,
+          children: [
+            TextButton(
+              onPressed: () {
+                Navigator.pop<TopicResult?>(context);
+              },
+              child: const Text('Cancel'),
+            ),
+            TextButton(
+              onPressed: () {
+                final name = textController.text.trim();
+                Navigator.pop<TopicResult?>(
+                  context,
+                  (
+                    name: name.isNotEmpty ? name : null,
+                    color: selectedColor.value,
+                  ),
+                );
+              },
+              child: Text(
+                switch (_mode) {
+                  _DialogMode.create => 'Add',
+                  _DialogMode.edit => 'Edit',
+                },
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}