development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-07-16 10:29:14 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/flutter/lib/src/material/scrollbar.dart
View file

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

17
packages/flutter/test/material/scrollbar_theme_test.dart
View file

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