Search code examples
flutterdartflutter-dependenciesflutter-html

I can't see embed youtube or pdf on flutter web html viewer


Can anyone help me with this please ? I'm using Flutter 3.7.9 , when I add something embeded (pdf or youtube video ) with my html editor , and then try to view it, I only can see it on mobile , doesn't show up on flutter web. I tried using other things like easy web view but It's doesn't seem to work with these version of my pubspec.yaml and I can't change much of those versions or the html editor advanced will not work correctly.

this is when I addded embed youtube video and embed pdf : enter image description here

but this is what shows up in my preview page ( on web ) , only text,images..etc :

enter image description here

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
export 'htmleditor_model.dart';
export 'htmleditor_model.dart';

class MyPreviewPage extends StatelessWidget {
  final String htmlText;

  const MyPreviewPage({Key? key, required this.htmlText}) : super(key: key);

  @override
  Widget build(BuildContext context) {

/*    if (kIsWeb) {
      return Scaffold(
   appBar: AppBar(
          title: const Text('Preview Page'),
        ),
        body: SingleChildScrollView(
          child: HtmlWidget('$htmlText'),
        ),
      );
    } else {*/

      return Scaffold(
        appBar: AppBar(
          title: const Text('Preview Page'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView(
            child:  Html(
              data: htmlText,  
          ),
        ),
      )
      );
    }
  } 

This is my pubspec.yaml , I can't change much of the versions because I'm using the html_editor_advanced and it seems to only work with these version :

name: text_editor_project
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  auto_size_text: 3.0.0
  cached_network_image: 3.2.1
  flutter_animate: 1.0.0
  flutter_cache_manager: 3.3.0
  font_awesome_flutter: 10.1.0
  from_css_color: 2.0.0
  go_router: 3.1.0
  google_fonts: 3.0.1
  html_editor_enhanced: ^2.5.1
  intl: 0.17.0
  json_path: 0.4.1
  page_transition: 2.0.4
  provider: 6.0.4
  shared_preferences: 2.0.15
  sqflite: 2.2.0+2
  timeago: 3.2.2
  url_launcher: 6.1.5
  firebase_core: ^2.5.0
  firebase_auth: ^4.2.6
  cloud_firestore: ^4.4.4
  lottie: ^2.2.0
  google_sign_in: ^6.0.1
  google_sign_in_web: ^0.11.0+1
  flutter_windowmanager: ^0.2.0
  image_picker: ^0.8.7+1
  firebase_storage: ^11.1.0

  cupertino_icons: ^1.0.0
  flutter_widget_from_html: ^0.10.0
  flutter_html: 3.0.0-alpha.5
  #sanitize_html: ^2.0.0
  #video_player_web: ^2.0.16
  #flutter_html_video: ^3.0.0-alpha.4
  #flutter_html_iframe: ^3.0.0-beta.2

dependency_overrides:
  provider: 6.0.0
  webview_flutter_android: 2.10.3
  webview_flutter_platform_interface: 1.9.5
  webview_flutter_wkwebview: 2.9.5

dev_dependencies:

  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/fonts/
    - assets/images/
    - assets/videos/
    - assets/audios/
    - assets/lottie_animations/
    - assets/rive_animations/
    - assets/pdfs/

Solution

  • I upgraded the pubspec.yaml file and it worked and also downgraded some of the flutter_html one, turns out flutter_html_iframe is causing an issue. Thanks to everyone who is trying to help & I hope this benefit anyone who got the same issue.

    name: text_editor_project
    description: A new Flutter project.
    
    publish_to: 'none'
    
    version: 1.0.0+1
    
    environment:
      sdk: ">=2.12.0 <3.0.0"
    
    dependencies:
      flutter:
        sdk: flutter
      flutter_localizations:
        sdk: flutter
      auto_size_text: 3.0.0
      cached_network_image: 3.2.1
      flutter_animate: 1.0.0
      flutter_cache_manager: 3.3.0
      font_awesome_flutter: 10.1.0
      from_css_color: 2.0.0
      go_router: 3.1.0
      google_fonts: 3.0.1
      html_editor_enhanced: ^2.5.1
      intl: 0.17.0
      json_path: 0.4.1
      page_transition: 2.0.4
      provider: 6.0.4
      shared_preferences: 2.0.15
      sqflite: 2.2.0+2
      timeago: 3.2.2
      url_launcher: 6.1.5
      firebase_core: ^2.5.0
      firebase_auth: ^4.2.6
      cloud_firestore: ^4.4.4
      lottie: ^2.2.0
      google_sign_in: ^6.0.1
      google_sign_in_web: ^0.11.0+1
      flutter_windowmanager: ^0.2.0
      image_picker: ^0.8.7+1
      firebase_storage: ^11.1.0
    
      cupertino_icons: ^1.0.0
      #flutter_widget_from_html: ^0.10.0
      universal_html: ^2.2.1
      flutter_html: ^2.1.2
      #sanitize_html: ^2.0.0
      #video_player_web: ^2.0.16
      #flutter_html_video: ^3.0.0-alpha.4
      #flutter_html_iframe: ^2.0.
    
    dependency_overrides:
      provider: ^6.0.5
      webview_flutter_android: ^3.8.0
      webview_flutter_platform_interface: ^2.3.1
      webview_flutter_wkwebview: ^3.5.0
    
    dev_dependencies:
    
      flutter_test:
        sdk: flutter
    
    flutter:
    
      uses-material-design: true
    
      assets:
        - assets/fonts/
        - assets/images/
        - assets/videos/
        - assets/audios/
        - assets/lottie_animations/
        - assets/rive_animations/
        - assets/pdfs/