Flutter PageView Scroll but only for widgets and not entire pages-CodePudding

today I have a question not providing any code. I would like to create a tiktok like experience for scrolling trough my appfeed in flutter. However I dont want to scroll an entire page when I swipe, only to the next widget in the ListView/PageView. Am I 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.

CodePudding user response：

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

CodePudding user response：

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.