#54 new: grouped snippet & tab snippet

lib/view/widget/input_field.dart

@@ -9,12 +9,15 @@ class Input extends StatelessWidget {
   final String? hint;
   final String? label;
   final void Function(String)? onSubmitted;
+  final void Function(String)? onChanged;
   final bool obscureText;
   final IconData? icon;
   final TextInputType? type;
   final FocusNode? node;
   final bool autoCorrect;
   final bool suggestiion;
+  final String? errorText;
+  final Widget? prefix;
 
   const Input({
     super.key,
@@ -24,12 +27,15 @@ class Input extends StatelessWidget {
     this.hint,
     this.label,
     this.onSubmitted,
+    this.onChanged,
     this.obscureText = false,
     this.icon,
     this.type,
     this.node,
     this.autoCorrect = false,
     this.suggestiion = false,
+    this.errorText,
+    this.prefix,
   });
   @override
   Widget build(BuildContext context) {
@@ -40,16 +46,18 @@ class Input extends StatelessWidget {
           maxLines: maxLines,
           minLines: minLines,
           onSubmitted: onSubmitted,
+          onChanged: onChanged,
           keyboardType: type,
           focusNode: node,
           autocorrect: autoCorrect,
           enableSuggestions: suggestiion,
           decoration: InputDecoration(
-            label: label != null ? Text(label!) : null,
-            hintText: hint,
-            icon: icon != null ? Icon(icon) : null,
-            border: InputBorder.none,
-          ),
+              label: label != null ? Text(label!) : null,
+              hintText: hint,
+              icon: icon != null ? Icon(icon) : null,
+              border: InputBorder.none,
+              errorText: errorText,
+              prefix: prefix),
           controller: controller,
           obscureText: obscureText,
         ),

lib/view/widget/tag.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:toolbox/view/widget/input_field.dart';
+import 'package:toolbox/view/widget/round_rect_card.dart';
+
+import '../../data/res/color.dart';
+
+class TagEditor extends StatelessWidget {
+  final List<String> tags;
+  final void Function(List<String>)? onChanged;
+
+  const TagEditor({super.key, required this.tags, this.onChanged});
+
+  @override
+  Widget build(BuildContext context) {
+    return RoundRectCard(ListTile(
+      leading: const Icon(Icons.tag),
+      title: _buildTags(
+        tags,
+        _onTapDelete,
+      ),
+      trailing: InkWell(
+        child: const Icon(Icons.add),
+        onTap: () {
+          _showTagDialog(context, tags, onChanged);
+        },
+      ),
+    ));
+  }
+
+  void _onTapDelete(String tag) {
+    tags.remove(tag);
+    onChanged?.call(tags);
+  }
+
+  Widget _buildTags(
+    List<String> tags,
+    Function(String) onTagDelete,
+  ) {
+    if (tags.isEmpty) return Text('Tags');
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.end,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: tags.map((e) => _buildTagItem(e, onTagDelete)).toList(),
+      ),
+    );
+  }
+
+  Widget _buildTagItem(String tag, Function(String) onTagDelete) {
+    return Padding(
+        padding: EdgeInsets.only(right: 7),
+        child: Container(
+      decoration: BoxDecoration(
+        borderRadius: const BorderRadius.all(
+          Radius.circular(20.0),
+        ),
+        color: primaryColor,
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 3),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+              '#$tag',
+              style: const TextStyle(color: Colors.white),
+            ),
+          const SizedBox(width: 4.0),
+          InkWell(
+            child: const Icon(
+              Icons.cancel,
+              size: 14.0,
+              color: Colors.white,
+            ),
+            onTap: () {
+              onTagDelete(tag);
+            },
+          )
+        ],
+      ),
+      ),
+    );
+  }
+
+  void _showTagDialog(
+    BuildContext context,
+    List<String> tags,
+    void Function(List<String>)? onChanged,
+  ) {
+    final _textEditingController = TextEditingController();
+    showDialog(
+      context: context,
+      builder: (context) {
+        return AlertDialog(
+          title: const Text('Add Tag'),
+          content: Input(
+            controller: _textEditingController,
+            hint: 'Tag',
+          ),
+          actions: [
+            TextButton(
+              onPressed: () {
+                final tag = _textEditingController.text;
+                tags.add(tag.trim());
+                onChanged?.call(tags);
+                Navigator.pop(context);
+              },
+              child: const Text('Add'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}