[FTD #4] support circle for multi lines text, updated images

Author: TobiasRump

documentation/img/box.png

@@ -56,7 +56,7 @@ class BoxExampleScreen extends StatelessWidget {
               TextDecorator.boxed(
                 style: BoxStyle.curled,
                 text: const Text(
-                  'Curcled Box',
+                  'Curled Box',
                   style: TextStyle(fontSize: 16),
                 ),
                 strokeWidth: 2,

documentation/img/circle.png

@@ -23,18 +23,34 @@ class CircleExampleScreen extends StatelessWidget {
                 ),
               ),
               const SizedBox(height: 32),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 30.0),
+                child: TextDecorator.circled(
+                  style: CircleStyle.basic,
+                  text: const Text(
+                    'Franz jagt im komplett verwahrlosten Taxi quer durch Berlin',
+                    style: TextStyle(fontSize: 16),
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+              ),
+              const SizedBox(height: 64),
               TextDecorator.circled(
                 text: const Text(
                   'Circled Text',
                   style: TextStyle(fontSize: 32),
                 ),
               ),
               const SizedBox(height: 32),
-              TextDecorator.circled(
-                style: CircleStyle.basic,
-                text: const Text(
-                  'Franz jagt im komplett verwahrlosten Taxi quer durch Berlin',
-                  style: TextStyle(fontSize: 16),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 30.0),
+                child: TextDecorator.circled(
+                  style: CircleStyle.circled,
+                  text: const Text(
+                    'Franz jagt im komplett verwahrlosten Taxi quer durch Berlin',
+                    style: TextStyle(fontSize: 16),
+                    textAlign: TextAlign.center,
+                  ),
                 ),
               ),
             ],

documentation/img/highlight.png

@@ -0,0 +1,47 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
+import 'dart:math';
+
+import 'package:flutter_text_decorator/src/modules/circle/painter/open_circle_painter.dart';
+
+/// Defines a set of angles for rendering an "open circle" decoration.
+///
+/// This class encapsulates the start and sweep angles for two arcs
+/// (typically one for the bottom part of the circle and one for the top part)
+/// that together form an open or stylized circle.
+///
+/// It provides `const` factories for predefined angle configurations,
+/// such as `bottomLeft()` or `topLeft()`, which can be used with
+/// [OpenCirclePainter] to specify the orientation of the circle's opening.
+/// Instances of this class are immutable.
+class CircleAngleOption {
+  const CircleAngleOption({
+    required this.startAngleBottomCircle,
+    required this.sweepAngleBottomCircle,
+    required this.startAngleTopCircle,
+    required this.sweepAngleTopCircle,
+  });
+
+  const factory CircleAngleOption.bottomLeft() = _BottomLeftCircleAngleOption;
+
+  /// The starting angle for the bottom arc, in radians.
+  final double startAngleBottomCircle;
+
+  /// The sweep angle for the bottom arc, in radians.
+  final double sweepAngleBottomCircle;
+
+  /// The starting angle for the top arc, in radians.
+  final double startAngleTopCircle;
+
+  /// The sweep angle for the top arc, in radians.
+  final double sweepAngleTopCircle;
+}
+
+class _BottomLeftCircleAngleOption extends CircleAngleOption {
+  const _BottomLeftCircleAngleOption()
+      : super(
+          startAngleBottomCircle: -1.5 + pi,
+          sweepAngleBottomCircle: pi + 1.5,
+          startAngleTopCircle: (pi + 6.2) + pi,
+          sweepAngleTopCircle: pi - 1,
+        );
+}

documentation/img/overview.png

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_text_decorator/src/modules/circle/classes/circle_size.dart';
 
 /// A mixin that provides a utility method to calculate dimensions
@@ -19,12 +20,13 @@ mixin CircleConstraints {
   CircleSize getCircleSizes({
     required String text,
     required TextStyle textStyle,
+    required Size size,
   }) {
     final textSpan = TextSpan(text: text, style: textStyle);
     final textPainter = TextPainter(
       text: textSpan,
       textDirection: TextDirection.ltr,
-    )..layout();
+    )..layout(maxWidth: size.width);
 
     const textHeightOffset = 2;
     const textWidthScale = 1.8;