Theme's highlightColor fails to change Scrollbar color

Steps to Reproduce

void main() => runApp(MaterialApp(home: TestPage()));

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(highlightColor: Colors.green), // doesn't change Scrollbar color
      child: Scaffold(
        body: Scrollbar(
          child: ListView.builder(
            itemBuilder: (_, i) => ListTile(title: Text("Item ${i}")),
            itemCount: 100,
          ),
        ),
      ),
    );
  }
}

Run this minimal code, and you can see the color of the Scrollbar isn't changed. It used to work before in previous version of flutter (don't remember the number).

Flutter doctor:

[✓] Flutter (Channel dev, v1.8.0, on Mac OS X 10.14 18A389, locale en-GB)
    • Flutter version 1.8.0 at /flutter
    • Framework revision 2fefa8c731 (3 weeks ago), 2019-07-01 11:33:22 -0700
    • Engine revision 45b66b722e
    • Dart version 2.4.0

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/chocolate/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • CocoaPods version 1.7.2

[✓] iOS tools - develop for iOS devices
    • ios-deploy 1.9.4

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 37.1.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build
      1.8.0_152-release-1343-b01)

@dark-chocolate

@dark-chocolate Are you talking about iOS specifically? It looks like the scrollbar color for iOS is hardcoded, but on Android it should change with the theme's highlightColor.

It seems like in native iOS development the scrollbar's color can be changed between light and dark, but not fully customized. https://stackoverflow.com/questions/12005187/ios-changing-uiscrollview-scrollbar-color-to-different-colors

@justinmc

As @justinmc mentions this appears to be working by design. Scrollbars adapt their appearance to try and mimic the native controls on the platform they are running on. If you deploy this sample app to an Android device it will render the scrollbar as green. However, if you deploy it to an iOS device, it will not change the color as iOS scrollbars are not customizable and Flutter is following that design.

If you deploy this app to an Android device are you still not seeing a green scrollbar?

@justinmc

@justinmc, yes I was talking about for iOS, and @darrenaustin sir you are right it is working in Android, but as far as I remember, it used to change color in iOS too in previous updates, I tested it on Jan-Feb 2019 not sure which flutter version I was using. Have you guys changed anything afterwards?

It looks like it's been hard coded since CupertinoScrollbar was created in #13290. Maybe you were using a Material Scrollbar on an iOS device before?

@justinmc

@justinmc I was/am using a normal Scrollbar from the package flutter/material.dart. I never used CupertinoScrollbar. So, can I change color of the Scrollbar in iOS with any means except changing the hardcoded value from the source code?

Scrollbar will automatically use CupertinoScrollbar under the hood on iOS now. So no you can't change the color of the scrollbar on iOS without modifying the source code.

This seems like something we shouldn't officially support unless iOS supports it, so I'm going to close this issue. If you need help figuring out how to hack it to change the color definitely let me know though.

Not ideal, but this is a workaround which we can use for now:

    return Theme(
      data: ThemeData(
        highlightColor: Colors.white,       // Your color
        platform: TargetPlatform.android,   // Specify platform as Android so Scrollbar uses the highlightColor
      ),
      child: Scrollbar(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (_, index) => Text(index.toString()),
        ),
      ),
    );

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Theme's highlightColor fails to change Scrollbar color #36603

Steps to Reproduce

Flutter doctor:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Theme's highlightColor fails to change Scrollbar color #36603

Description

Steps to Reproduce

Flutter doctor:

Activity

justinmc commented on Jul 22, 2019

justinmc commented on Jul 22, 2019

darrenaustin commented on Jul 24, 2019

dark-chocolate commented on Jul 25, 2019

justinmc commented on Jul 25, 2019

dark-chocolate commented on Jul 26, 2019

justinmc commented on Jul 26, 2019

PawlikMichal25 commented on Oct 21, 2020

github-actions commented on Aug 10, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions