Twitter embeds cut off at bottom

ScottWallace commented 2 years ago

Steps to Reproduce

Have a twitter embed in your html code. Notice it's cut off at bottom.

return HtmlWidget(
              snapshot.data!,
              enableCaching: false,
              factoryBuilder: () => WebviewFactory(),
              onTapUrl: (url) {
                _launchURL(url: url);
                return true;
              },
              customStylesBuilder: (e) {
                switch (e.localName) {
                  case 'blockquote':
                    return {'margin': '0'};
                  case 'p':
                    return {'color': 'black'};
                }
                return null;
              },
              customWidgetBuilder: (e) {
                if (e.localName == 'blockquote') {
                  switch (e.attributes['class']) {
                    case 'instagram-media':
                      return buildForInstagram(e.outerHtml);
                    case 'twitter-tweet':
                      return buildForTwitter(e.outerHtml);
                    case 'tiktok-embed':
                      return buildForTiktok(e.outerHtml);
                  }
                }
                return null;
              },
              renderMode: RenderMode.sliverList,
              isSelectable: true,
              buildAsync: true,
            );

 Widget buildForInstagram(String html) => WebView(
        Uri.dataFromString(
          """<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  $html
  <script async src="https://www.instagram.com/embed.js"></script>
</body>
</html>""",
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8'),
        ).toString(),
        aspectRatio: 16 / 9,
        autoResize: true,
        mediaPlaybackAlwaysAllow: true,
      );

  Widget buildForTwitter(String html) => WebView(
        "https://api.flutter-widget-from-html.vercel.app/iframe.ts?body=${Uri.encodeComponent('$html<script async src="https://platform.twitter.com/widgets.js"></script>')}",
        aspectRatio: 16 / 9,
        autoResize: true,
        mediaPlaybackAlwaysAllow: true,
      );

  WebView buildForTiktok(String blockquoteHtml) {
    var body =
        '$blockquoteHtml<script async src="https://www.tiktok.com/embed.js"></script>';
    return WebView(
      'https://api-flutter-widget-from-html.vercel.app/iframe.ts?body=${Uri.encodeComponent(body)}',
      aspectRatio: 9 / 16,
      autoResize: true,
      mediaPlaybackAlwaysAllow: true,
    );
  }

Testing environment

``` [✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale en-US) • Flutter version 3.0.4 at /Users/scottwallace/Developer/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 85684f9300 (6 days ago), 2022-06-30 13:22:47 -0700 • Engine revision 6ba2af10bb • Dart version 2.17.5 • DevTools version 2.12.2 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/scottwallace/Library/Android/sdk • Platform android-31, build-tools 30.0.3 • ANDROID_HOME = /Users/scottwallace/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763) [✓] VS Code (version 1.68.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.44.0 [✓] Connected device (3 available) • iPhone 13 Pro Max (mobile) • B4E944F8-CC74-470E-8F04-F01B74197152 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.4 21F79 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.114 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

Expected results

The Twitter embed should allow itself to size correctly.

Actual results

The Twitter embed is limited to the 16/9 ratio described in the aspectRatio of the WebView, which is a required parameter.

Screenshot

Question

It appears to me that the WebView, which contains the embed, is limiting viewing of the Twitter embed. (I've not tried it yet with other embeds.) The required aspect ratio for the WebView doesn't allow for the variable heights of Twitter embeds.

How do I allow the WebView to simply take the size of the embed?

ScottWallace commented 2 years ago

Just saw the note in the code for autoResize, "Flutter Web is not supported.". The screenshots above are from the web version.

However, it also doesn't appear to auto-resize on iOS either. Here's a screenshot of that not performing. I have insured js:true and autoResize: true for WebView, in fact it uses the same code as above.

Simulator Screen Shot - iPhone 13 Pro Max - 2022-07-06 at 13 39 01

ScottWallace commented 2 years ago

I spoke too soon. Looks like I hadn't properly refreshed on iOS. It now works on iOS, properly and consistently. Thanks for a great tool!

daohoangson / flutter_widget_from_html