Как использовать WebView.platform = WebWebViewPlatform(); и WebView.platform = AndroidWebView(); в том же файле дротика

У меня есть приложение flutter, которое должно использовать webview как в версии для Android/Ios, так и в веб-версии.

По сути, для этого нам нужен код, который разделяет вызовы для каждой платформы, и вот как я это сделал:

if (kIsWeb) {
  WebView.platform = WebWebViewPlatform();
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: "A**********************",
      appId: "**********************",
      messagingSenderId: "************",
      projectId: "water-maps-152c9",
    ),
  );
} else {
  if (Platform.isIOS) {
    await Firebase.initializeApp(
        options: const FirebaseOptions(
            apiKey: "*****************",
            appId: "1******************",
            messagingSenderId: "****************",
            projectId: "water-maps-152c9"));
    WebView.platform = AndroidWebView();
  } else {
    await Firebase.initializeApp();
    WebView.platform = AndroidWebView();
  }
}

проблема в том, что когда он работает на определенной платформе, такой как Android, ему не удается импортировать веб-просмотр для веб-пакета, также, если я его не импортировал, я получаю ошибку not defined в WebView.platform = WebWebViewPlatform();

поэтому я попытался импортировать его следующим образом:

import 'package:webview_flutter/webview_flutter.dart' if (dart.library.html) 'package:webview_flutter_web/webview_flutter_web.dart';

но все еще сталкиваюсь с ошибкой «не определено», как показано на изображении:

Также, когда я пытаюсь импортировать оба как:

import 'package:webview_flutter/webview_flutter.dart' ;
import 'package:webview_flutter_web/webview_flutter_web.dart';

выдает эту ошибку, когда я пытаюсь запустить приложение на Android

../src/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter_web-0.1.0+4/lib/webview_flutter_web.dart:70:9: Error: Type 'IFrameElement' not found.
  final IFrameElement _element;
        ^^^^^^^^^^^^^
../src/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter_web-0.1.0+4/lib/webview_flutter_web.dart:274:10: Error: Type 'HttpRequest' not found.
  Future<HttpRequest> request(String url,
         ^^^^^^^^^^^
../src/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter_web-0.1.0+4/lib/webview_flutter_web.dart:281:21: Error: Type 'ProgressEvent' not found.
      void Function(ProgressEvent e)? onProgress}) {
                    ^^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:79:48: Error: Type 'html.EventListener' not found.
  external ui.VoidCallback addPopStateListener(html.EventListener fn);
                                               ^^^^^^^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:193:3: Error: Type 'html.Location' not found.
  html.Location get _location => html.window.location;
  ^^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:195:3: Error: Type 'html.History' not found.
  html.History get _history => html.window.history;
  ^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:198:28: Error: Type 'html.EventListener' not found.
  void addPopStateListener(html.EventListener fn) {
                           ^^^^^^^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:203:31: Error: Type 'html.EventListener' not found.
  void removePopStateListener(html.EventListener fn) {
                              ^^^^^^^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:7:7: Error: Type 'AnchorElement' not found.
final AnchorElement _urlParsingNode = AnchorElement();
      ^^^^^^^^^^^^^
../src/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:20:7: Error: Type 'Element' not found.
final Element? _baseElement = document.querySelector('base');
      ^^^^^^^
../src/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter_web-0.1.0+4/lib/shims/dart_ui_fake.dart:19:26: Error: Type 'html.Element' not found.
      String viewTypeId, html.Element Function(int viewId) viewFactory) {
                         ^^^^^^^^^^^^
../src/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter_web-0.1.0+4/lib/webview_flutter_web.dart:23:25: Error: The method 'IFrameElement' isn't defined for the class 'WebWebViewPlatform'.
 - 'WebWebViewPlatform' is from 'package:webview_flutter_web/webview_flutter_web.dart' ('../src/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter_web-0.1.0+4/lib/webview_flutter_web.dart').

Вы можете проверить решение, удалив условие if () в операторе импорта и импортировав оба оператора?

Mahendra Raj 08.11.2022 09:27

Да, это выдает ошибку во время выполнения, так как webview_flutter_web не может быть импортирован на платформу Android.

Ahmed Wagdi 08.11.2022 09:33

поскольку WebWebViewPlatform используется в Интернете, а AndroidWebView в Android, для него требуются оба оператора импорта. но это не работает, так как плагин "webview_flutter_web" предназначен только для Интернета. следовательно, выдает ошибку на android или ios. это сработало бы, если бы у них были одинаковые имена классов.

Mahendra Raj 08.11.2022 10:01
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
3
203
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решение из официальной документации:

register_web_webview.dart

void registerWebViewWebImplementation() {
  WebView.platform = WebWebViewPlatform();
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      ...yourOptions
    ),
  );
}

register_native_webview.dart

void registerWebViewWebImplementation() {
  if (Platform.isIOS) {
    await Firebase.initializeApp(
        options: const FirebaseOptions(
          ...yourOptions
        )
    );
    WebView.platform = AndroidWebView();
  } else {
    await Firebase.initializeApp();
    WebView.platform = AndroidWebView();
  }
}

основной дротик

import 'register_native_webview.dart'
    if (dart.library.html) 'register_web_webview.dart';

main() {
  registerWebViewWebImplementation();
}

Пожалуйста, будьте осторожны с использованием реальных ключей API в примере для ответов на вопросы.

Mahendra Raj 08.11.2022 10:49

Другие вопросы по теме