Flutter PageView Scroll but only for widgets and not entire pages

Question

Today I have a question, not providing any code. I would like to create a tiktok like experience for scrolling through my appfeed in flutter. However I don't want to scroll an entire page when I swipe, only to the next widget in the ListView/PageView. I am only able to swipe an entire page with pageview and I'm only able to scroll normally on Listview. Is there any solution for my request? I hope I clarified enough what I mean. Instagram offers such an experience on its Search. Is there any possibility how one could realize something like that? Please help.

Answer 1

So what you want to do is to use a Stack widget and then put the pageview, just as you would if you were creating an onboarding screen with flutter, something like this

import 'package:flutter/material.dart';

class OnBoarding extends StatefulWidget {
  @override
  _OnBoardingState createState() => _OnBoardingState();
}

class _OnBoardingState extends State<OnBoarding> {
  PageController? controller;
  int currentIndex = 0;

  @override
  void initState() {
    controller = PageController();
    super.initState();
  }

  @override
  void dispose() {
    controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          PageView(
            scrollDirection: Axis.vertical,
            onPageChanged: onchahged,
            controller: controller,
            children: [
              Container(
                child: Image.network(
                  'https://picsum.photos/200/300',
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                child: Image.network(
                  'https://picsum.photos/200/300',
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                child: Image.network(
                  'https://picsum.photos/200/300',
                  fit: BoxFit.fill,
                ),
              ),
            ],
          ),
          Positioned(
            bottom: 30,
            right: 10,
            child: Column(
              children: [
                Icon(
                  Icons.ac_unit,
                  size: 30,
                  color: Colors.white,
                ),
                SizedBox(
                  height: 10,
                ),
                Icon(
                  Icons.image,
                  size: 30,
                  color: Colors.white,
                ),
                SizedBox(
                  height: 10,
                ),
                Icon(
                  Icons.person,
                  size: 30,
                  color: Colors.white,
                ),
                SizedBox(
                  height: 10,
                ),
                Icon(
                  Icons.person_add,
                  size: 30,
                  color: Colors.white,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  onchahged(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

Here's what it looks like

Answer 2

Use ListView.builder inside the Container with the 500px height and the ListView.builder will have the children posts thus you stay inside the same feed with the ability to swipe thru posts vertically or horizontally.

Check the following link for a tutorial : https://www.youtube.com/watch?v=baA_J5tUtEU

You can change the scrolling by setting scrollDirection: Axis.horizontal or Axis.vertical inside the ListView.buidler

Hope this answers your question.

Answer 3

For the specific Widget you must to wrap it with a GestureDetector and prevent from the current widget being scrollable.

An example:

GestureDetector(
   onHorizontalDragUpdate: (_) {},
   child: WidgetToNotBeingScrollableInTheHorizontal(),
);