Improve Scrolling (bdlukaa#35)

README.md

@@ -28,6 +28,8 @@ Unofficial implementation of Fluent UI for [Flutter](flutter.dev). It's written
 
 ### You can check the web version of it [here](https://bdlukaa.github.io/fluent_ui/)
 
+Projects using this library should use the stable channel of Flutter
+
 ### Content
 
 - [Motivation](#motivation)

example/lib/screens/colors.dart

@@ -23,9 +23,12 @@ class ColorsPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return ScaffoldPage(
       header: PageHeader(title: Text('Colors Showcase')),
-      contentScrollController: controller,
       content: ListView(
-        padding: EdgeInsets.only(bottom: kPageDefaultVerticalPadding),
+        padding: EdgeInsets.only(
+          bottom: kPageDefaultVerticalPadding,
+          left: PageHeader.horizontalPadding(context),
+          right: PageHeader.horizontalPadding(context),
+        ),
         controller: controller,
         children: [
           InfoLabel(

example/lib/screens/inputs.dart

@@ -39,9 +39,11 @@ class _InputsPageState extends State<InputsPage> {
           ),
         ),
       ),
-      contentScrollController: scrollController,
       content: SingleChildScrollView(
         controller: scrollController,
+        padding: EdgeInsets.symmetric(
+          horizontal: PageHeader.horizontalPadding(context),
+        ),
         child: Wrap(spacing: 10, runSpacing: 10, children: [
           Acrylic(
             padding: EdgeInsets.all(8.0),

example/lib/screens/others.dart

@@ -46,9 +46,12 @@ class _OthersState extends State<Others> {
   Widget build(BuildContext context) {
     return ScaffoldPage(
       header: PageHeader(title: Text('Others')),
-      contentScrollController: otherController,
       content: ListView(
-        padding: EdgeInsets.only(bottom: kPageDefaultVerticalPadding),
+        padding: EdgeInsets.only(
+          bottom: kPageDefaultVerticalPadding,
+          left: PageHeader.horizontalPadding(context),
+          right: PageHeader.horizontalPadding(context),
+        ),
         controller: otherController,
         children: [
           Acrylic(

example/lib/screens/settings.dart

@@ -52,9 +52,12 @@ class Settings extends StatelessWidget {
     }());
     return ScaffoldPage(
       header: PageHeader(title: Text('Settings')),
-      contentScrollController: controller,
       content: ListView(
-        padding: EdgeInsets.only(bottom: kPageDefaultVerticalPadding),
+        padding: EdgeInsets.only(
+          bottom: kPageDefaultVerticalPadding,
+          left: PageHeader.horizontalPadding(context),
+          right: PageHeader.horizontalPadding(context),
+        ),
         controller: controller,
         children: [
           Text('Theme mode', style: context.theme.typography.subtitle),

example/pubspec.lock

@@ -14,7 +14,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.1"
   bitsdojo_window:
     dependency: "direct main"
     description:
@@ -216,7 +216,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
@@ -265,7 +265,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19"
+    version: "0.3.0"
   typed_data:
     dependency: transitive
     description:
@@ -303,4 +303,4 @@ packages:
     version: "3.1.0"
 sdks:
   dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.22.0"
+  flutter: ">=2.2.0"

lib/src/app.dart

@@ -1,5 +1,6 @@
 import 'package:fluent_ui/fluent_ui.dart';
-import 'package:flutter/material.dart' as m;
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart' show DefaultMaterialLocalizations;
 
 /// An application that uses fluent design.
 ///
@@ -70,6 +71,7 @@ class FluentApp extends StatefulWidget {
     this.darkTheme,
     this.themeMode,
     this.restorationScopeId,
+    this.scrollBehavior = const FluentScrollBehavior(),
   })  : routeInformationProvider = null,
         routeInformationParser = null,
         routerDelegate = null,
@@ -103,6 +105,7 @@ class FluentApp extends StatefulWidget {
     this.shortcuts,
     this.actions,
     this.restorationScopeId,
+    this.scrollBehavior = const FluentScrollBehavior(),
   })  : assert(routeInformationParser != null && routerDelegate != null,
             'The routeInformationParser and routerDelegate cannot be null.'),
         assert(supportedLocales.isNotEmpty),
@@ -328,6 +331,14 @@ class FluentApp extends StatefulWidget {
   /// {@macro flutter.widgets.widgetsApp.restorationScopeId}
   final String? restorationScopeId;
 
+  /// {@macro flutter.material.materialApp.scrollBehavior}
+  ///
+  /// See also:
+  ///
+  ///  * [ScrollConfiguration], which controls how [Scrollable] widgets behave
+  ///    in a subtree.
+  final ScrollBehavior scrollBehavior;
+
   static bool showPerformanceOverlayOverride = false;
 
   static bool debugShowWidgetInspectorOverride = false;
@@ -356,7 +367,7 @@ class _FluentAppState extends State<FluentApp> {
     if (widget.localizationsDelegates != null)
       yield* widget.localizationsDelegates!;
     yield DefaultFluentLocalizations.delegate;
-    yield m.DefaultMaterialLocalizations.delegate;
+    yield DefaultMaterialLocalizations.delegate;
     yield DefaultWidgetsLocalizations.delegate;
   }
 
@@ -365,9 +376,12 @@ class _FluentAppState extends State<FluentApp> {
   @override
   Widget build(BuildContext context) {
     final result = _buildApp(context);
-    return HeroControllerScope(
-      controller: _heroController,
-      child: result,
+    return ScrollConfiguration(
+      behavior: widget.scrollBehavior,
+      child: HeroControllerScope(
+        controller: _heroController,
+        child: result,
+      ),
     );
   }
 
@@ -463,3 +477,58 @@ class _FluentAppState extends State<FluentApp> {
     );
   }
 }
+
+/// Describes how [Scrollable] widgets behave for [FluentApp]s.
+///
+/// {@macro flutter.widgets.scrollBehavior}
+///
+/// When using the desktop platform, if the [Scrollable] widget scrolls in the
+/// [Axis.vertical], a [Scrollbar] is applied.
+///
+/// See also:
+///
+///  * [ScrollBehavior], the default scrolling behavior extended by this class.
+class FluentScrollBehavior extends ScrollBehavior {
+  /// Creates a MaterialScrollBehavior that decorates [Scrollable]s with
+  /// [Scrollbar]s based on the current platform and provided [ScrollableDetails].
+  const FluentScrollBehavior();
+
+  @override
+  Widget buildScrollbar(context, child, details) {
+    // When modifying this function, consider modifying the implementation in
+    // the base class as well.
+    switch (axisDirectionToAxis(details.direction)) {
+      case Axis.horizontal:
+        return child;
+      case Axis.vertical:
+        switch (getPlatform(context)) {
+          case TargetPlatform.linux:
+          case TargetPlatform.macOS:
+          case TargetPlatform.windows:
+            return Scrollbar(
+              child: child,
+              controller: details.controller,
+            );
+          case TargetPlatform.android:
+          case TargetPlatform.fuchsia:
+          case TargetPlatform.iOS:
+            return child;
+        }
+    }
+  }
+
+  @override
+  Widget buildOverscrollIndicator(context, child, details) {
+    // When modifying this function, consider modifying the implementation in
+    // the base class as well.
+    switch (getPlatform(context)) {
+      case TargetPlatform.iOS:
+      case TargetPlatform.linux:
+      case TargetPlatform.macOS:
+      case TargetPlatform.windows:
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+        return child;
+    }
+  }
+}

lib/src/controls/utils/scrollbar.dart

@@ -149,7 +149,7 @@ class _ScrollbarState extends RawScrollbarState<Scrollbar> {
   void handleHover(PointerHoverEvent event) async {
     super.handleHover(event);
     // Check if the position of the pointer falls over the painted scrollbar
-    if (isPointerOverScrollbar(event.position)) {
+    if (isPointerOverScrollbar(event.position, event.kind)) {
       // Pointer is hovering over the scrollbar
       setState(() {
         _hoverIsActive = true;

lib/src/layout/page.dart

@@ -20,7 +20,6 @@ class ScaffoldPage extends StatelessWidget {
     this.header,
     this.content = const SizedBox.expand(),
     this.bottomBar,
-    this.contentScrollController,
     this.padding,
   }) : super(key: key);
 
@@ -42,10 +41,6 @@ class ScaffoldPage extends StatelessWidget {
   /// screen is small.
   final Widget? bottomBar;
 
-  /// The scroll controller used by the [Scrollbar] implemented by this widget.
-  /// If null, no scrollbar will be added.
-  final ScrollController? contentScrollController;
-
   /// The padding used by this widget.
   ///
   /// If [contentScrollController] is not null, the scrollbar is rendered over
@@ -73,19 +68,7 @@ class ScaffoldPage extends StatelessWidget {
       ),
       child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
         if (header != null) header!,
-        Expanded(child: () {
-          final finalContent = Padding(
-            padding: horizontalPadding,
-            child: content,
-          );
-          if (contentScrollController != null) {
-            return Scrollbar(
-              controller: contentScrollController,
-              child: finalContent,
-            );
-          }
-          return finalContent;
-        }()),
+        Expanded(child: content),
         if (bottomBar != null)
           Padding(padding: horizontalPadding, child: bottomBar),
       ]),

pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.1"
   boolean_selector:
     dependency: transitive
     description:
@@ -99,7 +99,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
@@ -134,7 +134,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19"
+    version: "0.3.0"
   typed_data:
     dependency: transitive
     description:
@@ -151,4 +151,4 @@ packages:
     version: "2.1.0"
 sdks:
   dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.17.0"
+  flutter: ">=2.2.0"

pubspec.yaml

@@ -5,7 +5,7 @@ homepage: https://github.com/bdlukaa/fluent_ui
 
 environment:
   sdk: '>=2.12.0 <3.0.0'
-  flutter: ">=1.17.0"
+  flutter: ">=2.2.0"
 
 dependencies:
   flutter: