Left-side Scrollbar of a big thickness has unexpected behavior (draws on top of content, shows additional scrollbar on the right). #102775
Description
Steps to Reproduce
- Run the following code sample on DartPad and/or a Desktop build (Windows).
Expected results:
- Track thickness would change to match the bar thickness.
- I expected setting
thicknessto PUSH my list (to the right) to make space for its thickness so it wouldn't overlap with content. I can see why it might be expected to overlap for some developers; however, it does not work for those having the bar visibility always on, because it will obscure content. I can see this being an "overlap" parameter, but the workaround is to manually push the content yourself.
- I expected setting
- Be able to make my scrollbar FLUSH with the edges of the parent widget or have controllable padding.
- It looks like it is misaligned, because I'm thinking there is inherent padding. I manually padded the contents to make a fake track; however, without knowing the inherent padding, I cannot properly compensate and the contents look misaligned like this. Of course, I could guess and test, but I'm just mentioning the weakness here.
- It looks like it is misaligned, because I'm thinking there is inherent padding. I manually padded the contents to make a fake track; however, without knowing the inherent padding, I cannot properly compensate and the contents look misaligned like this. Of course, I could guess and test, but I'm just mentioning the weakness here.
- ONE scrollbar on the LEFT.
- This might be a problem caused by the newer default implementation of the ScrollbarController. It seems like we don't need to use Scrollbar() at all anymore (https://api.flutter.dev/flutter/material/Scrollbar-class.html) and just pass in a controller; however, I see no means of making a left-side Scrollbar with this method.
Actual results:
- Two scrollbars, even when orientation is set to
ScrollbarOrientation.left(visible when actively scrolling).- Even when set to
ScrollbarOrientation.right, one scrollbar is drawn overlapping the other.
- Even when set to
- Scrollbar overlapping content.
- Scrollbar misaligned with forced hard-coded track thickness.
Code Sample
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
final List<String> entries = <String>[
'A',
'B',
'C',
...List.generate(100, (index) => index.toString())
];
final List<int> colorCodes = <int>[600, 500, 100];
@override
Widget build(BuildContext context) {
return Scrollbar(
isAlwaysShown: true,
thickness: 30,
radius: Radius.zero,
scrollbarOrientation: ScrollbarOrientation.left,
child: ListView.builder( padding: EdgeInsets.all(8),
itemCount: entries!.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[colorCodes[index % colorCodes.length]],
child: Center(
child: Text('Entry ${entries![index]}')),
);
}));
}
}