flutter / flutter/flutter

Material's ThemeData.scrollbarTheme is not applied when using CupertinoScrollBehavior for scrollable view

Open
#156,290 1 comment 1 reaction 0 assignees View on GitHub
f: scrolling found in release: 3.24 found in release: 3.26 has reproducible steps p: cupertino_ui p: material_ui P3 package team-design triaged-design
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

My application is using MaterialApp. I want to have a customization scrollbar so I declared scrollbarTheme in ThemeData. Below are the minimal steps:

1. Wrap ListView or SingleChildScrollView by ScrollConfiguration with `CupertinoScrollBehavior` behavior
2. Apply `scrollbarTheme` in Material's ThemeData and see all custom theme data does not impact Scrollbar

The issue will not happen when ScrollConfiguration.behavior is `MaterialScrollBehavior()` or without declaring ScrollConfiguration.behavior.

Certain things I'm wondering about:

- Is it considered unsuitable to utilize CupertinoScrollBehavior in Material Theme?
- Should I suggest adding scrollbarTheme to CupertinoThemeData, then use CupertinoTheme instead of Material Theme?

### Expected results

For this specific issue, I would expect we can use `CupertinoScrollBehavior` with `scrollbarTheme`.

If this is intentional behavior, perhaps should we add documentation for ScrollConfiguration.behavior so that users may be aware of it?

### Actual results

Scrollbar is showing its default theme, `scrollbarTheme` is ignored.

### Code sample

Code sample

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
runApp(
const MaterialApp(
home: Home(),
),
);
}

class Home extends StatelessWidget {
const Home({
super.key,
});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Theme(
data: ThemeData(
scrollbarTheme: ScrollbarThemeData(
thumbColor: WidgetStateProperty.all(Colors.red),
thickness: WidgetStateProperty.all(2.0),
trackVisibility: WidgetStateProperty.all(true),
thumbVisibility: WidgetStateProperty.all(true),
),
),
child: ScrollConfiguration(
behavior: const CupertinoScrollBehavior(),
child: ListView(
children: List.generate(
100,
(index) => SizedBox(
height: 100,
child: Center(
child: Text(
index.toString(),
style: const TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
),
),
),
),
),
);
}
}
```

### Screenshots or Video

Screenshots / Video demonstration

| actual result (with CupertinoScrollBehavior) | expected result (without CupertinoScrollBehavior) |
| --------------- | --------------- |
|

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.24.3, on macOS 15.0 24A335 darwin-x64, locale en-VN)
• Flutter version 3.24.3 on channel stable at /Users/huynq/Documents/GitHub/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2663184aa7 (3 weeks ago), 2024-09-11 16:27:48 -0500
• Engine revision 36335019a8
• Dart version 3.5.3
• DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16A242d
• CocoaPods version 1.15.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• android-studio-dir = /Applications/Android Studio.app/
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] Android Studio (version 2024.2)
• Android Studio at /Applications/Android Studio Ladybug.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.3+-79915915-b509.11)

[✓] IntelliJ IDEA Community Edition (version 2024.2.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 81.1.3
• Dart plugin version 242.22855.32

[✓] VS Code (version 1.93.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.98.0

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 15.0 24A335 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.89

[✓] Network resources
• All expected network resources are available.

• No issues found!
```

```console
[!] Flutter (Channel master, 3.26.0-1.0.pre.353, on macOS 15.0 24A335 darwin-x64, locale en-VN)
• Flutter version 3.26.0-1.0.pre.353 on channel master at /Users/huynq/Documents/GitHub/flutter_master
! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 389846308a (3 hours ago), 2024-10-03 21:52:22 -0400
• Engine revision 66d397dff8
• Dart version 3.6.0 (build 3.6.0-317.0.dev)
• DevTools version 2.40.0-dev.2
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16A242d
• CocoaPods version 1.15.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• android-studio-dir = /Applications/Android Studio.app
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] Android Studio (version 2024.2)
• Android Studio at /Applications/Android Studio Ladybug.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.3+-79915915-b509.11)

[✓] IntelliJ IDEA Community Edition (version 2024.2.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 81.1.3
• Dart plugin version 242.22855.32

[✓] VS Code (version 1.93.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.98.0

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 15.0 24A335 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.90

[✓] Network resources
• All expected network resources are available.

! Doctor found issues in 1 category.
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.