Layout fix wip

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/swipable_message_row.dart

@@ -9,7 +9,7 @@ import 'icons.dart';
 import 'text.dart';
 import 'theme.dart';
 
-class SwipableMessageRow extends StatefulWidget {
+class SwipableMessageRow extends StatelessWidget {
   const SwipableMessageRow({
     super.key,
     required this.children,
@@ -20,19 +20,69 @@ class SwipableMessageRow extends StatefulWidget {
   final Message message;
 
   @override
-  State<StatefulWidget> createState() => _SwipableMessageRowState();
+  Widget build(BuildContext context) {
+    // print('regular build');
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        print('layout rebuild');
+        return OverflowBox(
+          fit: OverflowBoxFit.deferToChild,
+          alignment: Alignment.topLeft,
+          maxWidth: double.infinity,
+          child: _RowWithEditStateMarker(
+            editState: message.editState,
+            child: Builder(builder: (context) {
+            return SizedBox(
+              width: constraints.maxWidth - 16,
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.baseline,
+                textBaseline: localizedTextBaseline(context),
+                children: children));
+                }))
+      );
+      }
+    );
+   }
 }
 
-class _SwipableMessageRowState extends State<SwipableMessageRow> with TickerProviderStateMixin {
+class _RowWithEditStateMarker extends StatefulWidget {
+  /// The minimum width of the marker.
+  ///
+  /// This is when no drag has been performed on the message row
+  /// where only the moved/edited icon, not the text, is visible.
+  static const double widthCollapsed = 16;
+
+  /// The maximum width of the marker.
+  ///
+  /// This is typically wider than the colored pill when the marker is fully
+  /// expanded. At that point only the blank space to the right of the colored
+  /// block will grow until the marker reaches this width.
+  static const double widthExpanded = 100;
+
+  const _RowWithEditStateMarker({
+    required MessageEditState editState,
+    required this.child,
+  }) : _editState = editState;
+
+  final MessageEditState _editState;
+  final Widget child;
+
+  @override
+  State<_RowWithEditStateMarker> createState() => _RowWithEditStateMarkerState();
+}
+
+class _RowWithEditStateMarkerState extends State<_RowWithEditStateMarker> with TickerProviderStateMixin  {
+  double get _animationProgress => (_controller.value - _RowWithEditStateMarker.widthCollapsed) / _RowWithEditStateMarker.widthExpanded;
+
   @override
   void initState() {
     super.initState();
     _controller = AnimationController(
       // The duration is only used when `_controller.reverse()` is called,
       // i.e.: when the drag is released and the marker gets collapsed.
       duration: const Duration(milliseconds: 200),
-      lowerBound: _EditStateMarker.widthCollapsed,
-      upperBound: _EditStateMarker.widthExpanded,
+      lowerBound: _RowWithEditStateMarker.widthCollapsed,
+      upperBound: _RowWithEditStateMarker.widthExpanded,
       vsync: this)
       ..addListener(() => setState((){}));
   }
@@ -53,68 +103,6 @@ class _SwipableMessageRowState extends State<SwipableMessageRow> with TickerProv
     _controller.reverse();
   }
 
-  @override
-  Widget build(BuildContext context) {
-    final hasMarker = widget.message.editState != MessageEditState.none;
-
-    final content = LayoutBuilder(
-      builder: (context, constraints) => OverflowBox(
-        fit: OverflowBoxFit.deferToChild,
-        alignment: Alignment.topLeft,
-        maxWidth: double.infinity,
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.baseline,
-          textBaseline: localizedTextBaseline(context),
-          children: [
-            hasMarker
-              ? _EditStateMarker(
-                  editState: widget.message.editState,
-                  animation: _controller)
-                : const SizedBox(width: 16),
-              SizedBox(
-                width: constraints.maxWidth - 16,
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.baseline,
-                  textBaseline: localizedTextBaseline(context),
-                  children: widget.children),
-              ),
-          ])),
-    );
-
-    if (!hasMarker) return content;
-
-    return GestureDetector(
-      onHorizontalDragEnd: _handleDragEnd,
-      onHorizontalDragUpdate: _handleDragUpdate,
-      child: content,
-    );
-   }
-}
-
-class _EditStateMarker extends StatelessWidget {
-  /// The minimum width of the marker.
-  ///
-  /// This is when no drag has been performed on the message row
-  /// where only the moved/edited icon, not the text, is visible.
-  static const double widthCollapsed = 16;
-
-  /// The maximum width of the marker.
-  ///
-  /// This is typically wider than the colored pill when the marker is fully
-  /// expanded. At that point only the blank space to the right of the colored
-  /// block will grow until the marker reaches this width.
-  static const double widthExpanded = 100;
-
-  const _EditStateMarker({
-    required MessageEditState editState,
-    required Animation<double> animation,
-  }) : _editState = editState, _animation = animation;
-
-  final MessageEditState _editState;
-  final Animation<double> _animation;
-
-  double get _animationProgress => (_animation.value - widthCollapsed) / widthExpanded;
-
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
@@ -124,9 +112,9 @@ class _EditStateMarker extends StatelessWidget {
     final double iconSize;
     final String markerText;
 
-    switch (_editState) {
+    switch (widget._editState) {
       case MessageEditState.none:
-        return const SizedBox(width: widthCollapsed);
+        return const SizedBox(width: _RowWithEditStateMarker.widthCollapsed);
       case MessageEditState.edited:
         icon = ZulipIcons.edited;
         iconSize = 14;
@@ -139,7 +127,7 @@ class _EditStateMarker extends StatelessWidget {
         break;
     }
 
-    var marker = Row(
+    final markerContent = Row(
       mainAxisAlignment: MainAxisAlignment.end,
       mainAxisSize: MainAxisSize.min,
       children: [
@@ -167,8 +155,9 @@ class _EditStateMarker extends StatelessWidget {
       ],
     );
 
-    return ConstrainedBox(
-      constraints: BoxConstraints(maxWidth: _animation.value),
+
+    final markerBox = ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: _controller.value),
       child: Container(
         margin: EdgeInsetsDirectional.only(
           start: lerpDouble(5, 13, _animationProgress)!, end: 3),
@@ -182,8 +171,20 @@ class _EditStateMarker extends StatelessWidget {
         child: Padding(
           padding: EdgeInsetsDirectional.symmetric(
             horizontal: lerpDouble(0, 3, _animationProgress)!),
-          child: marker),
+          child: markerContent),
       ),
     );
+
+    return GestureDetector(
+      onHorizontalDragEnd: _handleDragEnd,
+      onHorizontalDragUpdate: _handleDragUpdate,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.baseline,
+        textBaseline: localizedTextBaseline(context),
+        children: [
+          widget._editState != MessageEditState.none ? markerBox : const SizedBox(width: 16),
+          widget.child,
+        ]),
+    );
   }
 }