add tags

covas_mobile/lib/pages/ListItemMenu.dart

@@ -14,6 +14,7 @@ import '../variable/globals.dart' as globals;
 import 'package:permission_handler/permission_handler.dart';
 import "Camera.dart";
 import 'package:camera/camera.dart';
+import 'package:textfield_tags/textfield_tags.dart';
 
 void main() {
   initializeDateFormatting("fr_FR", null).then((_) => runApp(const MyApp()));
@@ -50,6 +51,7 @@ class _MyHomePageState extends State<ListItemMenu> {
   TextEditingController startDatepicker = TextEditingController();
   TextEditingController endDatepicker = TextEditingController();
   TextEditingController inputItem = TextEditingController();
+  final _stringTagController = StringTagController();
 
   bool showDateFields = false; // State to toggle date fields
   bool showArrow = true;
@@ -533,6 +535,91 @@ class _MyHomePageState extends State<ListItemMenu> {
     );
   }
 
+  TextFieldTags<String> _buildTagsField() {
+    return TextFieldTags<String>(
+        textfieldTagsController: _stringTagController,
+        initialTags: [],
+        textSeparators: const [' ', ','],
+        validator: (String tag) {
+          if (_stringTagController.getTags!.contains(tag)) {
+            return 'Tu as deja rentre ce tag';
+          }
+          return null;
+        },
+        inputFieldBuilder: (context, inputFieldValues) {
+          return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: TextField(
+              controller: inputFieldValues.textEditingController,
+              focusNode: inputFieldValues.focusNode,
+              onChanged: inputFieldValues.onTagChanged,
+              onSubmitted: inputFieldValues.onTagSubmitted,
+              decoration: InputDecoration(
+                border: OutlineInputBorder(),
+                labelText: 'Tags',
+                hintText:
+                    inputFieldValues.tags.isNotEmpty ? '' : "Enter tag...",
+                errorText: inputFieldValues.error,
+                prefixIcon: inputFieldValues.tags.isNotEmpty
+                    ? SingleChildScrollView(
+                        controller: inputFieldValues.tagScrollController,
+                        scrollDirection: Axis.vertical,
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Wrap(
+                              runSpacing: 4.0,
+                              spacing: 4.0,
+                              children: inputFieldValues.tags.map((String tag) {
+                                return Container(
+                                  decoration: const BoxDecoration(
+                                    borderRadius: BorderRadius.all(
+                                      Radius.circular(20.0),
+                                    ),
+                                    color: Colors.blue,
+                                  ),
+                                  margin: const EdgeInsets.symmetric(
+                                      horizontal: 5.0),
+                                  padding: const EdgeInsets.symmetric(
+                                      horizontal: 10.0, vertical: 5.0),
+                                  child: Row(
+                                    mainAxisAlignment: MainAxisAlignment.start,
+                                    mainAxisSize: MainAxisSize.min,
+                                    children: [
+                                      InkWell(
+                                        child: Text(
+                                          '$tag',
+                                          style: const TextStyle(
+                                              color: Colors.white),
+                                        ),
+                                        onTap: () {
+                                          //print("$tag selected");
+                                        },
+                                      ),
+                                      const SizedBox(width: 4.0),
+                                      InkWell(
+                                        child: const Icon(
+                                          Icons.cancel,
+                                          size: 14.0,
+                                          color: Color.fromARGB(
+                                              255, 233, 233, 233),
+                                        ),
+                                        onTap: () {
+                                          inputFieldValues.onTagRemoved(tag);
+                                        },
+                                      )
+                                    ],
+                                  ),
+                                );
+                              }).toList()),
+                        ),
+                      )
+                    : null,
+              ),
+            ),
+          );
+        });
+  }
+
   Padding _buildItemZoneSearchField() {
     return Padding(
       padding: const EdgeInsets.all(8.0),
@@ -633,6 +720,7 @@ class _MyHomePageState extends State<ListItemMenu> {
                   Flexible(child: _buildDateField("start")),
                   Flexible(child: _buildDateField("end"))
                 ]),
+          if ((showDateFields) && (showArrow)) _buildTagsField(),
           if (showDateFields) _buildGeographicalZoneSearchField(),
           if (showArrow)
             IconButton(