feat: variable elements

lib/main.dart

   Widget build(BuildContext context) {
     return DeferredPointerHandler(
       link: Provider.of<Editor>(context).textboxResizerDeferredPointerHandlerLink,
-      child: GestureDetector(
-        onDoubleTap: () {
-          // print((_transformationController.value) == Matrix4.identity());
-          // print(_transformationController.value.getMaxScaleOnAxis());
-          
-
-        },
-        onTap: () {
-          print('Main Gesture Detector Tapped!');
-          setState(() {
-            Provider.of<Editor>(context, listen: false).unSelectElm();
-          });
-        },
-      
-        // onScaleStart: (details) {
-        //   print('Scale start $details');
-        //   _previousScale = _scale;
-        //   _previousPosition = details.focalPoint;
-        // },
-        // onScaleUpdate: (details) {
-        //   print('Scale update $details');
-        //   setState(() {
-        //     _scale = _previousScale * details.scale;
-        //     _position += details.focalPoint - _previousPosition;
-        //     _previousPosition = details.focalPoint;
-        //   });
-        // },
-        // onScaleEnd: (details) {
-        //   _previousScale = 1.0;
-        // },
-        child: Scaffold(
-          backgroundColor: Colors.grey,
-          appBar: AppBar(
-            title: Text('Template Editor'),
-            actions: [
-              IconButton(
-                onPressed: () {
-                  Navigator.push(
-                    context, 
-                    MaterialPageRoute(builder:  (context) => CanvasSetupPage(),)
-                  );
-                }, 
-                icon: Icon(Icons.link)
-              )
-            ],
-          ),
-          body: Column(
-            children: [
-              Expanded(
+      child: Scaffold(
+        backgroundColor: Colors.grey,
+        appBar: AppBar(
+          title: Text('Template Editor'),
+          actions: [
+            IconButton(
+              onPressed: () {
+                Navigator.push(
+                  context, 
+                  MaterialPageRoute(builder:  (context) => CanvasSetupPage(),)
+                );
+              }, 
+              icon: Icon(Icons.link)
+            )
+          ],
+        ),
+        body: Column(
+          children: [
+            Expanded(
+              child: GestureDetector(
+                onTap: () {
+                  print('Main Gesture Detector Tapped!');
+                  setState(() {
+                    Provider.of<Editor>(context, listen: false).unSelectElm();
+                  });
+                },
                 child: Stack(
                   children: [
                     InteractiveViewer(
                         ),
                       ),
                     ),
-      
+                    
                     if (_showResetPosition) Positioned(
                       bottom: 16,
                       right: 16,
                         onPressed: () {
                           Provider.of<Editor>(context, listen: false).resetCanvasTransformationScale();
                           _showResetPosition = false;
-      
+                    
                           setState(() {}); 
                         }, 
                         icon: Icon(Icons.center_focus_strong),
                   ],
                 ),
               ),
-      
-              // Toolbar
-              ToolbarWidget()
-            ],
-          ),
+            ),
+            
+            // Toolbar
+            ToolbarWidget()
+          ],
         ),
       ),
     );

lib/providers/editor.dart

     selectElmById(id);
   }
 
+  // ? Variable Element
+
+  void addProductNameElement() {
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: '{{PRODUCTNAME}}'), 
+      type: ElementType.textbox,
+      variableType: ElementVariableType.productName, 
+      position: ElementPosition(top: 0, left: 0), 
+      width: 250, 
+      quarterTurns: 0, 
+      elementKey: GlobalKey()
+    );
+
+    elementProperties.add(element);
+    notifyListeners();
+
+    selectElmById(id);
+  }
+
+  void addVariantNameElement() {
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: '{{VARIANTNAME}}'), 
+      type: ElementType.textbox,
+      variableType: ElementVariableType.variantName, 
+      position: ElementPosition(top: 0, left: 0), 
+      width: 250, 
+      quarterTurns: 0, 
+      elementKey: GlobalKey()
+    );
+
+    elementProperties.add(element);
+    notifyListeners();
+
+    selectElmById(id);
+  }
+
+  void addProductionCodeElement() {
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: '{{PRODUCTIONCODE}}'), 
+      type: ElementType.textbox,
+      variableType: ElementVariableType.productionCode, 
+      position: ElementPosition(top: 0, left: 0), 
+      width: 250, 
+      quarterTurns: 0, 
+      elementKey: GlobalKey()
+    );
+
+    elementProperties.add(element);
+    notifyListeners();
+
+    selectElmById(id);
+  }
+
+  void addProductionDateElement() {
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: '{{PRODUCTIONDATE}}'), 
+      type: ElementType.text,
+      variableType: ElementVariableType.productionDate, 
+      position: ElementPosition(top: 0, left: 0), 
+      width: 250, 
+      quarterTurns: 0, 
+      elementKey: GlobalKey()
+    );
+
+    elementProperties.add(element);
+    notifyListeners();
+
+    selectElmById(id);
+  }
+
+  void addSerialNumberElement() {
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: '{{SERIALNUMBER}}'), 
+      type: ElementType.text,
+      variableType: ElementVariableType.serialNumber, 
+      position: ElementPosition(top: 0, left: 0), 
+      width: 250, 
+      quarterTurns: 0, 
+      elementKey: GlobalKey()
+    );
+
+    elementProperties.add(element);
+    notifyListeners();
+
+    selectElmById(id);
+  }
+  
+
+
+
+
   void updateElmPosition(Offset offset) {
     ElementProperty? element = selectedElm;
 
   }
 
   void enableEdit() {
+    if (isVariableElement) return;
+
     if (selectedElm!.isLocked) {
       _showLockedToast('Cant modify locked element');
       return;
     return true;
   }
 
+  bool get isVariableElement {
+    if (selectedElm == null) return false;
+
+    if (selectedElm!.variableType == null) return false;
+
+    return true;
+  }
+
+
 
   // ? Element overlay
   bool shouldShowTextboxResizer(String elmId) {

lib/style/canvas_style.dart

     return fontSizeMap[elmFontSize] ?? fontSizeFallback;
   }
 
-  static TextStyle getTextStyle(int elmFontSize) {
+  static TextStyle getTextStyle(int elmFontSize, [bool? isVariable]) {
     return TextStyle(
       fontFamily: 'RobotoCondensed', 
       fontSize: CanvasStyle.getFontSize(elmFontSize),
-      letterSpacing: 0
+      letterSpacing: 0,
+      color: isVariable != null ? Color(0xFF547190) : null
     );
   }
 

lib/widgets/elements.dart

 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_canvas_editor/providers/editor.dart';
+import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'dart:math' as math;
 
 
 enum ElementType {text, textbox, qr, image}
 
+enum ElementVariableType {productName, variantName, productionCode, productionDate, serialNumber}
+
 String elementGetter(ElementType type) {
   switch (type) {
     case ElementType.text:
   }
 }
 
+String getVariableElmPlaceholder(ElementVariableType type) {
+  switch (type) {
+    case ElementVariableType.productName:
+      return 'Product Name*';
+    case ElementVariableType.variantName:
+      return 'Variant Name*';
+    case ElementVariableType.productionCode:
+      return 'Production Code*';
+    case ElementVariableType.productionDate:
+      DateTime now = DateTime.now();
+      final currentDatetime = DateFormat('yyyy-MM-dd HH:mm:ss').format(now.toLocal());
+
+      return '$currentDatetime*';
+    case ElementVariableType.serialNumber:
+      return 'Serial Number*';
+    default:
+      return '';
+  }
+}
+
 class ElementPosition {
   double top;
   double left;
   TextEditingController valueController;
   ElementType type;
   ElementPosition position;
+  ElementVariableType? variableType;
   // ElementSize size;
   double width;
   int quarterTurns;
     this.color,
     this.fontScale = 3,
     this.qrScale,
-    this.isLocked = false
+    this.isLocked = false,
+    this.variableType
   });
 
 }
                         strokeAlign: BorderSide.strokeAlignOutside,
                       ) : null,
                     ),
-                    child:element.type == ElementType.qr ? const Image(image: AssetImage('asset/images/qr_template.png'),) : Provider.of<Editor>(context, listen: true).isEditing && (Provider.of<Editor>(context, listen: true).selectedElmId == element.id) ?
-                      IntrinsicWidth(
-                        child: TextField(
-                          controller: Provider.of<Editor>(context).selectedElm!.valueController,
-                          autofocus: true,
-                          keyboardType: TextInputType.multiline,
-                          enableSuggestions: false,
-                          autocorrect: false,
-                          maxLines: null,
-                          style: CanvasStyle.getTextStyle(element.fontScale),
-                          decoration: const InputDecoration(
-                            isDense: true,
-                            contentPadding: EdgeInsets.zero,
-                            border: InputBorder.none,
-                          ),
-                          onChanged: (_) {
-                            setState(() {
-                              
-                            });
-                          }
-                        ),
-                      ):
-                    Text(
-                      element.valueController.text,
-                      style: CanvasStyle.getTextStyle(element.fontScale),
-                    ),
+                    // ? child element
+                    child: _buildChildElement(element),
                   ),
             
                   // ? Textbox Resizer
       ),
     );
   }
+
+
+  Widget _buildChildElement(ElementProperty element) {
+    // ? build QR element
+    if (element.type == ElementType.qr) {
+      return const Image(image: AssetImage('asset/images/qr_template.png'));
+    }
+
+    // ? [EDITING] build text field
+    if (Provider.of<Editor>(context, listen: true).isEditing && (Provider.of<Editor>(context, listen: true).selectedElmId == element.id)) {
+      return IntrinsicWidth(
+        child: TextField(
+          controller: Provider.of<Editor>(context).selectedElm!.valueController,
+          autofocus: true,
+          keyboardType: TextInputType.multiline,
+          enableSuggestions: false,
+          autocorrect: false,
+          maxLines: null,
+          style: CanvasStyle.getTextStyle(element.fontScale),
+          decoration: const InputDecoration(
+            isDense: true,
+            contentPadding: EdgeInsets.zero,
+            border: InputBorder.none,
+          ),
+          onChanged: (_) {
+            setState(() {
+              
+            });
+          }
+        ),
+      );
+    }
+
+    // ? build variable element
+    if (element.variableType != null) {
+      return Text(
+        getVariableElmPlaceholder(element.variableType!),
+        style: CanvasStyle.getTextStyle(element.fontScale, true),
+      );
+    }
+
+
+    // ? build text element
+    return Text(
+      element.valueController.text,
+      style: CanvasStyle.getTextStyle(element.fontScale),
+    );
+    
+  }
+  
 }

lib/widgets/toolbar.dart

         onPressed: Provider.of<Editor>(context, listen: false).addTextboxElement, 
         child: Text('Add Textbox Element')
       ),
-      // ElevatedButton(
-      //   onPressed: Provider.of<Editor>(context, listen: false).addQrCodeElement, 
-      //   child: Text('Add Qr Code Element')
-      // ),
+      SizedBox(height: 24),
+
+
+      // ? Variable Element Section
+      Text('Insert Variable Element'),
+      SizedBox(height: 24),
+
+
+      ElevatedButton(
+        onPressed: Provider.of<Editor>(context, listen: false).addProductNameElement, 
+        child: Text('Add Product Name Element')
+      ),
+      ElevatedButton(
+        onPressed: Provider.of<Editor>(context, listen: false).addVariantNameElement, 
+        child: Text('Add Variant Name Element')
+      ),
+      ElevatedButton(
+        onPressed: Provider.of<Editor>(context, listen: false).addProductionCodeElement, 
+        child: Text('Add Production Code Element')
+      ),
+      ElevatedButton(
+        onPressed: Provider.of<Editor>(context, listen: false).addProductionDateElement, 
+        child: Text('Add Production Date Element')
+      ),
+      ElevatedButton(
+        onPressed: Provider.of<Editor>(context, listen: false).addSerialNumberElement, 
+        child: Text('Add Serial Number Element')
+      ),
     ];
   }
 
     return [
       Text('Properties'),
       SizedBox(height: 20),
+
       Text('Selected elements: ${Provider.of<Editor>(context).selectedElmType}'),
 
       Text('Top: ${Provider.of<Editor>(context, listen: true).selectedElm!.position.top}, Left: ${Provider.of<Editor>(context, listen: true).selectedElm!.position.left}}'),
+      SizedBox(height: 12),
+      
+      ...Provider.of<Editor>(context).isVariableElement ? _variablePropertiesSection(editorProvider, element) : _commonPropertiesSection(editorProvider, element),
+
       
+    ];
+  }
+
+
+  List<Widget> _variablePropertiesSection(Editor editorProvider, ElementProperty? element) {
+    return [
+      Container(
+        margin: EdgeInsets.only(bottom: 16),
+        color: Colors.grey[200],
+        width: double.infinity,
+        child: Text(
+          'This is a variable element, the value shown in editor is a placeholder. The actual value will be generated when printing the label.',
+        )
+      ),
+
+      // ? Font Resizer
+      _buildFontResizer(element)
+    ];
+  }
+
+  List<Widget> _commonPropertiesSection(Editor editorProvider, ElementProperty? element) {
+    return [
       // ? Value Editor
       if([ElementType.text, ElementType.textbox].contains(editorProvider.selectedElm!.type)) TextField(
         readOnly: element!.isLocked, 
       ),
 
       // ? Font Resizer (Only show when selected element is [ElementType.text, ElementType.textbox])
-      if (Provider.of<Editor>(context).shouldShowFontResizer) Row(
-        children: [
-          DropdownButton<int>(
-            value: element?.fontScale,
-            items: fontSizeDropdownItems, 
-            onChanged: (val) {
-              print('dropdown value: $val');
-              Provider.of<Editor>(context, listen: false).changeFontSize(val);
-            }
-          ),
-          IconButton.filled(
-            onPressed: Provider.of<Editor>(context, listen: false).incrementFontSize, 
-            icon: Icon(Icons.add)
-          ),
-          IconButton.filled(
-            onPressed:  Provider.of<Editor>(context, listen: false).decrementFontSize,
-            icon: Icon(Icons.remove)
-          ),
-          IconButton.filled(
-            onPressed:  () => print('kepenjet tombol test'),
-            icon: Icon(Icons.remove)
-          ),
-        ],
-      ),
+      if (Provider.of<Editor>(context).shouldShowFontResizer) _buildFontResizer(element),
 
       // ? Qr Resizer (Only show when selected element is ElementType.qr)
       if (Provider.of<Editor>(context).shouldShowQrResizer) Row(
       ),
     ];
   }
+
+
+  Widget _buildFontResizer(ElementProperty? element) {
+    return Row(
+      children: [
+        DropdownButton<int>(
+          value: element?.fontScale,
+          items: fontSizeDropdownItems, 
+          onChanged: (val) {
+            print('dropdown value: $val');
+            Provider.of<Editor>(context, listen: false).changeFontSize(val);
+          }
+        ),
+        IconButton.filled(
+          onPressed: Provider.of<Editor>(context, listen: false).incrementFontSize, 
+          icon: Icon(Icons.add)
+        ),
+        IconButton.filled(
+          onPressed:  Provider.of<Editor>(context, listen: false).decrementFontSize,
+          icon: Icon(Icons.remove)
+        ),
+      ],
+    );
+  }
 }

pubspec.lock

       url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      sha256: "3df61194eb431efc39c4ceba583b95633a403f46c9fd341e550ce0bfa50e9aa5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.20.2"
   leak_tracker:
     dependency: transitive
     description:

pubspec.yaml

   resizable_widget: ^1.0.5
   uuid: ^4.5.1
   toastification: ^2.3.0
+  intl: ^0.20.2
 
 dev_dependencies:
   flutter_lints: ^3.0.0