skip to Main Content

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?

2

Answers


  1. 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. 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