How to prevent error of platformViewRegistry [flutter-web]

Question

I am trying to add pdf view in my web page (flutter web).. here is part of the code

ui.platformViewRegistry.registerViewFactory(
        'hello-world-html',
        (int viewId) => html.IFrameElement()
          ..width = '700'
          ..height = '4000'
          ..src = 'http:xxx.pdf'
          ..style.border = 'none');

the code runs like what I want, but I get error like this

The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix.
Try correcting the prefix or importing the library that defines 'platformViewRegistry'.

is there a way to prevent that error happen?

Glyconeogenesis

As an additional option to keep the analyzer happy, you can try the solution as defined in this PR. Check the dart_ui.dart, dart_ui_fake.dart and dart_ui_real.dart. Its a combination of conditional imports and shims. This issue is already known and is tracked by this issue in Github. – Ogata

Answer 1

Edit use analysis_options.yaml

analyzer:
  errors:
    undefined_prefixed_name: ignore

You can copy paste run full code below
You can use // ignore: undefined_prefixed_name
code snippet

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
        'hello-world-html',
        (int viewId) => html.IFrameElement()
          ..width = '700'
          ..height = '4000'
          ..src = 'http:xxx.pdf'
          ..style.border = 'none');

working demo

full simulate code

import 'package:flutter/material.dart';
// import 'dart:io' if (dart.library.html) 'dart:ui' as ui;
import 'dart:ui' as ui;
import 'dart:html' as html;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Iframe()),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class Iframe extends StatelessWidget {
  Iframe() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('iframe', (int viewId) {
      var iframe = html.IFrameElement();
      iframe.src = 'http://www.africau.edu/images/default/sample.pdf';
      return iframe;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 400, height: 300, child: HtmlElementView(viewType: 'iframe'));
  }
}

Shifty

thank you for the answer, I have tried your code.. and it runs perfectly... but I still get red underline in my editor and it still says that it was because of prefix or......, I have edited my question and added a photo of red underline.. is that possible to prevent red underline although the code runs perfectly? – Glyconeogenesis

@uyhaW Try restarting the analyzer or the ide. – Ogata

@uyhaW, please use analysis_options.yaml, see my updated answer – Shifty

@AbhilashChandran, I have read the link you have given to me, and @Shifty I have followed your answer too and finally I found the solution by adding FakeUi.dart, RealUi.dart, and the last is creating analysis_options.yaml in the same folder with pubspec.yaml... and that works really well... and red underline has gone... thank youuuu soo much – Glyconeogenesis

Using undefined_prefixed_name: ignore is possible overkill and might be risky. This will suppress all errors in the form of a.b where a is a prefix and b is not recognized. If this is a larger project or one that uses prefixes heavily, I strongly recommend my proposed answer which uses a simple two file shim instead. – Enfranchise

Hi @Shifty I would like to ask, I pass the value of iframe.src as a parameter but the parameter seems didn't reload, is there a way to reload the parameter of iframe.src ? – Glyconeogenesis

Answer 2

chunhunghan's proposed fix of ignoring undefined_prefix_name is overkill and risky. If you do this, all errors of the type prefix.wrongValue will be suppressed in your IDE. If you're on a small/personal project, this is fine, but if you're working on a larger scale project I would advise against this.

A better solution is to create a shim file for not-web contexts like so:

platform_view_registry.dart

export 'package:my_package/src/fake_platform_view_registry.dart'
  if (dart.library.html) 'dart:ui' show platformViewRegistry;

fake_platform_view_registry.dart

// add either a dynamically typed variable
dynamic platformViewRegistry;

// or a more thorough shim like this one
class FakePlatformViewRegistry {
  void registerViewFactory(
      String viewTypeId, dynamic Function(int) viewFactory) {
         throw UnsupportedError("platform view registry in non-web context");
      }
}
final platformViewRegistry = FakePlatformViewRegistry();

Then just import package:my_package/src/platform_view_registry.dart instead of dart:ui (and probably drop the ui prefix too).

import "package:my_package/src/platform_view_registry.dart";

...

platformViewRegistry.registerViewFactory(
        'hello-world-html',
        (int viewId) => html.IFrameElement()
          ..width = '700'
          ..height = '4000'
          ..src = 'http:xxx.pdf'
          ..style.border = 'none');

Enfranchise

Or just add //ignore: undefined_prefixed_name comment above the line with the error. – Corriecorriedale

Answer 3

To Fix issue: ui.platformViewRegistry.registerViewFactory()

not support in Mobile platform while support on web platform

• fixed

1- step add package

https://pub.dev/packages/fastor_app_ui_widget/install

2- step use import

import 'package:fastor_app_ui_widget/fastor_app_ui_widget.dart'  if (dart.library.html)  'dart:ui' as ui;

3- full example webview working on Website browser Chrome:

  Widget webViewPlatformWebsite ( {  required int webviewId, required String url,
    required double width, required double height } ){
 
    html.IFrameElement iframeElement = html.IFrameElement()
      ..src = url
      ..style.border = 'none'
      ..style.width = '100%'
      ..style.height = '100%'
      ..onLoad.listen((event) { 
      });
 
    String webviewRegisterKey = "webpage" +    webviewId.toString();
 

    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      webviewRegisterKey,
          (int viewId) => iframeElement,
    );

    var child =  HtmlElementView(viewType: webviewRegisterKey);                                     //unique key

    return SizedBox( child:  child , width:width, height: height );
  }

Commodious

Answer 4

if your error is coming from package:flutter_inappwebview/flutter_inappwebview.dart, try upgrading flutter to latest version

Ref: https://github.com/pichillilorenzo/flutter_inappwebview/issues/1900

Kress