Update animation UI as per textfield style

Author: xar43

android/gradle.properties

@@ -1,3 +1,7 @@
 org.gradle.jvmargs=-Xmx4G
 android.useAndroidX=true
 android.enableJetifier=true
+# This builtInKotlin flag was added automatically by Flutter migrator
+android.builtInKotlin=false
+# This newDsl flag was added automatically by Flutter migrator
+android.newDsl=false

lib/bademagic_module/utils/converters.dart

@@ -224,6 +224,14 @@ class Converters {
           segments.add(
               {'type': 'image', 'index': int.parse(text[i + 2] + text[i + 3])});
           i += 6;
+        } else if (text[i] == '\f') {
+          // Frame separator: flush current text then pad to next screen boundary.
+          if (currentText.isNotEmpty) {
+            segments.add({'type': 'text', 'content': currentText});
+            currentText = '';
+          }
+          segments.add({'type': 'frame_break'});
+          i++;
         } else {
           currentText += text[i];
           i++;
@@ -237,7 +245,9 @@ class Converters {
 
       // Process each segment
       for (var segment in segments) {
-        if (segment['type'] == 'text') {
+        if (segment['type'] == 'frame_break') {
+          _padMatrixToNextFrame(combinedMatrix);
+        } else if (segment['type'] == 'text') {
           String text = segment['content'];
           for (int i = 0; i < text.length; i++) {
             String char = text[i];
@@ -325,6 +335,27 @@ class Converters {
     return hexStrings;
   }
 
+  /// Pads [combinedMatrix] with empty columns until its width is a multiple of
+  /// [badgeScreenWidth] (default 44). Used to align frames at screen boundaries
+  /// when the "Animation" (Splitting) transition is active.
+  void _padMatrixToNextFrame(
+      List<List<bool>> combinedMatrix, {
+    int badgeScreenWidth = 44,
+  }) {
+    final currentWidth =
+        combinedMatrix.isNotEmpty ? combinedMatrix[0].length : 0;
+    if (currentWidth == 0) return;
+    final remainder = currentWidth % badgeScreenWidth;
+    if (remainder == 0) return; // already aligned
+    final paddingNeeded = badgeScreenWidth - remainder;
+    final emptyCol = List<bool>.filled(11, false);
+    for (int p = 0; p < paddingNeeded; p++) {
+      for (int row = 0; row < 11; row++) {
+        combinedMatrix[row].add(emptyCol[row]);
+      }
+    }
+  }
+
   Future<List<String>> _processDefaultFont(String text) async {
     List<Map<String, dynamic>> segments = [];
     String currentText = '';
@@ -339,6 +370,15 @@ class Converters {
         segments.add(
             {'type': 'image', 'index': int.parse(text[i + 2] + text[i + 3])});
         i += 6;
+      } else if (text[i] == '\f') {
+        // Frame separator: flush current text segment then pad matrix to the
+        // next 44-column screen boundary so the following frame starts fresh.
+        if (currentText.isNotEmpty) {
+          segments.add({'type': 'text', 'content': currentText});
+          currentText = '';
+        }
+        segments.add({'type': 'frame_break'});
+        i++;
       } else {
         currentText += text[i];
         i++;
@@ -351,7 +391,10 @@ class Converters {
     List<List<bool>> combinedMatrix = List.generate(11, (_) => []);
 
     for (var segment in segments) {
-      if (segment['type'] == 'text') {
+      if (segment['type'] == 'frame_break') {
+        // Pad to the next full badge screen (44 columns).
+        _padMatrixToNextFrame(combinedMatrix);
+      } else if (segment['type'] == 'text') {
         String segmentText = segment['content'];
         for (final char in segmentText.split('')) {
           if (!converter.charCodes.containsKey(char)) continue;

lib/l10n/app_en.arb

@@ -235,5 +235,7 @@
   "shareQrImage": "Share QR image",
   "couldNotGenerateQrImage": "Could not generate QR image.",
   "couldNotShareQrImage": "Could not share QR image.",
-  "qrShareInstruction": "Scan this code from another device, or tap share to send the QR image."
+  "qrShareInstruction": "Scan this code from another device, or tap share to send the QR image.",
+  "addFrame": "Add Frame",
+  "frameHint": "Type text for this frame"
 }

lib/l10n/app_hi.arb

@@ -172,5 +172,7 @@
     "saveSettings": "सेटिंग्स सेव करें",
     "connectToAnyBadge": "किसी भी बैज से कनेक्ट करें",
     "badgeNameHint": "बैज का नाम",
-    "pleaseSelectClipart": "सेव करने से पहले कृपया तस्वीर बनाएं या चुनें"
+    "pleaseSelectClipart": "कृपया सेव करने से पहले कोई क्लिपआर्ट बनाएं या चुनें",
+    "addFrame": "फ्रेम जोड़ें",
+    "frameHint": "इस फ्रेम के लिए टेक्स्ट लिखें"
 }

lib/l10n/app_it.arb

@@ -215,5 +215,7 @@
   "triangle": "Triangolo",
   "clipartSavedSuccessfully": "Clipart salvato con successo",
   "badgeScanMode": "Modalità Scansione Badge",
-  "pleaseSelectClipart": "Si prega di disegnare o selezionare un clipart prima di salvare"
+  "pleaseSelectClipart": "Si prega di disegnare o selezionare un clipart prima di salvare",
+  "addFrame": "Aggiungi Fotogramma",
+  "frameHint": "Scrivi il testo per questo fotogramma"
 }

lib/providers/imageprovider.dart

@@ -93,6 +93,18 @@ class InlineImageProvider extends ChangeNotifier {
   //controller for the Textfield
   TextEditingController message = TextEditingController();
 
+  /// When the multi-frame input widget is active, this is set to the
+  /// [TextEditingController] of the frame that is currently focused.
+  /// Clipart will be inserted into this controller instead of [message].
+  TextEditingController? activeFrameController;
+
+  /// Saves the full multi-frame text (with \f separators) when switching away
+  /// from the Animation (Splitting) transition, so it can be restored.
+  String? savedMultiFrameText;
+
+  /// Remembers which frame index was active when switching away from Splitting.
+  int? savedActiveFrameIndex;
+
   //getter for the textfield controller
   TextEditingController getController() => message;
 
@@ -150,12 +162,15 @@ class InlineImageProvider extends ChangeNotifier {
     }
     logger.d('Inserting image at index: $index');
     String placeholder = index < 10 ? '<<0$index>>' : '<<$index>>';
+    // Insert into the currently focused frame if available, otherwise the
+    // main message controller.
+    final target = activeFrameController ?? message;
     int cursorPos =
-        message.selection.baseOffset == -1 ? 0 : message.selection.baseOffset;
-    String beforeCursor = message.text.substring(0, cursorPos);
-    String afterCursor = message.text.substring(cursorPos);
-    message.text = beforeCursor + placeholder + afterCursor;
-    message.selection = TextSelection.fromPosition(
+        target.selection.baseOffset == -1 ? 0 : target.selection.baseOffset;
+    String beforeCursor = target.text.substring(0, cursorPos);
+    String afterCursor = target.text.substring(cursorPos);
+    target.text = beforeCursor + placeholder + afterCursor;
+    target.selection = TextSelection.fromPosition(
         TextPosition(offset: cursorPos + placeholder.length));
   }
 }