feat: Added Linear Scroll and Bidirectional Scroll animations, added Animation Tab

lib/bademagic_module/models/mode.dart

@@ -7,15 +7,17 @@ enum Mode {
   snowflake('0x05'),
   picture('0x06'),
   animation('0x07'),
-  laser('0x08');
+  laser('0x08'),
+  linearScroll('0x09'),
+  bidirectionalScroll('0x0A');
 
   final String hexValue;
   const Mode(this.hexValue);
 
   //method to get the integer value of the mode
   static int getIntValue(Mode mode) {
     String hexValue = mode.hexValue.substring(3, 4);
-    int intValue = int.parse(hexValue, radix: 10);
+    int intValue = int.parse(hexValue, radix: 16);
     return intValue;
   }
 

lib/badge_animation/ani_bidirectional_scroll.dart

@@ -0,0 +1,38 @@
+import 'package:badgemagic/badge_animation/animation_abstract.dart';
+
+class BidirectionalScrollAnimation extends BadgeAnimation {
+  @override
+  void processAnimation(int badgeHeight, int badgeWidth, int animationIndex,
+      List<List<bool>> processGrid, List<List<bool>> canvas) {
+    final newWidth = processGrid[0].length;
+    final newHeight = processGrid.length;
+
+    final totalPhaseDuration = newWidth + badgeWidth;
+    final currentPhase = (animationIndex ~/ totalPhaseDuration) % 2;
+    final phaseOffset = animationIndex % totalPhaseDuration;
+
+    for (int i = 0; i < badgeHeight; i++) {
+      for (int j = 0; j < badgeWidth; j++) {
+        int sourceCol;
+        bool flip = false;
+
+        if (currentPhase == 0) {
+          // Left-to-right animation (original orientation)
+          sourceCol = newWidth - phaseOffset + j;
+        } else {
+          // Right-to-left animation (flipped orientation)
+          sourceCol = j + phaseOffset - badgeWidth;
+          flip = true;
+        }
+
+        if (sourceCol >= 0 && sourceCol < newWidth) {
+          // Flip the column index if in return phase
+          final actualCol = flip ? newWidth - 1 - sourceCol : sourceCol;
+          canvas[i][j] = processGrid[i % newHeight][actualCol];
+        } else {
+          canvas[i][j] = false;
+        }
+      }
+    }
+  }
+}

lib/badge_animation/ani_linear_scroll.dart

@@ -0,0 +1,40 @@
+import 'package:badgemagic/badge_animation/animation_abstract.dart';
+
+class LinearScrollAnimation extends BadgeAnimation {
+  @override
+  void processAnimation(int badgeHeight, int badgeWidth, int animationIndex,
+      List<List<bool>> processGrid, List<List<bool>> canvas) {
+    final newWidth = processGrid[0].length;
+    final newHeight = processGrid.length;
+
+    // Calculate the full animation cycle duration
+    final totalPhaseDuration = newWidth + badgeWidth;
+
+    // Determine current phase (0 = left-to-right, 1 = right-to-left)
+    final currentPhase = (animationIndex ~/ totalPhaseDuration) % 2;
+
+    // Calculate offset within current phase
+    final phaseOffset = animationIndex % totalPhaseDuration;
+
+    for (int i = 0; i < badgeHeight; i++) {
+      for (int j = 0; j < badgeWidth; j++) {
+        int sourceCol;
+
+        if (currentPhase == 0) {
+          // Left-to-right animation
+          sourceCol = newWidth - phaseOffset + j;
+        } else {
+          // Right-to-left animation
+          sourceCol = j + phaseOffset - badgeWidth;
+        }
+
+        // Handle bounds checking
+        if (sourceCol >= 0 && sourceCol < newWidth) {
+          canvas[i][j] = processGrid[i % newHeight][sourceCol];
+        } else {
+          canvas[i][j] = false;
+        }
+      }
+    }
+  }
+}

lib/constants.dart

@@ -33,6 +33,9 @@ const String aniLaser = 'assets/animations/ic_anim_laser.gif';
 const String aniPicture = 'assets/animations/ic_anim_picture.gif';
 const String aniUp = 'assets/animations/ic_anim_up.gif';
 const String aniRight = 'assets/animations/ic_anim_right.gif';
+const String aniBidirectionalScroll =
+    'assets/animations/ic_anim_bidirectional_scroll.gif';
+const String aniLinearScroll = 'assets/animations/ic_anim_linear_scroll.gif';
 
 //path to all the effects assets used
 const String effFlash = 'assets/effects/ic_effect_flash.gif';

lib/providers/animation_badge_provider.dart

@@ -6,8 +6,10 @@ import 'package:badgemagic/badge_animation/ani_down.dart';
 import 'package:badgemagic/badge_animation/ani_fixed.dart';
 import 'package:badgemagic/badge_animation/ani_laser.dart';
 import 'package:badgemagic/badge_animation/ani_left.dart';
+import 'package:badgemagic/badge_animation/ani_bidirectional_scroll.dart';
 import 'package:badgemagic/badge_animation/ani_picture.dart';
 import 'package:badgemagic/badge_animation/ani_right.dart';
+import 'package:badgemagic/badge_animation/ani_linear_scroll.dart';
 import 'package:badgemagic/badge_animation/ani_snowflake.dart';
 import 'package:badgemagic/badge_animation/ani_up.dart';
 import 'package:badgemagic/badge_animation/animation_abstract.dart';
@@ -28,6 +30,8 @@ Map<int, BadgeAnimation?> animationMap = {
   6: PictureAnimation(),
   7: AniAnimation(),
   8: LaserAnimation(),
+  9: LinearScrollAnimation(),
+  10: BidirectionalScrollAnimation(),
 };
 
 Map<int, BadgeEffect> effectMap = {

lib/providers/badge_message_provider.dart

@@ -23,7 +23,9 @@ Map<int, Mode> modeValueMap = {
   5: Mode.snowflake,
   6: Mode.picture,
   7: Mode.animation,
-  8: Mode.laser
+  8: Mode.laser,
+  9: Mode.linearScroll,
+  10: Mode.bidirectionalScroll,
 };
 
 Map<int, Speed> speedMap = {

lib/providers/saved_badge_provider.dart

@@ -30,7 +30,9 @@ Map<int, Mode> modeValueMap = {
   5: Mode.snowflake,
   6: Mode.picture,
   7: Mode.animation,
-  8: Mode.laser
+  8: Mode.laser,
+  9: Mode.linearScroll,
+  10: Mode.bidirectionalScroll,
 };
 
 class SavedBadgeProvider extends ChangeNotifier {

lib/view/homescreen.dart

@@ -60,7 +60,7 @@ class _HomeScreenState extends State<HomeScreen>
     speedDialProvider = SpeedDialProvider(animationProvider);
     super.initState();
 
-    _tabController = TabController(length: 3, vsync: this);
+    _tabController = TabController(length: 4, vsync: this);
   }
 
   void handleTextChange() {
@@ -143,7 +143,7 @@ class _HomeScreenState extends State<HomeScreen>
         ),
       ],
       child: DefaultTabController(
-          length: 3,
+          length: 4,
           child: CommonScaffold(
             index: 0,
             title: 'Badge Magic',
@@ -203,6 +203,10 @@ class _HomeScreenState extends State<HomeScreen>
                       unselectedLabelColor: mdGrey400,
                       indicatorColor: colorPrimary,
                       controller: _tabController,
+                      labelStyle: TextStyle(
+                        fontSize: 12.sp, // Adjust font size for better fit
+                        fontWeight: FontWeight.w500,
+                      ),
                       splashFactory: InkRipple.splashFactory,
                       overlayColor: WidgetStateProperty.resolveWith<Color?>(
                         (Set<WidgetState> states) {
@@ -214,6 +218,7 @@ class _HomeScreenState extends State<HomeScreen>
                       ),
                       tabs: const [
                         Tab(text: 'Speed'),
+                        Tab(text: 'Modes'),
                         Tab(text: 'Animation'),
                         Tab(text: 'Effects'),
                       ],
@@ -239,6 +244,7 @@ class _HomeScreenState extends State<HomeScreen>
                               },
                               child: RadialDial()),
                           AnimationTab(),
+                          CustomAnimationTab(),
                           EffectTab(),
                         ],
                       ),

lib/view/widgets/homescreentabs.dart

@@ -2,6 +2,7 @@ import 'package:badgemagic/constants.dart';
 import 'package:badgemagic/view/widgets/animation_container.dart';
 import 'package:badgemagic/view/widgets/effects_container.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 //effects tab to show effects that the user can select
 class EffectTab extends StatefulWidget {
@@ -120,3 +121,48 @@ class _AnimationTabState extends State<AnimationTab> {
     );
   }
 }
+
+class CustomAnimationTab extends StatefulWidget {
+  const CustomAnimationTab({
+    super.key,
+  });
+
+  @override
+  State<CustomAnimationTab> createState() => _CustomAnimationTabState();
+}
+
+class _CustomAnimationTabState extends State<CustomAnimationTab> {
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: GridView.builder(
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 3, // 3 columns
+          childAspectRatio: 110.w / 65.h, // width to height ratio
+        ),
+        itemCount: 2,
+        itemBuilder: (context, index) {
+          // Map indexes to corresponding animations
+          switch (index) {
+            case 0:
+              return AniContainer(
+                animation: aniLinearScroll,
+                animationName: 'Linear Scroll',
+                index: index + 9,
+              );
+            case 1:
+              return AniContainer(
+                animation: aniBidirectionalScroll,
+                animationName: 'Bidirectional Scroll',
+                index: index + 9,
+              );
+            default:
+              return const SizedBox.shrink();
+          }
+        },
+      ),
+    );
+  }
+}