feat(scrollbars): draggable vertical scrollbar

New settings to control scrollbars appearance. Draggable vertical scrollbar functionality with CupertinoScrollbar widget regardless of target platform (optionally)
MathGaps · Nov 7, 2020 · 9124bce · 9124bce
1 parent 870ed88
commit 9124bce
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 21 deletions.
diff --git a/lib/pluto_grid.dart b/lib/pluto_grid.dart
@@ -4,6 +4,7 @@ import 'dart:async';
 import 'dart:developer' as developer;
 import 'dart:math';
 
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';

diff --git a/lib/src/pluto_configuration.dart b/lib/src/pluto_configuration.dart
@@ -50,6 +50,9 @@ class PlutoConfiguration {
 
   final PlutoGridLocaleText localeText;
 
+  /// Customise scrollbars for desktop usage
+  final PlutoScrollbarConfig scrollbarConfig;
+
   PlutoConfiguration({
     this.enableColumnBorder = false,
     this.gridBackgroundColor = Colors.white,
@@ -75,6 +78,7 @@ class PlutoConfiguration {
     this.enableMoveDownAfterSelecting = true,
     this.enterKeyAction = PlutoEnterKeyAction.EditingAndMoveDown,
     this.localeText = const PlutoGridLocaleText(),
+    this.scrollbarConfig = const PlutoScrollbarConfig.noScroll()
   });
 
   PlutoConfiguration.dark({
@@ -102,6 +106,7 @@ class PlutoConfiguration {
     this.enableMoveDownAfterSelecting = true,
     this.enterKeyAction = PlutoEnterKeyAction.EditingAndMoveDown,
     this.localeText = const PlutoGridLocaleText(),
+    this.scrollbarConfig = const PlutoScrollbarConfig.noScroll()
   });
 }
 
@@ -180,3 +185,45 @@ extension PlutoEnterKeyActionExtension on PlutoEnterKeyAction {
 
   bool get isNone => this == null || this == PlutoEnterKeyAction.None;
 }
+
+/// Allows to customise scrollbars "look and feel"
+/// The general feature is making vertical scrollbar draggable and therefore more useful
+/// for desktop systems. Set [draggableScrollbar] to true to achieve this behavior. Also
+/// changing [isAlwaysShown] to true is recommended for more usability at desktops
+///
+/// Unfortunately, horizontal scrollbar still will not be draggable, it seems like
+/// framework limitation
+class PlutoScrollbarConfig {
+  PlutoScrollbarConfig({
+    this.draggableScrollbar = false,
+    this.isAlwaysShown = false,
+    Radius scrollbarRadius,
+    Radius scrollbarRadiusWhileDragging,
+    double scrollbarThickness,
+    double scrollbarThicknessWhileDragging})
+      : this.scrollbarThickness = scrollbarThickness ??
+      (draggableScrollbar ? (CupertinoScrollbar.defaultThickness) : 6.0),
+        this.scrollbarRadius = scrollbarRadius ??
+            (draggableScrollbar ? (CupertinoScrollbar.defaultRadius) : null),
+        this.scrollbarThicknessWhileDragging = scrollbarThicknessWhileDragging ??
+            CupertinoScrollbar.defaultThicknessWhileDragging,
+        this.scrollbarRadiusWhileDragging =
+            scrollbarRadiusWhileDragging ?? CupertinoScrollbar.defaultRadiusWhileDragging;
+
+  const PlutoScrollbarConfig.noScroll()
+      : draggableScrollbar= false,
+        isAlwaysShown = false,
+        scrollbarRadius= CupertinoScrollbar.defaultRadius,
+        scrollbarRadiusWhileDragging= CupertinoScrollbar.defaultRadiusWhileDragging,
+        scrollbarThickness= null,
+        scrollbarThicknessWhileDragging= CupertinoScrollbar.defaultThicknessWhileDragging;
+
+  /// Force use Cupertino scrollbars regardless of target platform.
+  final bool draggableScrollbar;
+  final bool isAlwaysShown;
+
+  final double scrollbarThickness;
+  final double scrollbarThicknessWhileDragging;
+  final Radius scrollbarRadius;
+  final Radius scrollbarRadiusWhileDragging;
+}
diff --git a/lib/src/ui/body_rows.dart b/lib/src/ui/body_rows.dart
@@ -78,29 +78,45 @@ class _BodyRowsState extends State<BodyRows> {
 
   @override
   Widget build(BuildContext context) {
-    return Scrollbar(
-      child: SingleChildScrollView(
-        controller: horizontalScroll,
-        scrollDirection: Axis.horizontal,
-        child: SizedBox(
-          width: _width,
-          child: ListView.builder(
-            controller: verticalScroll,
-            scrollDirection: Axis.vertical,
-            itemCount: _rows.length,
-            itemExtent: PlutoDefaultSettings.rowTotalHeight,
-            itemBuilder: (ctx, i) {
-              return RowWidget(
-                key: ValueKey('body_row_${_rows[i]._key}'),
-                stateManager: widget.stateManager,
-                rowIdx: i,
-                row: _rows[i],
-                columns: _columns,
-              );
-            },
-          ),
+    final body = SingleChildScrollView(
+      controller: horizontalScroll,
+      scrollDirection: Axis.horizontal,
+      child: SizedBox(
+        width: _width,
+        child: ListView.builder(
+          controller: verticalScroll,
+          scrollDirection: Axis.vertical,
+          itemCount: _rows.length,
+          itemExtent: PlutoDefaultSettings.rowTotalHeight,
+          itemBuilder: (ctx, i) {
+            return RowWidget(
+              key: ValueKey('body_row_${_rows[i]._key}'),
+              stateManager: widget.stateManager,
+              rowIdx: i,
+              row: _rows[i],
+              columns: _columns,
+            );
+          },
         ),
       ),
     );
+
+    if (widget.stateManager.configuration.scrollbarConfig.draggableScrollbar) {
+      return CupertinoScrollbar(
+          child: body,
+          isAlwaysShown: widget.stateManager.configuration.scrollbarConfig.isAlwaysShown,
+          controller: verticalScroll,
+          thickness: widget.stateManager.configuration.scrollbarConfig.scrollbarThickness,
+          thicknessWhileDragging: widget
+              .stateManager.configuration.scrollbarConfig.scrollbarThicknessWhileDragging,
+          radius: widget.stateManager.configuration.scrollbarConfig.scrollbarRadius,
+          radiusWhileDragging: widget
+              .stateManager.configuration.scrollbarConfig.scrollbarRadiusWhileDragging);
+    }
+    return Scrollbar(
+      thickness: widget.stateManager.configuration.scrollbarConfig.scrollbarThickness,
+      radius: widget.stateManager.configuration.scrollbarConfig.scrollbarRadius,
+      child: body,
+    );
   }
 }