Flutter 插件 - 由于“dart:html”，移动设备无法编译，但插件仅支持 Web

Question

由于 Flutter 中没有实现 AdSense 的包，所以我决定创建一个本地插件。这非常简单，小部件是一个IFrameElement. 我确保在创建插件时指定它仅支持 Web，因为IFrameElement需要import 'dart:html'，但每当我尝试编译/构建移动版本时，它都会失败，因为它尝试将插件与dart:html. 我怎样才能解决这个问题？

插入：

import 'dart:html' as html show window;
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

import 'adsense_platform_interface.dart';

/// A web implementation of the AdsensePlatform of the Adsense plugin.
class AdsenseWeb extends AdsensePlatform {
  /// Constructs a AdsenseWeb
  AdsenseWeb();

  static void registerWith(Registrar registrar) {
    AdsensePlatform.instance = AdsenseWeb();
  }

  Widget adsenseAdsView(double width, double height) {

    ui.platformViewRegistry.registerViewFactory(
        'adViewBlock',
            (int viewID) => IFrameElement()
          ..width = '${width.toInt()}'
          ..height = '${width.toInt()}'
          ..src = 'adview.html'
          ..style.border = 'none');

    return SizedBox(
      height: height,
      width: width,
      child: const HtmlElementView(
        viewType: 'adViewBlock',
      ),
    );
  }

  /// Returns a [String] containing the version of the platform.
  @override
  Future<String?> getPlatformVersion() async {
    final version = html.window.navigator.userAgent;
    return version;
  }
}

使用：

import 'package:adsense/adsense_web.dart' show AdsenseWeb;

  Widget mainBody() {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    if (kIsWeb) {
      if (height > width) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            locationsGridView(),
            AdsenseWeb().adsenseAdsView(width/3, height/2)
          ],
        );
      } else {
        return Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            locationsGridView(),
            AdsenseWeb().adsenseAdsView(width/3, height/2)
          ],
        );
      }
    } else {
      return locationsGridView();
    }
  }

Answer 1

您必须创建三个类：

1. Flutter Web 的类。这是您当前的 AdsenseWeb 类，其中包含 import 'dart:html'。您可以将文件命名为 adsense_web.dart。

2. 移动构建的类。它也应该被称为AdsenseWeb。该文件可以称为 adsense_web_stub.dart。该文件中不应有 dart:html 导入！该类可以是一个存根或具有针对移动平台的特定行为。

3. 选择所需 AdsenseWeb 的包装器：

   import 'package:......adsense_web_stub.dart'
     if (dart.library.html) 'package:...... adsense_web.dart'
     if (dart.library.io) 'package:...... adsense_web_stub.dart'
     as web;
   import 'package:flutter/widgets.dart';
   
   class Adsense extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return web.AdsenseWeb();
     }
   }