[iOS] Clip not working for video on iOS in Flutter 3.24.1

[wdcs-vivekmakvana]

Steps to reproduce

I am encountering a video flickering issue specifically on iOS devices when using Flutter version 3.24.1. The videos play without any problems on Android devices. However, on iOS, the video playback exhibits noticeable flickering. This issue does not occur when using Flutter versions 3.22.3 or earlier.

1. Create a Flutter project using Flutter 3.24.1.
2. Implement video playback functionality (using the better_player_plus plugin).
3. Run the app on an iOS device.

Expected results

Videos should play smoothly without any flickering on iOS devices, as they do on Android.

Actual results

Videos exhibit flickering during playback on iOS devices.

Code sample

Code sample

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Video List',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> _videos = [
    'https://cdn.pixabay.com/video/2022/12/18/143419-782363231_large.mp4',
    'https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4',
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
    'https://videos.pexels.com/video-files/4434150/4434150-hd_1080_1920_30fps.mp4',
  ];
  final _random = Random();
  List<VideoListData> dataList = [];

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

  void _setupData() {
    for (int index = 0; index < 10; index++) {
      var randomVideoUrl = _videos[_random.nextInt(_videos.length)];
      dataList.add(VideoListData("Video $index", randomVideoUrl));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Video in list")),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          VideoListData videoListData = dataList[index];
          return VideoListWidget(
            videoListData: videoListData,
            index: index,
          );
        },
      ),
    );
  }
}

class VideoListData {
  final String videoTitle;
  final String videoUrl;
  Duration? lastPosition;
  bool? wasPlaying = false;

  VideoListData(this.videoTitle, this.videoUrl);
}

class VideoListWidget extends StatefulWidget {
  final VideoListData? videoListData;
  final int index;

  const VideoListWidget({super.key, this.videoListData, required this.index});

  @override
  State<VideoListWidget> createState() => _VideoListWidgetState();
}

class _VideoListWidgetState extends State<VideoListWidget> {
  VideoListData? get videoListData => widget.videoListData;
  BetterPlayerListVideoPlayerController? controller;

  @override
  void initState() {
    super.initState();
    controller = BetterPlayerListVideoPlayerController();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 0.7,
        child: ClipRRect(
          child: Column(
            children: [
              SizedBox(
                height: 50,
                child: Text('Item - ${widget.index}'),
              ),
              BetterPlayerListVideoPlayer(
                BetterPlayerDataSource(
                  BetterPlayerDataSourceType.network,
                  videoListData!.videoUrl,
                  bufferingConfiguration: const BetterPlayerBufferingConfiguration(
                      minBufferMs: 2000,
                      maxBufferMs: 10000,
                      bufferForPlaybackMs: 1000,
                      bufferForPlaybackAfterRebufferMs: 2000),
                ),
                configuration: const BetterPlayerConfiguration(
                  autoPlay: false,
                  aspectRatio: 1,
                  handleLifecycle: true,
                  fit: BoxFit.cover,
                  expandToFill: false,
                  controlsConfiguration: BetterPlayerControlsConfiguration(
                    showControls: false,
                    showControlsOnInitialize: false,
                  ),
                ),
                playFraction: 0.8,
                betterPlayerListVideoPlayerController: controller,
              ),
              const SizedBox(
                height: 50,
                child: Text('Footer'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

1. For flutter 3.22.3 Working

RPReplay_Final1724840402.2.mp4

2. For flutter 3.24 and 3.24.1 Not Working

RPReplay_Final1724839192.2.1.mp4

Logs

Flutter Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.1, on macOS 14.5 23F79 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] Connected device (6 available)
[✓] Network resources

• No issues found!

[huycozy]

@wdcs-vivekmakvana better_player_plus is a 3rd party package.

I checked this using the 1st party package video_player but didn't see the issue appear, can you also try on your device and confirm?

Sample code with video_player

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Video List',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> _videos = [
    'https://cdn.pixabay.com/video/2022/12/18/143419-782363231_large.mp4',
    'https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4',
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
    'https://videos.pexels.com/video-files/4434150/4434150-hd_1080_1920_30fps.mp4',
  ];
  final _random = Random();
  List<VideoListData> dataList = [];

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

  void _setupData() {
    for (int index = 0; index < 10; index++) {
      var randomVideoUrl = _videos[_random.nextInt(_videos.length)];
      dataList.add(VideoListData("Video $index", randomVideoUrl));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Video in list")),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          VideoListData videoListData = dataList[index];
          return VideoListWidget(
            videoListData: videoListData,
            index: index,
          );
        },
      ),
    );
  }
}

class VideoListData {
  final String videoTitle;
  final String videoUrl;
  Duration? lastPosition;
  bool? wasPlaying = false;

  VideoListData(this.videoTitle, this.videoUrl);
}

class VideoListWidget extends StatefulWidget {
  final VideoListData? videoListData;
  final int index;

  const VideoListWidget({super.key, this.videoListData, required this.index});

  @override
  State<VideoListWidget> createState() => _VideoListWidgetState();
}

class _VideoListWidgetState extends State<VideoListWidget> {
  VideoListData? get videoListData => widget.videoListData;
  late VideoPlayerController controller;

  @override
  void initState() {
    super.initState();
    controller = VideoPlayerController.networkUrl(Uri.parse(videoListData!.videoUrl))
        ..initialize().then((_) {
          setState(() {});
        });
  }

  @override
  void dispose() {
    controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 0.7,
        child: ClipRRect(
          child: Column(
            children: [
              SizedBox(
                height: 50,
                child: Text('Item - ${widget.index}'),
              ),
              Flexible(child: VideoPlayer(controller)),
              const SizedBox(
                height: 50,
                child: Text('Footer'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

If the issue only happens with better_player_plus, please file an issue on its repository for better support there.

[wdcs-vivekmakvana]

@huycozy It's working fine on video_player plugin, but can you please help me to find out, why clip is not working on Flutter latest version.

[wdcs-vivekmakvana]

I was able to work around the issue by removing the FittedBox widget from the better_player_plus package. This leads me to believe that the flickering might be related to how FittedBox interacts with video rendering on iOS in Flutter 3.24.
I'm not entirely sure if this is the root cause, but it seems like a strong lead. Hopefully, this information helps in pinpointing and resolving the issue.

[huycozy]

Can you use my sample code above and adjust it with FittedBox and a fit value you passed (not sure if it's wrong with every fit values or a specific one) then share the updated code here? Thanks!

[wdcs-vivekmakvana]

@huycozy I have added FittedBox over VideoPlayer widget, it seems like FittedBox fit property not working.

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Video List',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> _videos = [
    'https://cdn.pixabay.com/video/2022/12/18/143419-782363231_large.mp4',
    'https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4',
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
    'https://videos.pexels.com/video-files/4434150/4434150-hd_1080_1920_30fps.mp4',
  ];
  final _random = Random();
  List<VideoListData> dataList = [];

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

  void _setupData() {
    for (int index = 0; index < 10; index++) {
      var randomVideoUrl = _videos[_random.nextInt(_videos.length)];
      dataList.add(VideoListData("Video $index", randomVideoUrl));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Video in list")),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          VideoListData videoListData = dataList[index];
          return VideoListWidget(
            videoListData: videoListData,
            index: index,
          );
        },
      ),
    );
  }
}

class VideoListData {
  final String videoTitle;
  final String videoUrl;
  Duration? lastPosition;
  bool? wasPlaying = false;

  VideoListData(this.videoTitle, this.videoUrl);
}

class VideoListWidget extends StatefulWidget {
  final VideoListData? videoListData;
  final int index;

  const VideoListWidget({super.key, this.videoListData, required this.index});

  @override
  State<VideoListWidget> createState() => _VideoListWidgetState();
}

class _VideoListWidgetState extends State<VideoListWidget> {
  VideoListData? get videoListData => widget.videoListData;
  late VideoPlayerController controller;

  @override
  void initState() {
    super.initState();
    controller = VideoPlayerController.networkUrl(Uri.parse(videoListData!.videoUrl))
      ..initialize().then((_) {
        setState(() {});
      });
    controller.play();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          SizedBox(
            height: 50,
            child: Text('Item - ${widget.index}'),
          ),
          Flexible(
            child: FittedBox(
              fit: BoxFit.cover,
              child: SizedBox(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width,
                child: VideoPlayer(controller),
              ),
            ),
          ),
          ColoredBox(
            color: Colors.green.withOpacity(0.2),
            child: const SizedBox(
              height: 50,
              child: Text('Footer'),
            ),
          ),
        ],
      ),
    );
  }
}

[wdcs-vivekmakvana]

I am attaching video for reference.

1. fit : BoxFit.cover

cover.1.mp4

2. fit: BoxFit.fitHeight

fitHeight.1.mp4

3. fit : BoxFit.fill

fill.1.mp4

[huycozy]

I rechecked this with both Flutter versions 3.24.1 and 3.22.3, it seems video displays the same as the expected result on the original comment.

Do you mean fit values are not affected? If so, I think this is an implementation issue when you set a limited size by SizedBox width and height inside FittedBox.

Please also try on 3.22.3 and confirm this. If there is any different point, please be more specific so I can recheck.