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:


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.


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);

  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: [
                  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(
                  (index) {
                    return Center(
                      child: Container(
                        color: Colors.redAccent[200],
                        margin: const EdgeInsets.all(5.0),

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
    • 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
    • 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/
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android
    • Flutter plugin can be installed from:
    • Dart plugin can be installed from:
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.64.2)
    • VS Code at /Applications/Visual Studio
    • Flutter extension can be installed from:

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.