Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
9da693e3
Unverified
Commit
9da693e3
authored
Aug 18, 2022
by
Taha Tesser
Committed by
GitHub
Aug 18, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add an example for how to hide default scrollbar on desktop platform. (#108542)
parent
12f9ea97
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
139 additions
and
0 deletions
+139
-0
raw_scrollbar.desktop.0.dart
...es/api/lib/widgets/scrollbar/raw_scrollbar.desktop.0.dart
+97
-0
raw_scrollbar.desktop.0.dart
...s/api/test/widgets/scrollbar/raw_scrollbar.desktop.0.dart
+20
-0
scrollbar.dart
packages/flutter/lib/src/widgets/scrollbar.dart
+22
-0
No files found.
examples/api/lib/widgets/scrollbar/raw_scrollbar.desktop.0.dart
0 → 100644
View file @
9da693e3
// 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 → 100644
View file @
9da693e3
// 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
View file @
9da693e3
...
...
@@ -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}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment