I am working on a Flutter website which shows just a full screen video. Now, this video won't play automatically or with the play/pause button; rather, tt will seek videos based on the user's scroll.

What I tried was to take the video player controller and a scroll controller and, using the video controller's seek method, pass the scrollController value in its listener.

The issue is where should I use this scroll controller?

ListView and SingleChildScrollView need content to get scroll values but I have nothing but a full screen video. I am still exploring lots of options, like verticalDrag from GestureDetector, etc. Any guidance or solution will be really helpful.

CodePudding user response：

You can use Listener widget for this, and listen for PointerScrollEvent:

  Listener(
    onPointerSignal: (event) {
      if (event is PointerScrollEvent) {
        print('user scrolled: ${event.scrollDelta}');
      }
    },
    child: FlutterLogo(size: 2000),
  )

Demo:

Full source code:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Demo')),
      body: Center(
        child: Listener(
          onPointerSignal: (event) {
            if (event is PointerScrollEvent) {
              print('user scrolled: ${event.scrollDelta}');
              setState(() {
                _value  = event.scrollDelta.dy / 1000;
                _value = _value.clamp(0.0, 1.0);
              });
            }
          },
          child: LinearProgressIndicator(
            minHeight: 400,
            value: _value,
          ),
        ),
      ),
    );
  }
}