[FTD #5] fixing gap between line in curved underline

Author: TobiasRump

.vscode/launch.json

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

analysis_options.yaml

@@ -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,

example/lib/screens/examples/underline_example_screen.dart

@@ -29,7 +29,7 @@ class BubbleBoxPainter extends CustomPainter {
     this.tip = const BubbleBoxTip(),
   });
   final Text text;
-  final double padding; //! TODO: fix text not being centered
+  final double padding; // TODO(everyone): fix text not being centered
   final Color bubbleColor;
   final double borderRadius;
   final BubbleBoxTip tip;
@@ -55,7 +55,7 @@ class BubbleBoxPainter extends CustomPainter {
     final bubbleHeight = textHeight + padding * 2;
 
     // Calculate tail size
-    //! TODO: extract
+    // TODO(everyone): extract
     final tailHeight = bubbleHeight * 0.25;
 
     final path = Path()

lib/src/modules/box/painter/bubble_box_painter.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/mixins/line_gap_mixin.dart

@@ -1,6 +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.
 ///
@@ -29,12 +30,12 @@ import 'package:flutter_text_decorator/src/modules/underline/base/underline_pain
 ///   ),
 /// )
 /// ```
-class CurvedUnderlinePainter extends UnderlinePainter {
+class CurvedUnderlinePainter extends UnderlinePainter with LineGap {
   CurvedUnderlinePainter({
     required this.text,
     required super.color,
     required super.strokeWidth,
-    this.curvyFactor = 0.7,
+    this.curvyFactor = 3,
     super.textStyle,
   });
 
@@ -43,58 +44,44 @@ class CurvedUnderlinePainter extends UnderlinePainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    final currentTextStyle = super.textStyle ?? const TextStyle();
-    final textSpan = TextSpan(text: text, style: currentTextStyle);
     final textPainter = TextPainter(
-      text: textSpan,
+      text: TextSpan(text: text, style: textStyle ?? const TextStyle()),
       textDirection: ui.TextDirection.ltr,
     )..layout(maxWidth: size.width);
 
-    final Paint paint = Paint()
-      ..color = super.color
+    final paint = Paint()
+      ..color = color
       ..style = PaintingStyle.stroke
-      ..strokeWidth = super.strokeWidth;
+      ..strokeWidth = strokeWidth;
 
-    final List<ui.LineMetrics> lines = textPainter.computeLineMetrics();
+    final lines = textPainter.computeLineMetrics();
 
-    final double waveHeightUnit = super.strokeWidth * 3.0;
+    double yOffset = 0;
 
-    for (int lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-      final line = lines[lineIdx];
+    for (final line in lines) {
+      final double startX = line.left;
+      final double xEnd = startX + line.width;
 
-      final double startX = line.left + horizontalOffset.left;
-      final double xEnd = line.left + line.width - horizontalOffset.right;
-      final double effectiveLineWidth = xEnd - startX;
+      if (line.width <= 0) continue;
 
-      if (effectiveLineWidth <= 0) {
-        continue;
-      }
+      yOffset += calculateGapBetweenLines(line: line, lineIndex: line.lineNumber, strokeWidth: strokeWidth);
 
-      final double lineGapY = _calculateGapBetweenLines(lineIdx, line, super.strokeWidth);
-      final double yCp1 = lineGapY - waveHeightUnit * curvyFactor;
-      final double yCp2 = lineGapY + waveHeightUnit * curvyFactor;
-      final double yEnd = lineGapY;
-      final double xCp1 = startX + effectiveLineWidth * (1 / 3);
-      final double xCp2 = startX + effectiveLineWidth * (2 / 3);
+      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, lineGapY)
-        ..cubicTo(xCp1, yCp1, xCp2, yCp2, xEnd, yEnd);
+        ..moveTo(startX, yOffset)
+        ..cubicTo(x1, y1, x2, y2, x3, y3);
 
       canvas.drawPath(path, paint);
     }
   }
 
-  double _calculateGapBetweenLines(int lineIndex, ui.LineMetrics line, double currentStrokeWidth) {
-    double desiredGap = 5;
-    if (lineIndex == 0) {
-      desiredGap = 1;
-    }
-    return line.baseline + line.descent + desiredGap + (currentStrokeWidth / 2.0);
-  }
-
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return false;
-  }
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
 }

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

@@ -3,6 +3,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/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.
 ///
@@ -28,9 +29,7 @@ import 'package:flutter_text_decorator/src/modules/underline/classes/horizontal_
 ///   child: Text("Underlined Text"),
 /// )
 /// ```
-class HorizontalUnderlinePainter extends UnderlinePainter {
-  final String text;
-
+class HorizontalUnderlinePainter extends UnderlinePainter with LineGap {
   HorizontalUnderlinePainter({
     required this.text,
     required super.color,
@@ -39,6 +38,8 @@ class HorizontalUnderlinePainter extends UnderlinePainter {
     super.horizontalOffset,
   });
 
+  final String text;
+
   @override
   @override
   void paint(Canvas canvas, Size size) {
@@ -61,20 +62,13 @@ class HorizontalUnderlinePainter extends UnderlinePainter {
       final double endX = line.left + line.width - horizontalOffset.right;
       final double underlineY = yOffset + line.ascent + line.descent + strokeWidth;
 
-      if (_isLineLengthPositive(startX, endX)) {
+      if (startX < endX) {
         canvas.drawLine(Offset(startX, underlineY), Offset(endX, underlineY), paint);
       }
-
-      yOffset += _calculateGapBetweenLines(line.lineNumber, line);
+      yOffset += calculateGapBetweenLines(line: line, lineIndex: line.lineNumber, strokeWidth: strokeWidth);
     }
   }
 
-  bool _isLineLengthPositive(double x, double y) => x < y;
-
-  double _calculateGapBetweenLines(int lineIndex, ui.LineMetrics line) {
-    return line.height + (line.descent / 2) + strokeWidth;
-  }
-
   @override
   bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
 }

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

@@ -5,10 +5,10 @@ import 'package:flutter_text_decorator/src/modules/underline/painter/curved_unde
 void main() {
   group('CurvedUnderlinePainter Tests', () {
     testWidgets('renders CustomPaint with CurvedUnderlinePainter for single line text', (WidgetTester tester) async {
-      const String testText = 'Hello Curved Underline';
-      const TextStyle testTextStyle = TextStyle(fontSize: 24, color: Colors.black);
-      const Color underlineColor = Colors.blue;
-      const double underlineStrokeWidth = 2.0;
+      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(