Fx FHeader vertical and RTL alignment (#706)

* Fx FHeader vertical and RTL alignment

* Prepare Forui for review

* Update macos-latest goldens

* Update windows-latest goldens

---------

Co-authored-by: Pante <[email protected]>

Author: Pante

forui/CHANGELOG.md

@@ -1,14 +1,16 @@
+import 'dart:math';
 import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
 import 'package:meta/meta.dart';
-import 'package:sugar/collection.dart';
 
 import 'package:forui/forui.dart';
 import 'package:forui/src/foundation/debug.dart';
+import 'package:forui/src/foundation/rendering.dart';
 
 part 'header.design.dart';
 

forui/lib/src/widgets/header/header.dart

@@ -40,50 +40,6 @@ class _FNestedHeader extends FHeader {
     final style = this.style?.call(context.theme.headerStyles.nestedStyle) ?? context.theme.headerStyles.nestedStyle;
     final alignment = titleAlignment.resolve(Directionality.maybeOf(context) ?? TextDirection.ltr);
 
-    Widget title = Align(
-      alignment: alignment,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 10.0),
-        child: DefaultTextStyle.merge(
-          overflow: TextOverflow.fade,
-          maxLines: 1,
-          softWrap: false,
-          style: style.titleTextStyle,
-          child: this.title,
-        ),
-      ),
-    );
-
-    if (prefixes.isNotEmpty || suffixes.isNotEmpty) {
-      final spacing = SizedBox(width: style.actionSpacing);
-      final prefixes = Row(
-        mainAxisSize: MainAxisSize.min,
-        children: separate(this.prefixes, by: [spacing]),
-      );
-      final suffixes = Row(
-        mainAxisSize: MainAxisSize.min,
-        children: separate(this.suffixes, by: [spacing]),
-      );
-
-      // We use a stack as a row could result in the title being off centered if the icon on the left or right is
-      // missing/different sizes.
-      title = alignment.x == 0
-          ? Stack(
-              children: [
-                title,
-                Align(alignment: Alignment.centerLeft, child: prefixes),
-                Align(alignment: Alignment.centerRight, child: suffixes),
-              ],
-            )
-          : Row(
-              children: [
-                prefixes,
-                Expanded(child: title),
-                suffixes,
-              ],
-            );
-    }
-
     Widget header = SafeArea(
       bottom: false,
       child: Semantics(
@@ -92,7 +48,28 @@ class _FNestedHeader extends FHeader {
           decoration: style.decoration,
           child: Padding(
             padding: style.padding,
-            child: FHeaderData(actionStyle: style.actionStyle, child: title),
+            child: FHeaderData(
+              actionStyle: style.actionStyle,
+              child: _NestedHeader(
+                alignment: alignment,
+                prefixes: Row(mainAxisSize: MainAxisSize.min, spacing: style.actionSpacing, children: prefixes),
+                title: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
+                  child: DefaultTextStyle.merge(
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                    softWrap: false,
+                    style: style.titleTextStyle,
+                    textHeightBehavior: const TextHeightBehavior(
+                      applyHeightToFirstAscent: false,
+                      applyHeightToLastDescent: false,
+                    ),
+                    child: title,
+                  ),
+                ),
+                suffixes: Row(mainAxisSize: MainAxisSize.min, spacing: style.actionSpacing, children: suffixes),
+              ),
+            ),
           ),
         ),
       ),
@@ -122,3 +99,106 @@ class _FNestedHeader extends FHeader {
       ..add(DiagnosticsProperty('titleAlignment', titleAlignment));
   }
 }
+
+class _NestedHeader extends MultiChildRenderObjectWidget {
+  final Alignment alignment;
+
+  _NestedHeader({required this.alignment, required Widget prefixes, required Widget title, required Widget suffixes})
+    : super(children: [prefixes, title, suffixes]);
+
+  @override
+  RenderObject createRenderObject(BuildContext context) =>
+      _RenderNestedHeader(alignment: alignment, textDirection: Directionality.of(context));
+
+  @override
+  void updateRenderObject(BuildContext context, covariant _RenderNestedHeader renderObject) => renderObject
+    ..alignment = alignment
+    ..direction = Directionality.of(context);
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DiagnosticsProperty('alignment', alignment));
+  }
+}
+
+class _RenderNestedHeader extends RenderBox
+    with ContainerRenderObjectMixin<RenderBox, DefaultData>, RenderBoxContainerDefaultsMixin<RenderBox, DefaultData> {
+  Alignment _alignment;
+  TextDirection _direction;
+
+  _RenderNestedHeader({required Alignment alignment, required TextDirection textDirection})
+    : _alignment = alignment,
+      _direction = textDirection;
+
+  @override
+  void setupParentData(RenderBox child) => child.parentData = DefaultData();
+
+  @override
+  void performLayout() {
+    if (childCount == 0) {
+      size = constraints.smallest;
+      return;
+    }
+
+    final prefixes = firstChild!;
+    final title = childAfter(prefixes)!;
+    final suffixes = childAfter(title)!;
+
+    // We prioritize the prefixes and suffixes since they are interactive.
+    prefixes.layout(constraints, parentUsesSize: true);
+    suffixes.layout(constraints, parentUsesSize: true);
+    title.layout(
+      constraints.copyWith(maxWidth: constraints.maxWidth - prefixes.size.width - suffixes.size.width),
+      parentUsesSize: true,
+    );
+
+    final height = [title.size.height, prefixes.size.height, suffixes.size.height].reduce(max);
+    size = constraints.constrain(Size(constraints.maxWidth, height));
+
+    final (left, right) = _direction == TextDirection.ltr ? (prefixes, suffixes) : (suffixes, prefixes);
+    left.data.offset = Offset(0, (size.height - left.size.height) / 2);
+    right.data.offset = Offset(size.width - right.size.width, (size.height - right.size.height) / 2);
+
+    // Position title based on Alignment (-1 to 1) on each axis where 0 is center.
+    // Title x-axis is relative to the center of the NestedHeader container
+    final titleX = (size.width - title.size.width) / 2 * (alignment.x + 1);
+    final titleY = (size.height - title.size.height) * (alignment.y + 1) / 2;
+    title.data.offset = Offset(titleX.clamp(left.size.width, size.width - right.size.width - title.size.width), titleY);
+  }
+
+  @override
+  void paint(PaintingContext context, Offset offset) => defaultPaint(context, offset);
+
+  @override
+  bool hitTestChildren(BoxHitTestResult result, {required Offset position}) =>
+      defaultHitTestChildren(result, position: position);
+
+  Alignment get alignment => _alignment;
+
+  set alignment(Alignment value) {
+    if (_alignment == value) {
+      return;
+    }
+    _alignment = value;
+    markNeedsLayout();
+  }
+
+  TextDirection get direction => _direction;
+
+  set direction(TextDirection value) {
+    if (_direction == value) {
+      return;
+    }
+    _direction = value;
+    markNeedsLayout();
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty('alignment', alignment))
+      ..add(EnumProperty('direction', direction));
+  }
+}

forui/lib/src/widgets/header/nested_header.dart

@@ -33,10 +33,14 @@ class _FRootHeader extends FHeader {
             children: [
               Expanded(
                 child: DefaultTextStyle.merge(
-                  overflow: TextOverflow.fade,
+                  overflow: TextOverflow.ellipsis,
                   maxLines: 1,
                   softWrap: false,
                   style: style.titleTextStyle,
+                  textHeightBehavior: const TextHeightBehavior(
+                    applyHeightToFirstAscent: false,
+                    applyHeightToLastDescent: false,
+                  ),
                   child: title,
                 ),
               ),