Merge pull request #11 from EXXETA/bugfix/FTD-5-underlined-text-multiple-lines

[FTD #5] support underline for multiple lines of text

Author: TobiasRump

.github/workflows/basic_dart_check.yml

@@ -27,4 +27,4 @@ jobs:
         run: flutter analyze
 
       - name: 🧪 Run tests
-        run: flutter test
+        run: flutter test

CONTRIBUTING.md

@@ -61,13 +61,14 @@ Please make sure that your commit messages follow the follwing templates.
 
 The commit message starts with the ISSUE-ID followed by a COMMITTAG:
 
-{ISSUE-ID} [{COMMITTAG}]: {COMMIT MSG}
+[FTD #{ISSUE-ID}] [{COMMITTAG}]: {COMMIT MSG}
 
-[ADD] -> New feature/files/code/folders added <br>
-[UPDATE] -> Updated a file e.g. from screenshot test <br>
-[FIX] -> Fixed a bug/error <br>
-[DELETE] -> Delete a files/code/folders <br>
-[REFAC] -> Modified or refactored the files/code/folders / changes from PRs <br>
+Commit Tags:
+[ADD] -> New feature/files/code/folders added 
+[UPDATE] -> Updated a file e.g. from screenshot test
+[FIX] -> Fixed a bug/error
+[DELETE] -> Delete a files/code/folders
+[REFAC] -> Modified or refactored the files/code/folders / changes from PRs
 
-**Example** <br>
-123 [ADD]: new box style
+**Example**
+[FTD #123][ADD]: new box style

analysis_options.yaml

@@ -4,4 +4,5 @@ linter:
   rules:
     lines_longer_than_80_chars: false
     public_member_api_docs: false
+    omit_local_variable_types: false
 

example/lib/screens/examples/underline_example_screen.dart

@@ -39,9 +39,9 @@ class UnderlineExampleScreen extends StatelessWidget {
             const SizedBox(height: 32),
             Center(
               child: TextDecorator.underlined(
-                style: UnderlineStyle.curved,
+                style: UnderlineStyle.horizontal,
                 text: const Text(
-                  'Franz jagt im komplett verwahrlosten Taxi quer durch Berlin',
+                  'Franz jagt im komplett verwahrlosten Taxiiii quer Franz jagt im kompletr Franz jagt im kompletr Franz jagt im jagt im kompletr Franz jagt im',
                   style: TextStyle(fontSize: 16),
                 ),
                 color: Colors.red,

lib/src/modules/box/painter/bubble_box_painter.dart

@@ -59,7 +59,7 @@ class BubbleBoxPainter extends CustomPainter {
     final bubbleHeight = availableHeight + padding.vertical;
 
     // Calculate tail size
-    // !TODO: extract
+    // TODO(everyone): extract
     final tailHeight = bubbleHeight * 0.25;
 
     final path = Path()

lib/src/modules/underline/enums/underline_style.dart

@@ -22,6 +22,8 @@ enum UnderlineStyle {
     switch (this) {
       case UnderlineStyle.horizontal:
         return HorizontalUnderlinePainter(
+          text: text.data ?? '',
+          textStyle: text.style ?? const TextStyle(),
           color: color,
           strokeWidth: strokeWidth,
         );

lib/src/modules/underline/mixins/line_gap_mixin.dart

@@ -0,0 +1,11 @@
+import 'dart:ui' as ui;
+
+mixin LineGap {
+  double calculateGapBetweenLines({
+    required int lineIndex,
+    required ui.LineMetrics line,
+    required double strokeWidth,
+  }) {
+    return line.height + (line.descent / 2) + strokeWidth;
+  }
+}

lib/src/modules/underline/painter/curved_underline_painter.dart

@@ -1,5 +1,7 @@
+import 'dart:ui' as ui;
 import 'package:flutter/material.dart';
 import 'package:flutter_text_decorator/src/modules/underline/base/underline_painter.dart';
+import 'package:flutter_text_decorator/src/modules/underline/mixins/line_gap_mixin.dart';
 
 /// A [CustomPainter] that draws a curved or wavy underline beneath text.
 ///
@@ -28,39 +30,58 @@ import 'package:flutter_text_decorator/src/modules/underline/base/underline_pain
 ///   ),
 /// )
 /// ```
-class CurvedUnderlinePainter extends UnderlinePainter {
-  CurvedUnderlinePainter({required this.text, required super.color, required super.strokeWidth, super.textStyle});
+class CurvedUnderlinePainter extends UnderlinePainter with LineGap {
+  CurvedUnderlinePainter({
+    required this.text,
+    required super.color,
+    required super.strokeWidth,
+    this.curvyFactor = 3,
+    super.textStyle,
+  });
 
   final String text;
+  final double curvyFactor;
 
   @override
   void paint(Canvas canvas, Size size) {
-    final textSpan = TextSpan(text: text, style: textStyle);
     final textPainter = TextPainter(
-      text: textSpan,
-      textDirection: TextDirection.ltr,
-    )..layout();
+      text: TextSpan(text: text, style: textStyle ?? const TextStyle()),
+      textDirection: ui.TextDirection.ltr,
+    )..layout(maxWidth: size.width);
 
     final paint = Paint()
       ..color = color
       ..style = PaintingStyle.stroke
       ..strokeWidth = strokeWidth;
-    final path = Path()
-      ..moveTo(5, size.height * 1.1)
-      ..cubicTo(
-        size.width - textPainter.width / 2,
-        size.height + 1,
-        size.width - textPainter.width / 4,
-        size.height - 7,
-        size.width,
-        size.height,
-      );
 
-    canvas.drawPath(path, paint);
+    final lines = textPainter.computeLineMetrics();
+
+    double yOffset = 0;
+
+    for (final line in lines) {
+      final double startX = line.left;
+      final double xEnd = startX + line.width;
+
+      if (line.width <= 0) continue;
+
+      yOffset += calculateGapBetweenLines(line: line, lineIndex: line.lineNumber, strokeWidth: strokeWidth);
+
+      final double y1 = yOffset - strokeWidth * curvyFactor;
+      final double y2 = yOffset + strokeWidth * curvyFactor;
+      final double yEnd = yOffset;
+      final double x1 = startX + xEnd * (1 / 3);
+      final double x2 = startX + xEnd * (2 / 3);
+      final double x3 = xEnd;
+      final double y3 = yEnd;
+
+      final Path path = Path()
+        ..moveTo(startX, yOffset)
+        ..cubicTo(x1, y1, x2, y2, x3, y3);
+
+      canvas.drawPath(path, paint);
+    }
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return false;
-  }
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
 }

lib/src/modules/underline/painter/horizontal_underline_painter.dart

@@ -1,6 +1,9 @@
+import 'dart:ui' as ui;
+
 import 'package:flutter/material.dart';
 import 'package:flutter_text_decorator/src/modules/underline/base/underline_painter.dart';
 import 'package:flutter_text_decorator/src/modules/underline/classes/horizontal_offset.dart';
+import 'package:flutter_text_decorator/src/modules/underline/mixins/line_gap_mixin.dart';
 
 /// A [CustomPainter] that draws a straight horizontal underline beneath text.
 ///
@@ -26,24 +29,46 @@ import 'package:flutter_text_decorator/src/modules/underline/classes/horizontal_
 ///   child: Text("Underlined Text"),
 /// )
 /// ```
-class HorizontalUnderlinePainter extends UnderlinePainter {
-  HorizontalUnderlinePainter({required super.color, required super.strokeWidth, super.horizontalOffset});
+class HorizontalUnderlinePainter extends UnderlinePainter with LineGap {
+  HorizontalUnderlinePainter({
+    required this.text,
+    required super.color,
+    required super.strokeWidth,
+    super.textStyle,
+    super.horizontalOffset,
+  });
+
+  final String text;
 
+  @override
   @override
   void paint(Canvas canvas, Size size) {
     final paint = Paint()
       ..color = color
       ..style = PaintingStyle.stroke
-      ..strokeWidth = strokeWidth;
-    final path = Path()
-      ..moveTo(horizontalOffset.left, size.height)
-      ..lineTo(size.width - horizontalOffset.right, size.height);
+      ..strokeWidth = strokeWidth
+      ..strokeCap = StrokeCap.square;
+
+    final textPainter = TextPainter(
+      text: TextSpan(text: text, style: textStyle ?? const TextStyle()),
+      textDirection: ui.TextDirection.ltr,
+    )..layout(maxWidth: size.width);
 
-    canvas.drawPath(path, paint);
+    final lines = textPainter.computeLineMetrics();
+    double yOffset = 0;
+
+    for (final line in lines) {
+      final double startX = line.left + horizontalOffset.left;
+      final double endX = line.left + line.width - horizontalOffset.right;
+      final double underlineY = yOffset + line.ascent + line.descent + strokeWidth;
+
+      if (startX < endX) {
+        canvas.drawLine(Offset(startX, underlineY), Offset(endX, underlineY), paint);
+      }
+      yOffset += calculateGapBetweenLines(line: line, lineIndex: line.lineNumber, strokeWidth: strokeWidth);
+    }
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return false;
-  }
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
 }

test/src/modules/underline/painter/curved_underline_painer_test.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter_text_decorator/src/modules/underline/painter/curved_underline_painter.dart'; // Adjust import path as needed
+
+void main() {
+  group('CurvedUnderlinePainter Tests', () {
+    testWidgets('renders CustomPaint with CurvedUnderlinePainter for single line text', (WidgetTester tester) async {
+      const testText = 'Hello Curved Underline';
+      const testTextStyle = TextStyle(fontSize: 24, color: Colors.black);
+      const underlineColor = Colors.blue;
+      const underlineStrokeWidth = 2.0;
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: Center(
+              child: CustomPaint(
+                painter: CurvedUnderlinePainter(
+                  text: testText,
+                  color: underlineColor,
+                  strokeWidth: underlineStrokeWidth,
+                  textStyle: testTextStyle,
+                ),
+                child: const Text(testText, style: testTextStyle),
+              ),
+            ),
+          ),
+        ),
+      );
+
+      expect(find.byType(CustomPaint), findsNWidgets(2));
+    });
+  });
+}