I am making a video player with parallax effect on scroll. The design is video on the top and title and description and other details in the bottom. As we scroll up to reveal more of the information the speed of video scroll will be slower than that of the information.
I achieved the desired outcome using this code
import 'package:black_coffer/theme/colors.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import '../../models/post.dart';
import 'package:chewie/chewie.dart';
class PostScreen extends StatefulWidget {
const PostScreen({super.key, required this.post});
final Post post;
@override
State<PostScreen> createState() => _PostScreenState();
}
class _PostScreenState extends State<PostScreen> {
late VideoPlayerController _controller;
late ChewieController _chewieController;
double videoOffset = 0;
@override
void initState() {
super.initState();
_controller =
VideoPlayerController.networkUrl(Uri.parse(widget.post.videoUrl))
..initialize().then((_) {
setState(() {
_chewieController = ChewieController(
videoPlayerController: _controller,
showOptions: false,
allowFullScreen: false,
aspectRatio: _controller.value.aspectRatio);
});
});
}
@override
void dispose() {
super.dispose();
_controller.dispose();
_chewieController.dispose();
}
@override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
return Scaffold(
body: NotificationListener(
onNotification: (notif) {
if (notif is ScrollUpdateNotification) {
if (notif.scrollDelta == null) return true;
setState(() {
videoOffset -= notif.scrollDelta! / 1.9;
});
}
return true;
},
child: Stack(children: [
Positioned(
top: videoOffset,
left: 0,
right: 0,
child: Hero(
tag: widget.post.videoUrl,
child: SizedBox(
height: height * 0.7,
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: _controller.value.isInitialized
? Chewie(
controller: _chewieController,
)
: Container(
alignment: Alignment.center,
child: const CircularProgressIndicator.adaptive(),
),
),
)),
),
SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Column(
children: [
SizedBox(height: height * 0.7),
Container(
height: height,
color: getColors(context).background,
child: Column(
children: [
Text(widget.post.videoTitle),
Text(widget.post.videoDescription),
Text(widget.post.videoCategory),
Text(widget.post.videoLocation),
],
),
),
],
),
)
]),
),
);
}
}
The only problem now I am facing is the video player is not registering the taps. This is because in the stack the Scrollview is on the top. I tried wrapping scrollview by IgnorePointer but then the scroll will not work.
Is there a workaround ? please help.