Picture-in-Picture Mode in Flutter (2025): Full Guide with Code & Demo

Learn how to integrate floating video in your Flutter app using PiP, just like YouTube!

Why You Should Implement PiP in 2025

Picture-in-Picture (PiP) is no longer a luxury—it’s expected. Users want to multitask, and providing a seamless, YouTube-style floating video player boosts retention, engagement, and app rating.

Whether you’re building a media app, course platform, or even an ad-supported app—PiP makes you look pro.

Why PiP Mode Matters in 2025

• Users expect media continuity while switching apps
• It improves UX in OTT/video/audio apps
• Adds a Pro feature feel to your Flutter product

What You’ll Learn

• How to enable PiP in Flutter
• Integrate floating plugin for Android
• Play/pause network videos
• Add a video playlist with thumbnails

Required Dependencies

video_player: ^2.8.2
floating: ^1.0.1

Full Code Architecture

Your app will have:

• VideoPlayerController with network videos
• Thumbnail-based video selection
• PiP trigger with one tap or on app minimize
• Custom UI with SliverAppBar + SliverList
• Optimized layout for Android devices

Enable PiP with This Function:

Future<void> enablePip(BuildContext context, {bool autoEnable = false}) async {
  final rational = Rational.landscape();
  final screenSize = MediaQuery.of(context).size * MediaQuery.of(context).devicePixelRatio;
  final height = screenSize.width ~/ rational.aspectRatio;

  final arguments = autoEnable
      ? OnLeavePiP(
          aspectRatio: rational,
          sourceRectHint: Rectangle<int>(
            0,
            (screenSize.height ~/ 2) - (height ~/ 2),
            screenSize.width.toInt(),
            height,
          ),
        )
      : ImmediatePiP(
          aspectRatio: rational,
          sourceRectHint: Rectangle<int>(
            0,
            (screenSize.height ~/ 2) - (height ~/ 2),
            screenSize.width.toInt(),
            height,
          ),
        );

  final status = await Floating().enable(arguments);
  debugPrint('PiP enabled? $status');
}

Bonus Features You Can Add

• Show video progress indicator
• Add YouTube-like controls
• Add PiP auto-switch on minimize
• Track which video is watched how much
• Use shared_preferences to resume playback

GitHub Repo – Try it Yourself

🧠 Star and Fork this project and start experimenting:

👉 https://github.com/coderbaba0/picture_in_picture

Final Thoughts

Picture-in-Picture in Flutter takes your app’s UX to the next level. Whether you’re building a video tutorial app, conference tool, or a mini-player, adding PiP shows polish and professionalism.

And best of all — now you know how to do it the right way in Flutter .

Want more tutorials like this?
Subscribe or follow FlutterFever.com
For project help or freelance work, email: theflutterfever@gmail.com

FAQ – Flutter PiP Mode