Fix Scrollbar.thickness property is ignored when the Scrollbar is hovered (#144012)

fixes [`Scrollbar.thickness` property is ignored when the `Scrollbar` is hovered](https://github.com/flutter/flutter/issues/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" /> |
This commit is contained in:
Taha Tesser 2024-02-26 12:34:27 +02:00 committed by GitHub
parent f58f108792
commit 41b1aea281
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 9 deletions

View file

@ -326,7 +326,8 @@ class _MaterialScrollbarState extends RawScrollbarState<_MaterialScrollbar> {
MaterialStateProperty<double> get _thickness { MaterialStateProperty<double> get _thickness {
return MaterialStateProperty.resolveWith((Set<MaterialState> states) { return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.hovered) && _trackVisibility.resolve(states)) { if (states.contains(MaterialState.hovered) && _trackVisibility.resolve(states)) {
return _scrollbarTheme.thickness?.resolve(states) return widget.thickness
?? _scrollbarTheme.thickness?.resolve(states)
?? _kScrollbarThicknessWithTrack; ?? _kScrollbarThicknessWithTrack;
} }
// The default scrollbar thickness is smaller on mobile. // The default scrollbar thickness is smaller on mobile.

View file

@ -362,6 +362,7 @@ void main() {
testWidgets('Scrollbar widget properties take priority over theme', (WidgetTester tester) async { testWidgets('Scrollbar widget properties take priority over theme', (WidgetTester tester) async {
const double thickness = 4.0; const double thickness = 4.0;
const double edgeMargin = 2.0;
const bool showTrackOnHover = true; const bool showTrackOnHover = true;
const Radius radius = Radius.circular(3.0); const Radius radius = Radius.circular(3.0);
final ScrollController scrollController = ScrollController(); final ScrollController scrollController = ScrollController();
@ -394,14 +395,14 @@ void main() {
find.byType(Scrollbar), find.byType(Scrollbar),
paints..rrect( paints..rrect(
rrect: RRect.fromRectAndRadius( rrect: RRect.fromRectAndRadius(
const Rect.fromLTRB(794.0, 0.0, 798.0, 90.0), const Rect.fromLTRB(800 - thickness - edgeMargin, 0.0, 798.0, 90.0),
const Radius.circular(3.0), const Radius.circular(3.0),
), ),
color: _kDefaultIdleThumbColor, color: _kDefaultIdleThumbColor,
), ),
); );
// Drag scrollbar behavior // Drag scrollbar behavior.
const double scrollAmount = 10.0; const double scrollAmount = 10.0;
final TestGesture dragScrollbarGesture = await tester.startGesture(const Offset(797.0, 45.0)); final TestGesture dragScrollbarGesture = await tester.startGesture(const Offset(797.0, 45.0));
await tester.pumpAndSettle(); await tester.pumpAndSettle();
@ -410,7 +411,7 @@ void main() {
find.byType(Scrollbar), find.byType(Scrollbar),
paints..rrect( paints..rrect(
rrect: RRect.fromRectAndRadius( rrect: RRect.fromRectAndRadius(
const Rect.fromLTRB(794.0, 0.0, 798.0, 90.0), const Rect.fromLTRB(800 - thickness - edgeMargin, 0.0, 798.0, 90.0),
const Radius.circular(3.0), const Radius.circular(3.0),
), ),
// Drag color // Drag color
@ -423,7 +424,7 @@ void main() {
await dragScrollbarGesture.up(); await dragScrollbarGesture.up();
await tester.pumpAndSettle(); await tester.pumpAndSettle();
// Hover scrollbar behavior // Hover scrollbar behavior.
final TestGesture gesture = await tester.createGesture(kind: ui.PointerDeviceKind.mouse); final TestGesture gesture = await tester.createGesture(kind: ui.PointerDeviceKind.mouse);
await gesture.addPointer(); await gesture.addPointer();
await gesture.moveTo(const Offset(794.0, 5.0)); await gesture.moveTo(const Offset(794.0, 5.0));
@ -433,18 +434,18 @@ void main() {
find.byType(Scrollbar), find.byType(Scrollbar),
paints paints
..rect( ..rect(
rect: const Rect.fromLTRB(784.0, 0.0, 800.0, 600.0), rect: const Rect.fromLTRB(792.0, 0.0, 800.0, 600.0),
color: const Color(0x08000000), color: const Color(0x08000000),
) )
..line( ..line(
p1: const Offset(784.0, 0.0), p1: const Offset(792.0, 0.0),
p2: const Offset(784.0, 600.0), p2: const Offset(792.0, 600.0),
strokeWidth: 1.0, strokeWidth: 1.0,
color: const Color(0x1a000000), color: const Color(0x1a000000),
) )
..rrect( ..rrect(
rrect: RRect.fromRectAndRadius( rrect: RRect.fromRectAndRadius(
const Rect.fromLTRB(786.0, 10.0, 798.0, 100.0), const Rect.fromLTRB(800 - thickness - edgeMargin, 10.0, 798.0, 100.0),
const Radius.circular(3.0), const Radius.circular(3.0),
), ),
// Hover color // Hover color