feat: customizable Scrollbars

.github/workflows/macos-integration-tests.yml

@@ -50,7 +50,7 @@ jobs:
         - controls/material
         - controls/services
         - controls/theme
-        - controls/types
+          # - controls/types
         - extensions
 
     name: ${{ matrix.suite }} Integration Tests

packages/flet/lib/flet.dart

@@ -60,6 +60,7 @@ export 'src/utils/platform.dart';
 export 'src/utils/platform_utils_web.dart'
     if (dart.library.io) "src/utils/platform_utils_non_web.dart";
 export 'src/utils/responsive.dart';
+export 'src/utils/scrollbar.dart';
 export 'src/utils/strings.dart';
 export 'src/utils/text.dart';
 export 'src/utils/textfield.dart';

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

@@ -3,9 +3,8 @@ import 'package:flutter/material.dart';
 import '../models/control.dart';
 import '../utils/animations.dart';
 import '../utils/keys.dart';
-import '../utils/misc.dart';
 import '../utils/numbers.dart';
-import '../utils/platform.dart';
+import '../utils/scrollbar.dart';
 import '../utils/time.dart';
 import '../widgets/flet_store_mixin.dart';
 
@@ -95,10 +94,11 @@ class _ScrollableControlState extends State<ScrollableControl>
   @override
   Widget build(BuildContext context) {
     debugPrint("ScrollableControl build: ${widget.control.id}");
-    ScrollMode scrollMode =
-        widget.control.getScrollMode("scroll", ScrollMode.none)!;
+    final scrollConfiguration =
+        widget.control.getScrollbarConfiguration("scroll");
 
-    if (widget.control.getBool("auto_scroll", false)!) {
+    if (widget.control.getBool("auto_scroll", false)! &&
+        scrollConfiguration != null) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         _controller.animateTo(
           _controller.position.maxScrollExtent,
@@ -107,30 +107,26 @@ class _ScrollableControlState extends State<ScrollableControl>
         );
       });
     }
-    return scrollMode != ScrollMode.none
-        ? Scrollbar(
-            // todo: create class ScrollBarConfiguration on Py end, for more customizability
-            thumbVisibility: (scrollMode == ScrollMode.always ||
-                    (scrollMode == ScrollMode.adaptive &&
-                        !isMobilePlatform())) &&
-                scrollMode != ScrollMode.hidden,
-            thickness: scrollMode == ScrollMode.hidden
-                ? 0
-                : isMobilePlatform()
-                    ? 4.0
-                    : null,
-            controller: _controller,
-            child: ScrollConfiguration(
-              behavior:
-                  ScrollConfiguration.of(context).copyWith(scrollbars: false),
-              child: widget.wrapIntoScrollableView
-                  ? SingleChildScrollView(
-                      controller: _controller,
-                      scrollDirection: widget.scrollDirection,
-                      child: widget.child,
-                    )
-                  : widget.child,
-            ))
-        : widget.child;
+
+    if (scrollConfiguration == null) return widget.child;
+
+    return Scrollbar(
+        thumbVisibility: scrollConfiguration.thumbVisibility,
+        trackVisibility: scrollConfiguration.trackVisibility,
+        thickness: scrollConfiguration.thickness,
+        radius: scrollConfiguration.radius,
+        interactive: scrollConfiguration.interactive,
+        scrollbarOrientation: scrollConfiguration.orientation,
+        controller: _controller,
+        child: ScrollConfiguration(
+          behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+          child: widget.wrapIntoScrollableView
+              ? SingleChildScrollView(
+                  controller: _controller,
+                  scrollDirection: widget.scrollDirection,
+                  child: widget.child,
+                )
+              : widget.child,
+        ));
   }
 }

packages/flet/lib/src/utils/misc.dart

@@ -66,13 +66,6 @@ CardVariant? parseCardVariant(String? value, [CardVariant? defaultValue]) {
   return parseEnum(CardVariant.values, value, defaultValue);
 }
 
-enum ScrollMode { none, auto, adaptive, always, hidden }
-
-ScrollMode? parseScrollMode(String? value,
-    [ScrollMode? defaultValue = ScrollMode.none]) {
-  return parseEnum(ScrollMode.values, value, defaultValue);
-}
-
 enum LabelPosition { right, left }
 
 LabelPosition? parseLabelPosition(String? value,
@@ -181,11 +174,6 @@ extension MiscParsers on Control {
     return parseCardVariant(get(propertyName), defaultValue);
   }
 
-  ScrollMode? getScrollMode(String propertyName,
-      [ScrollMode? defaultValue = ScrollMode.none]) {
-    return parseScrollMode(get(propertyName), defaultValue);
-  }
-
   LabelPosition? getLabelPosition(String propertyName,
       [LabelPosition? defaultValue]) {
     return parseLabelPosition(get(propertyName), defaultValue);

packages/flet/lib/src/utils/scrollbar.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import 'borders.dart';
+import 'enums.dart';
+import 'numbers.dart';
+import 'platform.dart';
+
+enum ScrollMode { auto, adaptive, always, hidden }
+
+ScrollMode? parseScrollMode(String? value, [ScrollMode? defaultValue]) {
+  return parseEnum(ScrollMode.values, value, defaultValue);
+}
+
+class ScrollbarConfiguration {
+  final bool? thumbVisibility;
+  final bool? trackVisibility;
+  final double? thickness;
+  final Radius? radius;
+  final bool? interactive;
+  final ScrollbarOrientation? orientation;
+
+  const ScrollbarConfiguration({
+    this.thumbVisibility,
+    this.trackVisibility,
+    this.thickness,
+    this.radius,
+    this.interactive,
+    this.orientation,
+  });
+
+  factory ScrollbarConfiguration.fromScrollMode(ScrollMode mode) {
+    final defaultThickness = isMobilePlatform() ? 4.0 : null;
+
+    switch (mode) {
+      case ScrollMode.auto:
+        return ScrollbarConfiguration(thickness: defaultThickness);
+      case ScrollMode.adaptive:
+        return ScrollbarConfiguration(
+            thumbVisibility: !isMobilePlatform(), thickness: defaultThickness);
+      case ScrollMode.always:
+        return ScrollbarConfiguration(
+            thumbVisibility: true, thickness: defaultThickness);
+      case ScrollMode.hidden:
+        return const ScrollbarConfiguration(thickness: 0);
+    }
+  }
+}
+
+ScrollbarOrientation? parseScrollbarOrientation(String? value,
+    [ScrollbarOrientation? defaultValue]) {
+  return parseEnum(ScrollbarOrientation.values, value, defaultValue);
+}
+
+ScrollbarConfiguration? parseScrollbarConfiguration(dynamic value,
+    [ScrollbarConfiguration? defaultValue]) {
+  if (value == null) return defaultValue;
+  if (value is! Map) {
+    final mode = parseScrollMode(value);
+    return mode == null
+        ? defaultValue
+        : ScrollbarConfiguration.fromScrollMode(mode);
+  }
+
+  final baseConfiguration = ScrollbarConfiguration.fromScrollMode(
+      parseScrollMode(value["mode"], ScrollMode.auto)!);
+
+  return ScrollbarConfiguration(
+    thumbVisibility:
+        parseBool(value["thumb_visibility"], baseConfiguration.thumbVisibility),
+    trackVisibility:
+        parseBool(value["track_visibility"], baseConfiguration.trackVisibility),
+    thickness: parseDouble(value["thickness"], baseConfiguration.thickness),
+    radius: parseRadius(value["radius"], baseConfiguration.radius),
+    interactive: parseBool(value["interactive"], baseConfiguration.interactive),
+    orientation: parseScrollbarOrientation(
+        value["orientation"], baseConfiguration.orientation),
+  );
+}
+
+extension ScrollbarParsers on Control {
+  ScrollMode? getScrollMode(String propertyName, [ScrollMode? defaultValue]) {
+    return parseScrollMode(get(propertyName), defaultValue);
+  }
+
+  ScrollbarConfiguration? getScrollbarConfiguration(String propertyName,
+      [ScrollbarConfiguration? defaultValue]) {
+    return parseScrollbarConfiguration(get(propertyName), defaultValue);
+  }
+}