I'm working on small app for Flutter for web. There is ScrollBar with GridView as a child.
Each gridview's child has scrollable area.
When I scrolling GridView everything is OK - the scrollbar works as intended.
But If I scroll image inside any grid view item it cause ScrollBar scrolling also. I don't need it, it looks weird.
I think it's not good and maybe even a bug.
How to avoid moving scrollbar when I scroll something inside items?
I attached small video. Look at scrollbar behaviour https://imgur.com/a/2CLjN7Z
the code:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: Home()));
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(body: Demo());
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
ScrollController _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
}
@override
Widget build(BuildContext context) {
return Scrollbar(
controller: _scrollController,
child: GridView.count(
controller: _scrollController,
crossAxisCount: 5,
crossAxisSpacing: 64,
mainAxisSpacing: 64,
childAspectRatio: 0.5,
padding: const EdgeInsets.only(left: 48, right: 48, top: 24, bottom: 48),
children: List.generate(42, (i) => GridItem(i)),
),
);
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
}
class GridItem extends StatelessWidget {
GridItem(int i) : super(key: Key('$i'));
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: SizedBox(
height: 700,
child: Image.network('https://picsum.photos/id/81/200/300.jpg', fit: BoxFit.fill),
),
);
}
}
update:
I created an issue https://github.com/flutter/flutter/issues/73697
looks like this bug will be fixed in next versions, let's see
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…