Unverified Commit 9da693e3 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

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

parent 12f9ea97
// 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'),
),
);
},
),
),
)),
],
);
});
}
}
// 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));
});
}
......@@ -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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment