Scrollbar position incorrect in landscape on some devices #99073
Assignees
Labels
f: scrolling
Viewports, list views, slivers, etc.
found in release: 2.10
Found to occur in 2.10
found in release: 2.11
Found to occur in 2.11
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
platform-android
Android applications specifically
platform-ios
iOS applications specifically
r: invalid
Issue is closed as not valid
Comments
danagbemava-nc
changed the title
|
Reproducible on code sampleimport '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, // use this on stable
// thumbVisibility: true, // use this on master
child: GridView.count(
crossAxisCount: 3,
children: List.generate(
10,
(index) {
return Center(
child: Container(
color: Colors.redAccent[200],
margin: const EdgeInsets.all(5.0),
),
);
},
),
),
),
),
),
),
);
}
}
screenshots
flutter doctor -v |
danagbemava-nc
added
f: scrolling
|
@MarkBurvs Hi, thanks for filing this. child: Builder(
builder: (context) => MediaQuery.removePadding(
removeRight: true,
context: context,
child: Scrollbar( |
|
Thanks - that does fix it. |
|
Glad there is a workaround, but I think we can make this work automatically. There was a similar bug in FAB a while back. Thanks for reporting! |
|
I have also noticed that using a SafeArea widget resolves this. |
|
I think using a SafeArea may be the right way to go here. I've checked this out this morning, and found that while I can safely assume the right positioning in some cases here, I can't always make that assumption based on the code above. While the code above has added padding manually to have the scrolling content avoid the notches, the way it is done does not impart that extra manual padding to the scrollbar. There isn't a way for the scrollbar to know about the additional padding in this case, so adding a SafeArea ensures all of the padding is reconciled. import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
final ScrollController controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.fromLTRB(100, 100, 100, 100),
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: controller,
thumbVisibility: true,
child: GridView.count(
controller: controller,
// scrollDirection: Axis.horizontal,
crossAxisCount: 3,
children: List.generate(
50,
(index) {
return Center(
child: Container(
color: Colors.redAccent[200],
margin: const EdgeInsets.all(5.0),
),
);
},
),
),
),
),
),
),
),
);
}
}
|
|
I am going to close this since it does not appear to be a bug after all, but if you feel it is, please add more info and we can take another look! Thanks! |
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
Logs
The text was updated successfully, but these errors were encountered: