Html youtube rebuild issue

[asmith20002]

Hello,

When I use Html() to make youtube, in every setState() the youtube video gets rebuild and flashes. Is there a fix for that?
However using the same youtube widget directly, doesn't reset and keeps its state.

Below is a sample code: (pressing the floating action button adds a message to the screen and the youtube widget flashes)
After the sample, there's another one when the youtube widget is directly used.

import 'package:flutter/material.dart';

import 'package:youtube_player_flutter/youtube_player_flutter.dart';
import 'package:flutter_html/flutter_html.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List messages = [];
  YoutubePlayerController? _controller;

  @override
  void initState() {
    
    messages.add({
          'type': 'text',
          'msg': 'test1',
    });
    messages.add({
          'type': 'youtube',
          'msg': 'test2',
    });
    messages.add({
          'type': 'text',
          'msg': 'test3',
    });

    _controller = YoutubePlayerController(
      initialVideoId: '_CIHLJHVoN8',
      flags: const YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
        hideThumbnail: true,
      ),
      
    );

    super.initState();
  }

  void addMsg()
  {
    setState(()
    {

      messages.add({
            'type': 'text',
            'msg': 'testing',
      });      
    });
    
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> widgets = [];

    for (var msg in messages)
    {
      if (msg['type'] == 'text')
      {
        widgets.add(Text(msg['msg']));
      }
      else
      {
        widgets.add(Html(
          data: '<iframe src="https://www.youtube.com/watch?v=_CIHLJHVoN8"></iframe>',
          shrinkWrap: true,
          //tagsList: Html.tags..addAll(['chatdate', 'img', 'widget']),
          customRenders:
          {
            youtubeMatcher(): CustomRender.widget(widget: (context, buildChildren)
            {
              return YoutubePlayerBuilder(
                player: YoutubePlayer(
                  aspectRatio: 16/9,
                  controller: _controller!,
                  bottomActions: [
                    CurrentPosition(),
                    const SizedBox(width: 10),
                    ProgressBar(isExpanded: true),
                    const SizedBox(width: 10),
                  ],
                ),
                builder: (context, player)
                {
                  return Column(
                    children: [
                      // some widgets
                      player,
                      //some other widgets
                    ],
                  );
                }
              );
            }),
          },
        ));
      }      
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: widgets),
      floatingActionButton: FloatingActionButton(
        onPressed: addMsg,
        child: const Icon(Icons.add),
      ), 
    );
  }
}

CustomRenderMatcher youtubeMatcher() => (context) => context.tree.element?.localName == 'iframe';

This sample code is without the Html() and direct youtube widget:

import 'package:flutter/material.dart';

import 'package:youtube_player_flutter/youtube_player_flutter.dart';
import 'package:flutter_html/flutter_html.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List messages = [];
  YoutubePlayerController? _controller;

  @override
  void initState() {
    
    messages.add({
          'type': 'text',
          'msg': 'test1',
    });
    messages.add({
          'type': 'youtube',
          'msg': 'test2',
    });
    messages.add({
          'type': 'text',
          'msg': 'test3',
    });

    _controller = YoutubePlayerController(
      initialVideoId: '_CIHLJHVoN8',
      flags: const YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
        hideThumbnail: true,
      ),
      
    );

    super.initState();
  }

  void addMsg()
  {
    setState(()
    {

      messages.add({
            'type': 'text',
            'msg': 'testing',
      });      
    });
    
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> widgets = [];

    for (var msg in messages)
    {
      if (msg['type'] == 'text')
      {
        widgets.add(Text(msg['msg']));
      }
      else
      {
        widgets.add(YoutubePlayerBuilder(
                player: YoutubePlayer(
                  aspectRatio: 16/9,
                  controller: _controller!,
                  bottomActions: [
                    CurrentPosition(),
                    const SizedBox(width: 10),
                    ProgressBar(isExpanded: true),
                    const SizedBox(width: 10),
                  ],
                ),
                builder: (context, player)
                {
                  return Column(
                    children: [
                      // some widgets
                      player,
                      //some other widgets
                    ],
                  );
                }
              ));
      }      
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: widgets),
      floatingActionButton: FloatingActionButton(
        onPressed: addMsg,
        child: const Icon(Icons.add),
      ), 
    );
  }
}

[asmith20002]

Apologies my bad. Please scratch this question. (a simple key solves the rebuilding issue, my original code was based on stateless widgets and keys weren't working)

[FelipeAkiraDias]

Hello there! I'm having the same problem and was wondering if you could elaborate? Cheers :)