简体   繁体   中英

Flutter Web iFrame weird behavior

My Project was working totally fine a month ago, and now after several flutter updates , my iFrame widget is false centered in its desired renderbox. First picture is the wrong behavior, second is the old working version. I'm using a plugin which prevents the analyzer from prompting errors when using platformViewRegistry . Below is my code for the iframe-widget. Does someone know how to fix this? I don't want to downgrade to older flutter versions. Thanks for any help!

PS: Simple Center() did not work

错误的行为 正确的行为

My IFrame Widget

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
// ignore: undefined_prefixed_name
import 'package:universal_ui/universal_ui.dart';

import 'package:flutter/material.dart';

class Iframe extends StatefulWidget {
  final String source;
  final Size size;
  Iframe(this.source, {this.size});
  @override
  _IframeState createState() => _IframeState();
}

class _IframeState extends State<Iframe> {
  Widget _iframeWidget;
  String source;
  @override
  void initState() {
    newFrame();
    super.initState();
  }

  void newFrame() async {
    print(widget.size);
    final String id = widget.source.hashCode.toString();
    final IFrameElement _iframeElement = IFrameElement();
    _iframeElement.height = widget.size?.height?.toString() ?? '500';
    _iframeElement.width = widget.size?.width?.toString() ?? '500';
    source = widget.source;
    _iframeElement.src = widget.source;
    _iframeElement.style.border = 'none';

    ui.platformViewRegistry
        .registerViewFactory(id, (int viewID) => _iframeElement);
    _iframeWidget = HtmlElementView(
      key: UniqueKey(),
      viewType: id,
    );
  }

  @override
  Widget build(BuildContext context) {
    if (source != widget.source) newFrame();
    return _iframeWidget;
  }
}

Using IFrame Widget

class ChatClientAnon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamCacheBuilder<Package>(
      stream: Database().streamPackage(),
      builder: (data) => Container(
        child: Row(
          children: [
            Expanded(child: SmartphoneClient('Anonym', isAnon: true), flex: 2),
            Expanded(
                child: LayoutBuilder(
                    builder: (_, c) =>
                        Iframe(data.source, size: c.biggest)),
                flex: 8),
          ],
        ),
      ),
    );
  }
}

Update: issue got fixed with next flutter update

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM