Skip to content

Commit 41b1aea

Browse files
authored
Fix Scrollbar.thickness property is ignored when the Scrollbar is hovered (#144012)
fixes [`Scrollbar.thickness` property is ignored when the `Scrollbar` is hovered](flutter/flutter#143881) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { final ScrollController scrollController = ScrollController(); return MaterialApp( debugShowCheckedModeBanner: false, home: Material( child: ScrollConfiguration( behavior: const NoScrollbarBehavior(), child: ScrollbarTheme( data: ScrollbarThemeData( thickness: MaterialStateProperty.all(25.0), showTrackOnHover: true, ), child: Scrollbar( thickness: 50.0, thumbVisibility: true, radius: const Radius.circular(3.0), controller: scrollController, child: SingleChildScrollView( controller: scrollController, child: const SizedBox(width: 4000.0, height: 4000.0), ), ), ), ), ), ); } } class NoScrollbarBehavior extends ScrollBehavior { const NoScrollbarBehavior(); @OverRide Widget buildScrollbar( BuildContext context, Widget child, ScrollableDetails details) => child; } ``` </details> ### Preview | Before | After | | --------------- | --------------- | | <img src="https://github.com/flutter/flutter/assets/48603081/3537d60d-a5b2-488d-aa99-4c36c3721657" /> | <img src="https://github.com/flutter/flutter/assets/48603081/cfd02095-a327-4b16-8ece-0d1c9e6813ce" /> |
1 parent f58f108 commit 41b1aea

File tree

2 files changed

+11
-9
lines changed

2 files changed

+11
-9
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,8 @@ class _MaterialScrollbarState extends RawScrollbarState<_MaterialScrollbar> {
326326
MaterialStateProperty<double> get _thickness {
327327
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
328328
if (states.contains(MaterialState.hovered) && _trackVisibility.resolve(states)) {
329-
return _scrollbarTheme.thickness?.resolve(states)
329+
return widget.thickness
330+
?? _scrollbarTheme.thickness?.resolve(states)
330331
?? _kScrollbarThicknessWithTrack;
331332
}
332333
// The default scrollbar thickness is smaller on mobile.

packages/flutter/test/material/scrollbar_theme_test.dart

+9-8
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,7 @@ void main() {
362362

363363
testWidgets('Scrollbar widget properties take priority over theme', (WidgetTester tester) async {
364364
const double thickness = 4.0;
365+
const double edgeMargin = 2.0;
365366
const bool showTrackOnHover = true;
366367
const Radius radius = Radius.circular(3.0);
367368
final ScrollController scrollController = ScrollController();
@@ -394,14 +395,14 @@ void main() {
394395
find.byType(Scrollbar),
395396
paints..rrect(
396397
rrect: RRect.fromRectAndRadius(
397-
const Rect.fromLTRB(794.0, 0.0, 798.0, 90.0),
398+
const Rect.fromLTRB(800 - thickness - edgeMargin, 0.0, 798.0, 90.0),
398399
const Radius.circular(3.0),
399400
),
400401
color: _kDefaultIdleThumbColor,
401402
),
402403
);
403404

404-
// Drag scrollbar behavior
405+
// Drag scrollbar behavior.
405406
const double scrollAmount = 10.0;
406407
final TestGesture dragScrollbarGesture = await tester.startGesture(const Offset(797.0, 45.0));
407408
await tester.pumpAndSettle();
@@ -410,7 +411,7 @@ void main() {
410411
find.byType(Scrollbar),
411412
paints..rrect(
412413
rrect: RRect.fromRectAndRadius(
413-
const Rect.fromLTRB(794.0, 0.0, 798.0, 90.0),
414+
const Rect.fromLTRB(800 - thickness - edgeMargin, 0.0, 798.0, 90.0),
414415
const Radius.circular(3.0),
415416
),
416417
// Drag color
@@ -423,7 +424,7 @@ void main() {
423424
await dragScrollbarGesture.up();
424425
await tester.pumpAndSettle();
425426

426-
// Hover scrollbar behavior
427+
// Hover scrollbar behavior.
427428
final TestGesture gesture = await tester.createGesture(kind: ui.PointerDeviceKind.mouse);
428429
await gesture.addPointer();
429430
await gesture.moveTo(const Offset(794.0, 5.0));
@@ -433,18 +434,18 @@ void main() {
433434
find.byType(Scrollbar),
434435
paints
435436
..rect(
436-
rect: const Rect.fromLTRB(784.0, 0.0, 800.0, 600.0),
437+
rect: const Rect.fromLTRB(792.0, 0.0, 800.0, 600.0),
437438
color: const Color(0x08000000),
438439
)
439440
..line(
440-
p1: const Offset(784.0, 0.0),
441-
p2: const Offset(784.0, 600.0),
441+
p1: const Offset(792.0, 0.0),
442+
p2: const Offset(792.0, 600.0),
442443
strokeWidth: 1.0,
443444
color: const Color(0x1a000000),
444445
)
445446
..rrect(
446447
rrect: RRect.fromRectAndRadius(
447-
const Rect.fromLTRB(786.0, 10.0, 798.0, 100.0),
448+
const Rect.fromLTRB(800 - thickness - edgeMargin, 10.0, 798.0, 100.0),
448449
const Radius.circular(3.0),
449450
),
450451
// Hover color

0 commit comments

Comments
 (0)