Make a ListView scroll horizontal in a PageView

Question

I'm trying to create a ListView of images that stays in a PageView so I can swipe left or right to move to other images.

But I currently end up with an error that it only displays as a column and swipe vertically not horizontally as I wanted.

Anyone who gets solutions or ideas, please help me.

Here is my code:

final PageController _controller = PageController(
initialPage: initialImageIndex, keepPage: true, viewportFraction: 1);
return SafeArea(
child: Scaffold(

  body: PageView(
      controller: _controller,
      scrollDirection: Axis.horizontal,
      onPageChanged: (index) {
        print("changed to $index");
      },
      children: [
        Row(
          children: [
            Container(
              width: size.width,
              child: ListView.builder(
                controller: ScrollController(
                ),
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                // physics: NeverScrollableScrollPhysics(),
                itemCount: imagesInCategory.length,
                itemBuilder: (context, index) {
                  return BuildImageDetail(
                      size: size, imageData: imagesInCategory[index]);
                },
              ),
            ),
          ],
        ),
    ])),

Thank you @ChiragBargoojar , I just edited it , the error is it doesn't scroll a whole screen like i think — ninoorta, May 28 '21 at 08:00
You want to show horizontal `ListView` inside `Pageview` right? — Chirag Bargoojar, May 28 '21 at 08:14
Exactly, but whenever i scroll it , it doesn't scroll like a PageView, instead of scrolling a whole width of device, it scrolls a little bit — ninoorta, May 28 '21 at 08:34
Ok The problem with this is if you try to make your `PageView()` scrollable in same direction as your `LisView()` it clashes with your `Axis.horizontal` because both are horizontal scrollable so you need to do some custom scrollable. Here is the full discussion. https://github.com/flutter/flutter/issues/50946 — Chirag Bargoojar, May 28 '21 at 09:16

score 0 · Answer 1 · answered Jun 07 '21 at 09:12

0

I just got it with a function to render the widgets that Listview currently does now. Then in children of PageView , i just call this function .

Hope this helps somebody.

answered Jun 07 '21 at 09:12

ninoorta

662
1
5
13

Make a ListView scroll horizontal in a PageView

1 Answers1