Question 75922 in Flutter Question posted in
The official Flutter documentation can be found here.

How to add text watermark on YouTube player iframe in fullscreen mode – Flutter

I’m working on an educational app (something like Udemy) that was built with Flutter. I need to add a text watermark on the YouTube player iframe.

I’m using stack widget to put the text over video player, and it’s working fine in normal mode, but I don’t know how to do it in fullscreen. Can I do it with stack widget or any other way?

Tags:

2

Answers


  1. 0

    You can wrap your watermark Text widget in a Positioned widget and set its position based on the dimensions of the device screen using MediaQuery.

    Something like this:

    Stack(
  children: [
     ....
    Positioned(
      bottom: MediaQuery.of(context).size.height * 0.1,
      right: MediaQuery.of(context).size.width * 0.1,
      child: Text(
        'Your Watermark',
      ),
    ),
  ],
)
    Login or Signup to reply.
  2. 0

    try this solution : first wrap your player with stack like this :

       Stack(
                  children: [
                    YoutubePlayer(
                      controller: _controller!,
                      progressColors: const ProgressBarColors(
                        playedColor: Colors.amber,
                        handleColor: Colors.amberAccent,
                      ),
                    ),
                    const WaterMarkWidget(
                      text: "water mark text",
                    )
                  ],
                ),

    and here is the WaterMarkWidget :

        import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

class WaterMarkWidget extends StatefulWidget {
  const WaterMarkWidget({super.key, required this.text});
  final String text;

  @override
  State<WaterMarkWidget> createState() => _WaterMarkWidgetState();
}

class _WaterMarkWidgetState extends State<WaterMarkWidget> {
  late Timer timer;
  double topPadding = 0;
  double downPadding = 0;
  int durationTime = 10000;
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      timer = Timer.periodic(Duration(milliseconds: durationTime), (__) {
        double w = MediaQuery.of(context).size.width * .3;
        double h = MediaQuery.of(context).size.height * .3;
        topPadding = Random().nextDouble() * h;
        downPadding = Random().nextDouble() * w;
        setState(() {});
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: topPadding,
          left: downPadding,
          child: AnimatedContainer(
            duration: Duration(milliseconds: durationTime),
            padding: EdgeInsets.only(top: topPadding, left: downPadding),
            child: Center(
              child: Text(
                widget.text,
                style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.bold,
                  color: Colors.black12.withOpacity(.06),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search