- Summary of my problem
Goal
My goal is to present a carousel with long pages. So I use a PageView with scrollviews. The PageView scrolls horizontally. The scrollviews (children) scroll vertically.
Expected Results
Swipe horizontally and scroll vertically smoothly.
Actual Results
If I swipe horizontally to the next page, I can't scroll it vertically right away. I need to wait for 1 second. It seems the user must wait the animation completion to be able to interact with the new current page.
What have I tried so far :
- I tried gesture recognizer to pass the dragging event but I didn't get it working.
- I tried different widgets to replace the PageView but same effect.
- I tried AutomaticKeepAliveClientMixin with wantKeepAlive = true
- I tried PageView.physics = AlwaysScrollableScrollPhysics()
Here's the minimum code you would need to reproduce the problem
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: carousel(),
);
}
Widget carousel() {
return PageView(
children: <Widget>[
page(Colors.pinkAccent),
page(Colors.blueAccent),
page(Colors.orangeAccent)
],
);
}
Widget page(Color color) {
return Container(
decoration: BoxDecoration(
color: color,
),
child: SingleChildScrollView(
child: Column(
children: pageContent()),
));
}
List<Widget> pageContent() {
return <Widget>[
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
Row(children: <Widget>[Text("Hop", textScaleFactor: 5,)]),
];
}
}