Fix auto_scroll end-following past code blocks / nested scrollables (#6642)

* Fix auto_scroll end-following past code blocks / nested scrollables

Two issues broke auto_scroll's end-following when a tall child (e.g. a Markdown
code block) was inserted:

- The ScrollMetricsNotification listener reacted to *nested* scrollables (a code
  block renders inside a horizontal scroller), tracking the wrong extent. Only
  react to this scrollable's own metrics (notification.depth == 0).
- _onScroll unpinned purely on proximity (pixels >= max - threshold). A tall
  insert jumps maxScrollExtent past the threshold in one frame while pixels
  stays put, flipping to unpinned so it stopped following. Now it only unpins
  when the user scrolls *up* (pixels decrease) and re-pins at the end; content
  growing beneath a stationary position keeps it pinned.

* Fix embedded FletApp stdout/stderr dropped by the framed transport

The Pyodide↔Dart postMessage transport frames every packet as [type:u8][payload]
(0x00 = MsgPack Flet protocol frame, 0x01 = raw DataChannel frame), and
PyodideConnection.send_message prepends the 0x00 byte. The python_output shim,
however, posted the raw msgpack [7, {...}] with no type byte, so the Dart side
read msgpack's leading 0x92 (array-of-2 marker) as an unknown packet type and
silently dropped every stdout/stderr line — the host page's Console pane never
saw embedded-app output. Prepend the 0x00 type byte in both worker templates
(client + cookiecutter build template).

Author: FeodorFitsner

client/web/python-worker.js

@@ -170,8 +170,15 @@ self.initPyodide = async function () {
             import msgpack as _msgpack
 
         def _send_python_output(text, is_stderr):
+            # Frame exactly like PyodideConnection.send_message: a 0x00 type
+            # byte (0x00 = MsgPack Flet protocol frame, 0x01 = raw DataChannel
+            # frame) in front of the packed [action, body]. Without the prefix
+            # the Dart side reads msgpack's leading 0x92 as an unknown packet
+            # type and silently drops the line. bytes([0]) avoids a literal
+            # NUL escape inside this JS template string.
             flet_js.receive_callback(
-                _msgpack.packb(
+                bytes([0])
+                + _msgpack.packb(
                     [7, {"text": text, "is_stderr": bool(is_stderr)}]
                 )
             )

packages/flet/lib/src/controls/scrollable_control.dart

@@ -43,6 +43,7 @@ class _ScrollableControlState extends State<ScrollableControl>
   static const double _autoScrollThreshold = 40.0;
   bool _pinnedToEnd = true;
   double _lastMaxScrollExtent = 0;
+  double _lastPixels = 0;
   bool _autoScrollScheduled = false;
   // When set (via the `auto_scroll_animation` property) auto-scroll animates
   // to the end with this duration/curve; otherwise it jumps instantly.
@@ -64,9 +65,17 @@ class _ScrollableControlState extends State<ScrollableControl>
   void _onScroll() {
     if (!_controller.hasClients) return;
     final pos = _controller.position;
-    // "At the end" if within a small threshold of the max extent — so a
-    // partially-visible last line still counts as pinned.
-    _pinnedToEnd = pos.pixels >= pos.maxScrollExtent - _autoScrollThreshold;
+    // Unpin only when the user scrolls *up* (pixels decrease). Content growing
+    // beneath a stationary position (e.g. a tall Markdown code block inserted
+    // at the end) leaves pixels unchanged, so it must NOT unpin — otherwise a
+    // big extent jump would strand the view above the new content. Re-pin once
+    // the position returns to within a small threshold of the end.
+    if (pos.pixels < _lastPixels - 0.5) {
+      _pinnedToEnd = false;
+    } else if (pos.pixels >= pos.maxScrollExtent - _autoScrollThreshold) {
+      _pinnedToEnd = true;
+    }
+    _lastPixels = pos.pixels;
   }
 
   void _scheduleScrollToEnd({bool force = false}) {
@@ -95,6 +104,11 @@ class _ScrollableControlState extends State<ScrollableControl>
   Widget _wrapAutoScroll(Widget child) {
     return NotificationListener<ScrollMetricsNotification>(
       onNotification: (notification) {
+        // Only react to this scrollable's own metrics. Nested scrollables
+        // (e.g. a Markdown code block's horizontal scroller) bubble their
+        // notifications through with depth > 0; responding to those would
+        // track the wrong extent and break end-following.
+        if (notification.depth != 0) return false;
         final max = notification.metrics.maxScrollExtent;
         if (max > _lastMaxScrollExtent + 0.5 && _pinnedToEnd) {
           _scheduleScrollToEnd();

sdk/python/templates/build/{{cookiecutter.out_dir}}/web/python-worker.js

@@ -170,8 +170,15 @@ self.initPyodide = async function () {
             import msgpack as _msgpack
 
         def _send_python_output(text, is_stderr):
+            # Frame exactly like PyodideConnection.send_message: a 0x00 type
+            # byte (0x00 = MsgPack Flet protocol frame, 0x01 = raw DataChannel
+            # frame) in front of the packed [action, body]. Without the prefix
+            # the Dart side reads msgpack's leading 0x92 as an unknown packet
+            # type and silently drops the line. bytes([0]) avoids a literal
+            # NUL escape inside this JS template string.
             flet_js.receive_callback(
-                _msgpack.packb(
+                bytes([0])
+                + _msgpack.packb(
                     [7, {"text": text, "is_stderr": bool(is_stderr)}]
                 )
             )