Flutter: ListView not scrollable, not bouncing

Question

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 :)

Answer 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,           ),         ]     );   } }