Flutter: ListView not scrollable, not bouncing
Solution 1
To always have the scroll enabled on a ListView
you can wrap the original scroll phisics you want with the AlwaysScrollableScrollPhysics
class. More details here. If you want you can specify a parent
or rely on the default.
Here is your example with the option added:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController _controller = new ScrollController();
@override
Widget build(BuildContext context) {
return new ListView(
physics: const AlwaysScrollableScrollPhysics(), // new
controller: _controller,
children: <Widget>[
new Container(
height: 40.0,
color: Colors.blue,
),
new Container(
height: 40.0,
color: Colors.red,
),
new Container(
height: 40.0,
color: Colors.green,
),
]
);
}
}
Solution 2
Creates scroll physics using AlwaysScrollableScrollPhysics
that always lets the user scroll.
For scroll with bouncing effect Just supply physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics)
to your scroller. That will make it always scrollable, even when there isn't content that overflows
const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())
Here is full example
ListView(
padding: EdgeInsets.all(8.0),
physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
children: _listData.map((i) {
return ListTile(
title: Text("Item $i"),
);
}).toList(),
);
Solution 3
if you are facing this problem on Flutter Web then You should wrap listview with ScrollConfiguration. Add PointerDeviceKind.mouse in ScrollConfiguration behavior argument. You can see example.
ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},),
child: ListView(
controller: _controller,
physics: const AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
children: <Widget>[
for (int index = 0; index < showThumbnailList.length; index++) _thumbnail(showThumbnailList[index], index)
// showThumbnailList.map((x) => _thumbnail(x) ).toList()),
],
),
),
Solution 4
Just add AlwaysScrollableScrollPhysics
ListView(
physics: const AlwaysScrollableScrollPhysics(),
children : [...]
}
Solution 5
I think this solution is better without CustomScrollView. Just use NotificationListener to wrap the ListView.
Widget noti = new NotificationListener(
child:listView,
onNotification: (ScrollNotification note){
print(note.metrics.pixels.toInt());
},
);
I have test it , Bounce is effective
Renato Stauffer
iOS Dev and Swift ninja! Interested in ML Strange stuff: I don't like beer ¯\_(ツ)/¯ I eat the popcorn before the movie starts ¯\(ツ)_/¯
Updated on October 01, 2021Comments
-
Renato Stauffer over 2 years
I have the following example (tested on an iPhone X, iOS 11):
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new ListView( children: <Widget>[ new Container( height: 40.0, color: Colors.blue, ), new Container( height: 40.0, color: Colors.red, ), new Container( height: 40.0, color: Colors.green, ), ] ); } }
In this case the ListView acts like expected. I can scroll beyond the viewport and the ListView bounces back again (typical iOS behavior). But when I add a ScrollController to track the offset, the behavior of the scrolling changes:
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { ScrollController _controller = new ScrollController(); @override Widget build(BuildContext context) { return new ListView( controller: _controller, children: <Widget>[ new Container( height: 40.0, color: Colors.blue, ), new Container( height: 40.0, color: Colors.red, ), new Container( height: 40.0, color: Colors.green, ), ] ); } }
In this case the scrolling is not possible anymore. Why is it that when I add a ScrollController, that the scrolling is not possible anymore? Also adding
physics: new BouncingScrollPhysics(),
to the ListView does not help.Thanks for any help :)