-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Run the example below and keep scrolling using the scrollbar from beginning to end multiple times. Eventually you should stop seeing the red lines at the beginning and end.
This is a regression after #111250 . I think this is caused by multiple factors though. Viewport dimensions in flutter tend to change depending on current scroll position and sliver layout and often is just an approximation. Scroll offset during scrollbar dragging is adjusted relatively after each movement which compounds the error. Eventually this causes problem at the scroll boundaries.
I think possible solution would be to force position.minScrollExtent and position.maxScrollExtent at scrollbar boundaries. With the complication of position.maxScrollExtent being an approximation that might change once actually scrolled to end.
Perhaps the end position could be determined through several layout iterations (if the viewport dimensions keep changing).
cc @TahaTesser
flutter pub add flutter_lorem
import 'package:flutter/material.dart';
import 'package:flutter_lorem/flutter_lorem.dart';
void main() {
runApp(const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
));
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<String> items;
@override
void initState() {
super.initState();
items = List<String>.generate(
100, (i) => lorem(paragraphs: 1, words: Object.hash(i, null) % 100));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 2,
color: Colors.red,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Padding(
padding: const EdgeInsets.all(20),
child: Text(items[index]),
),
childCount: items.length,
),
),
SliverToBoxAdapter(
child: Container(
height: 2,
color: Colors.red,
),
),
],
),
);
}
}