ประยุกต์แสดงคลิป Video คล้าย TikTok ใน Flutter ตอนที่ 2

visibility_detector: ^0.4.0+2

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:visibility_detector/visibility_detector.dart';

class Loopster extends StatefulWidget {
  static const routeName = '/loopster';

  const Loopster({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _LoopsterState();
  }
}

class _LoopsterState extends State<Loopster> {

  // ลิสรายการคลิปสำหรับทดสอบ สามารถประยุก๖ืดึงจาก api ได้
  final List<String> videoUrls = [
    'https://cdn.pixabay.com/video/2024/07/27/223461_tiny.mp4',
    'https://cdn.pixabay.com/video/2023/10/15/185096-874643413_tiny.mp4',
    'https://cdn.pixabay.com/video/2022/11/22/140111-774507949_tiny.mp4',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      extendBodyBehindAppBar: true, 
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.white,
        title: const Text('Loopster'),
      ),   
      body: PageView.builder(
        scrollDirection: Axis.vertical, // เลื่อนแนวตั้ง
        itemCount: videoUrls.length,
        itemBuilder: (context, index) {
          // วนลูปสร้างหน้ารายการคลิปสำหรับแสดง โดยส่ง url เข้าไปใช้งาน
          return VideoPlayerItem(videoUrl: videoUrls[index]);
        },
      ),
    );
  }
}  

// สร้าง class สำหรับแสดงรายการวิดีโอ จาก url ที่ส่งมา โดยใช้งาน video_player
class VideoPlayerItem extends StatefulWidget {
  final String videoUrl;
  const VideoPlayerItem({Key? key, required this.videoUrl}) : super(key: key);

  @override
  _VideoPlayerItemState createState() => _VideoPlayerItemState();
}

class _VideoPlayerItemState extends State<VideoPlayerItem> {
  // กำหนด controller สำหรับควบคุม video_player
  late VideoPlayerController _controller;
  // สำหรับกำหนดว่าส่วนควบคุมวิดีโอนั้น ถูกลบออกไปแล้วหรือไม่
  bool _isControllerDisposed = false;

  @override
  void initState() {
    super.initState();
    _initializeVideoPlayer();
  }

  void _initializeVideoPlayer() {
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl))
      ..initialize().then((_) {
        if (mounted) {
          setState(() {
            _controller.play();
            _controller.setLooping(true);
          });
        }
      });
  }

  @override
  void dispose() {
    _isControllerDisposed = true;
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: Key(widget.videoUrl),
      onVisibilityChanged: (VisibilityInfo info) {
        if (_isControllerDisposed) return;
        if (info.visibleFraction == 0) {
          _controller.pause(); // หยุดวิดีโอเมื่อถูกซ่อน
        } else {
          _controller.play(); // เล่นวิดีโอเมื่อแสดง
        }
      },
      child: Stack(
        alignment: Alignment.center,
        children: [
          _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Center(child: CircularProgressIndicator()),
          Positioned(
            bottom: 50,
            left: 20,
            child: Text(
              'Video Description Here',
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

          _controller.value.isInitialized
/*               ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                ) */
              ? InteractiveViewer(
                  panEnabled: true, // Enable panning
                  boundaryMargin: EdgeInsets.all(0),
                  minScale: 1.0, // Minimum zoom scale
                  maxScale: 4.0, // Maximum zoom scale
                  child: AspectRatio(
                    aspectRatio: _controller!.value.aspectRatio,
                    child: VideoPlayer(_controller!),
                  ),
                )                  
              : Center(child: CircularProgressIndicator()),

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:visibility_detector/visibility_detector.dart';

class Loopster extends StatefulWidget {
  static const routeName = '/loopster';

  const Loopster({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _LoopsterState();
  }
}

class _LoopsterState extends State<Loopster> {

  // ลิสรายการคลิปสำหรับทดสอบ สามารถประยุก๖ืดึงจาก api ได้
  final List<String> videoUrls = [
    'https://cdn.pixabay.com/video/2024/07/27/223461_tiny.mp4',
    'https://cdn.pixabay.com/video/2023/10/15/185096-874643413_tiny.mp4',
    'https://cdn.pixabay.com/video/2022/11/22/140111-774507949_tiny.mp4',
    'https://cdn.pixabay.com/video/2024/08/30/228847_tiny.mp4',
    'https://cdn.pixabay.com/video/2023/07/28/173530-849610807_tiny.mp4',
    'https://cdn.pixabay.com/video/2024/03/31/206294_tiny.mp4',
    'https://cdn.pixabay.com/video/2023/10/27/186714-878826932_tiny.mp4',
    'https://cdn.pixabay.com/video/2024/07/28/223551_tiny.mp4',
    'https://cdn.pixabay.com/video/2024/08/18/227174_tiny.mp4',     
  ];

  // จัดการตัวควบคุม pageview
  late PageController _pageController;
  // ใช้งาน controller ของ video แบบ array หรือ list
  Map<int, VideoPlayerController> _videoControllers = {};  


  @override
  void initState() {
    super.initState();
    _pageController = PageController();
    _initializeVideo(0); // Preload the first video
    _initializeVideo(1); // Preload the second video
  }

  @override
  void dispose() {
    _pageController.dispose();
    // Dispose all VideoPlayerControllers
    for (var controller in _videoControllers.values) {
      controller.dispose();
    }
    super.dispose();
  }  

  // ฟังก์ชั่นควบคุม controler ของ video play 
  void _initializeVideo(int index) {
    // ถ้ามีแล้วไม่ต้องทำอะไร
    if (_videoControllers.containsKey(index)) return;

    // สร้างและ กำหนดค่าเริ่มต้น ของ video player สำหรับแต่ละ url ของ video
    final controller = VideoPlayerController.networkUrl(Uri.parse(videoUrls[index]));

    // เริ่มต้นการควบคุมการแสดงวิดีโอในห้นาที่กำลังทำงาน
    controller.initialize().then((_) {
      if (mounted) {
        setState(() {});
        if (index == _pageController.page?.toInt()) {
          controller.play();
        }
        controller.setLooping(true);
      }
    });
    // แยกแต่ละ controller สำหรับแต่ละคลิป
    _videoControllers[index] = controller;
  }

  void _preloadVideosAround(int index) {
    // Preload previous and next videos if within bounds
    if (index > 0) {
      _initializeVideo(index - 1);
    }
    if (index < videoUrls.length - 1) {
      _initializeVideo(index + 1);
    }
  }  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      extendBodyBehindAppBar: true, 
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.white,
        title: const Text('Loopster'),
      ),   
      body: PageView.builder(
        controller: _pageController, //ควบคุมด้วย controller
        scrollDirection: Axis.vertical, // เลื่อนแนวตั้ง
        itemCount: videoUrls.length,
        onPageChanged: (index) { // เพิ่มส่วนจัดการสำหรับ preload เข้ามา
          // preload video เมื่อมีการเปลี่ยนหน้า
          _preloadVideosAround(index);
        },        
        itemBuilder: (context, index) {
          // วนลูปสร้างหน้ารายการคลิปสำหรับแสดง โดยส่ง url เข้าไปใช้งาน
          // รูปแบบนี้เพิ่มส่วนของ controller แต่ละ video player เข้าไปด้วย
          return VideoPlayerItem(
            videoController: _videoControllers[index]!,
            videoUrl: videoUrls[index],
          );          
        },
      ),
    );
  }
}  

// สร้าง class สำหรับแสดงรายการวิดีโอ จาก url ที่ส่งมา โดยใช้งาน video_player
// รองรับ videoController เพิ่มเข้ามา
class VideoPlayerItem extends StatefulWidget {
  final VideoPlayerController videoController;
  final String videoUrl;
  
  const VideoPlayerItem({
    Key? key,
    required this.videoController,
    required this.videoUrl,
  }) : super(key: key);

  @override
  _VideoPlayerItemState createState() => _VideoPlayerItemState();
}

class _VideoPlayerItemState extends State<VideoPlayerItem> {
  // สำหรับกำหนดว่าส่วนควบคุมวิดีโอนั้น ถูกลบออกไปแล้วหรือไม่
  bool _isControllerDisposed = false;

  @override
  void dispose() {
    _isControllerDisposed = true;
    widget.videoController.pause();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: Key(widget.videoUrl),
      onVisibilityChanged: (VisibilityInfo info) {
        if (_isControllerDisposed) return;
        if (info.visibleFraction == 0) {
          widget.videoController.pause(); // หยุดวิดีโอเมื่อถูกซ่อน
        } else {
          widget.videoController.play(); // เล่นวิดีโอเมื่อแสดง
        }
      },
      child: Stack(
        alignment: Alignment.center,
        children: [
          widget.videoController.value.isInitialized
              ? InteractiveViewer(
                  panEnabled: true, // Enable panning
                  boundaryMargin: EdgeInsets.all(0),
                  minScale: 1.0, // Minimum zoom scale
                  maxScale: 4.0, // Maximum zoom scale
                  child: AspectRatio(
                  aspectRatio: widget.videoController.value.aspectRatio,
                  child: VideoPlayer(widget.videoController),
                  ),
                )                     
              : const Center(child: CircularProgressIndicator()),
          Positioned(
            bottom: 50,
            left: 20,
            child: const Text(
              'Video Description Here',
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

  child: AspectRatio(
	  aspectRatio: widget.videoController.value.aspectRatio,
	  child: VideoPlayer(widget.videoController),
  ),

  child: AspectRatio(
  aspectRatio: widget.videoController.value.aspectRatio,
  child: GestureDetector(
	  onTap: () {
		setState(() {
		  widget.videoController.value.isPlaying
		  ? widget.videoController.pause()
		  : widget.videoController.play();
		});
	  },
	child: VideoPlayer(widget.videoController)),
  ),