HTML response is not loading, showing blank white screen

[Sunsiha]

adrianflutur/webviewx#91

[bjs-mb-dev]

Hi @Sunsiha
I have tested your HTML code, and it's working perfectly.
It's providing the exact expected output.
Could you be more specific by providing me with the code and the output of flutter doctor -v

class HtmlTesting extends StatelessWidget {
  const HtmlTesting({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          border: Border.all(width: 0.2),
        ),
        child: _buildWebViewX(context),
      ),
    );
  }

  Widget _buildWebViewX(context) {
    return SafeArea(
      child: WebViewX(
        initialSourceType: SourceType.html,
        height: MediaQuery.of(context).size.height * .9,
        width: MediaQuery.of(context).size.width,
        onWebViewCreated: (controller) {
          controller.loadContent(
            'assets/test.html',
            sourceType: SourceType.html,
            fromAssets: true,
          );
        },
      ),
    );
  }
}

[Sunsiha]

[✓] Flutter (Channel stable, 3.3.1, on macOS 12.5 21G72 darwin-x64, locale en-IN)
    • Flutter version 3.3.1 on channel stable at /Users/sunishaguptan/tools/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4f9d92fbbd (4 weeks ago), 2022-09-06 17:54:53 -0700
    • Engine revision 3efdf03e73
    • Dart version 2.18.0
    • DevTools version 2.15.0

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/sunishaguptan/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F17a
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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.10+0-b96-7281165)

[✓] VS Code (version 1.62.2)
    • VS Code at /Users/sunishaguptan/Downloads/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 105.0.5195.125

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[Sunsiha]

Hi @Sunsiha I have tested your HTML code, and it's working perfectly. It's providing the exact expected output. Could you be more specific by providing me with the code and the output of flutter doctor -v

class HtmlTesting extends StatelessWidget {
  const HtmlTesting({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          border: Border.all(width: 0.2),
        ),
        child: _buildWebViewX(context),
      ),
    );
  }

  Widget _buildWebViewX(context) {
    return SafeArea(
      child: WebViewX(
        initialSourceType: SourceType.html,
        height: MediaQuery.of(context).size.height * .9,
        width: MediaQuery.of(context).size.width,
        onWebViewCreated: (controller) {
          controller.loadContent(
            'assets/test.html',
            sourceType: SourceType.html,
            fromAssets: true,
          );
        },
      ),
    );
  }
}

For me it's getting blank screen. And am not loading from asset folder too.

[bjs-mb-dev]

If you don't want to load from the asset folder then pass fromAssets: false and add the html code in string.
I have written down the code below and I hope it helps...

Scaffold(
      body: WebViewX(
        initialContent: initialContent,
        initialSourceType: SourceType.html,
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        onWebViewCreated: (controller) {
          controller.loadContent(
            '''
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mahad"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Asghar"><br><br>
  <input type="submit" value="Submit">
</form> 
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
''',
            sourceType: SourceType.html,
            fromAssets: false,
          );
        },
      ),
    );

[Sunsiha]

If you don't want to load from the asset folder then pass fromAssets: false and add the html code in string. I have written down the code below and I hope it helps...

Scaffold(
      body: WebViewX(
        initialContent: initialContent,
        initialSourceType: SourceType.html,
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        onWebViewCreated: (controller) {
          controller.loadContent(
            '''
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mahad"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Asghar"><br><br>
  <input type="submit" value="Submit">
</form> 
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
''',
            sourceType: SourceType.html,
            fromAssets: false,
          );
        },
      ),
    );

This I have already tried. For me it's showing blank screen always. Is there is chrome version issue or flutter version issues?

[Sunsiha]

@mahad555 Which version of flutter are you using? Hope this plugin is supporting from version 3

[bjs-mb-dev]

@Sunsiha I'm using 3.3.2 on macOS and windows 3.3.1.
Chrome version 105.0.5195.125.
I have tested this on multiple devices but I haven't faced this issue.

1. Try to update the chrome version.
2. When the display is blank, open the console to check if shows any error
3. And I have written down the link below to solve the iframe issue on the browser.
   https://windowsreport.com/browser-does-not-support-iframes/#:~:text=Why%20iFrame%20is%20not%20working,you%20just%20installed%20in%20Chrome.

[Sunsiha]

1. Using 106.0.5249.91
2. Am not getting any error.
3. I tried it on safari also same blank screen is getting.

[Sunsiha]

Hey found something..When I created new project it's working. But don't know what's wrong with my current project.

[bjs-mb-dev]

Nice...
Try to clean the old project and delete the cache it might work.

[Sunsiha]

The issue is in index.html file. Not sure what it is.

[Sunsiha]

@mahad555 Add this in index.html file..

<script>
    // for auto fill
    Element.prototype.attachShadow = null;

    </script>

And check once. This i have added for auto fill..