Add an example for how to hide default scrollbar on desktop platform. (#108542)

examples/api/lib/widgets/scrollbar/raw_scrollbar.desktop.0.dart

@@ -0,0 +1,97 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Flutter code sample for Scrollbar
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const ScrollbarApp());
+
+class ScrollbarApp extends StatelessWidget {
+  const ScrollbarApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(title: const Text('Scrollbar Sample')),
+        body: const Center(
+          child: MyStatefulWidget(),
+        ),
+      ),
+    );
+  }
+}
+
+class MyStatefulWidget extends StatefulWidget {
+  const MyStatefulWidget({super.key});
+
+  @override
+  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+  final ScrollController controller = ScrollController();
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+      return Row(
+        children: <Widget>[
+          SizedBox(
+              width: constraints.maxWidth / 2,
+              // When running this sample on desktop, two scrollbars will be
+              // visible here. One is the default scrollbar and the other is the
+              // Scrollbar widget with custom thickness.
+              child: Scrollbar(
+                thickness: 20.0,
+                thumbVisibility: true,
+                controller: controller,
+                child: ListView.builder(
+                  controller: controller,
+                  itemCount: 100,
+                  itemBuilder: (BuildContext context, int index) {
+                    return SizedBox(
+                      height: 50,
+                      child: Padding(
+                        padding: const EdgeInsets.all(8.0),
+                        child: Text('Scrollable 1 : Index $index'),
+                      ),
+                    );
+                  },
+                ),
+              )),
+          SizedBox(
+              width: constraints.maxWidth / 2,
+              // When running this sample on desktop, one scrollbar will be
+              // visible here. The default scrollbar is hidden by setting the
+              // ScrollConfiguration's scrollbars to false. The Scrollbar widget
+              // with custom thickness is visible.
+              child: Scrollbar(
+                thickness: 20.0,
+                thumbVisibility: true,
+                child: ScrollConfiguration(
+                  behavior: ScrollConfiguration.of(context)
+                      .copyWith(scrollbars: false),
+                  child: ListView.builder(
+                    primary: true,
+                    itemCount: 100,
+                    itemBuilder: (BuildContext context, int index) {
+                      return SizedBox(
+                        height: 50,
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text('Scrollable 2 : Index $index'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              )),
+        ],
+      );
+    });
+  }
+}

examples/api/test/widgets/scrollbar/raw_scrollbar.desktop.0.dart

@@ -0,0 +1,20 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/widgets/scrollbar/raw_scrollbar.desktop.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Can hide default scrollbar on desktop', (WidgetTester tester) async {
+
+    await tester.pumpWidget(
+      const example.ScrollbarApp(),
+    );
+
+    // Two from left list view where scroll configuration is not set.
+    // One from right list view where scroll configuration is set.
+    expect(find.byType(Scrollbar), findsNWidgets(3));
+  });
+}

packages/flutter/lib/src/widgets/scrollbar.dart

@@ -916,6 +916,28 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
 ///   * [PageView]
 ///   * [NestedScrollView]
 ///   * [DropdownButton]
+///
+/// Default Scrollbars can be disabled for the whole app by setting a
+/// [ScrollBehavior] with `scrollbars` set to false.
+///
+/// {@tool snippet}
+/// ```dart
+/// MaterialApp(
+///   scrollBehavior: const MaterialScrollBehavior()
+///     .copyWith(scrollbars: false),
+///   home: Scaffold(
+///     appBar: AppBar(title: const Text('Home')),
+///   ),
+/// )
+/// ```
+/// {@end-tool}
+///
+/// {@tool dartpad}
+/// This sample shows how to disable the default Scrollbar for a [Scrollable]
+/// widget to avoid duplicate Scrollbars when runnung on desktop platforms.
+///
+/// ** See code in examples/api/lib/widgets/scrollbar/raw_scrollbar.desktop.0.dart **
+/// {@end-tool}
 /// {@endtemplate}
 ///
 /// {@tool dartpad}