Scrollbar position incorrect in landscape on some devices

Steps to Reproduce

Create a GridView or a ListView with a Scrollbar or CupertinoScrollbar widget.
View in landscape orientation on an iPhoneX or any later iPhone with a notch.
You’ll see that the scrollbar floats over the content in the gridview rather than being aligned against the edge of it.
On older iPhones without the notch, the issue is not present.

Expected results:
Scrollbar should align with the left hand edge of the content as it correctly does when in portrait on any iPhone, or on landscape on iPhone 8.

iPhone8 landscape:

iphone8_landscape

iPhoneX portrait:
iphonex_portrait

Actual results:
Scrollbar floats over the content.
It’s almost as if flutter is applying an offset to account for the safe area of the notch, even though the container with the gridview inside it is no-where near the notch.

iphonex_landscape

If the scrollbar is oriented to the left, the same indentation happens on the left hand side.
Is the same whether the device is rotated to the left or the right.

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.fromLTRB(100, 10, 100, 10),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey[800]!,
                  blurRadius: 10,
                  offset: const Offset(5, 5), // Shadow position
                ),
              ],
            ),
            child: Scrollbar(
              thickness: 7,
              scrollbarOrientation: ScrollbarOrientation.right,
              // controller: _controllerOne,
              isAlwaysShown: true,
              child: GridView.count(
                crossAxisCount: 3,
                children: List.generate(
                  10,
                  (index) {
                    return Center(
                      child: Container(
                        color: Colors.redAccent[200],
                        margin: const EdgeInsets.all(5.0),
                      ),
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Logs
Logs were too long to paste here

[✓] Flutter (Channel stable, 2.10.1, on macOS 12.2.1 21D62 darwin-arm, locale en-GB)
    • Flutter version 2.10.1 at /Users/mark.burvill/Developer/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db747aa133 (2 weeks ago), 2022-02-09 13:57:35 -0600
    • Engine revision ab46186b24
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/mark.burvill/Developer/Android/sdk
    • Platform android-32, build-tools 32.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.64.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

1 thought on “Scrollbar position incorrect in landscape on some devices

  1. @MarkBurvs Hi, thanks for filing this.
    This is working as intended to adapt for the notches screen.
    Here is a workarround,

                child: Builder(
                  builder: (context) => MediaQuery.removePadding(
                    removeRight: true,
                    context: context,
                    child: Scrollbar(

Comments are closed.