CODEWITHSUNDEEP
flutterdart
Richardd
Richardd

Reputation: 1012

Flutter cannot drag pageview vertically

I am learning Flutter, so if my question is a dumb question, please don't throw me a stone :p :D

First, some of the following images might be familiar to you, I am only using this app from github, to test the teory. Source: https://www.youtube.com/watch?v=sgfMdhV4HQI&t=370s

My Question:

I am using pageview to navigate between two pages one with some dragable containers, and another page with some more dragable containers that represent a different topic.

If I define the scrollDirection: Axis.horizontal, it work quit fine. But I want to drag it vertically.

enter image description here

If I define scrollDirection: Axis.vertical, I realised that, I only have a small portion of the screen where I am able to drag the page.

enter image description here

To my understanding, it might be related with the containers.

Note: I also tested the SliverToBoxAdapter class without good results.

my git repro https://github.com/engineerRFR/flutter-mytest

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Netflix UI Redesign',
      debugShowCheckedModeBanner: false,
      home: PageView(
          children: <Widget>[
            Container(
              color: Colors.pink,
              child: HomeScreen(),
            ),
            Container(
              color: Colors.cyan,
              child: photoGallery(),
            ),
            Container(
              color: Colors.deepPurple,
            ),
          ],
        scrollDirection: Axis.horizontal,
        onPageChanged: (num) {
          print("Page number : " + num.toString());
        },
      ),
    );
  }
}


 photoGallery (){
  return PageView(
    scrollDirection: Axis.vertical,
    children: <Widget>[
      Container(
        color: Colors.amber,

      )

,

Upvotes: 0

Views: 1114

Answers (1)

Dusk
Dusk

Reputation: 1887

Referring to our comments and as I was suspecting, the root of this problem is not your PageView.

If you check your home_screen.dart, the body of your Scaffold (line 121) is a ListView. If you change it to Column everything starts to work as you want!

And that's because ListView consumes all of the vertical scrolls and the event won't reach the outer PageView.

Upvotes: 2

Related Questions