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

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

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 2

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 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(),
);