Problems with WebviewScaffold not working with most pages but Googles.

[Luciano Pinto]

Hello all!!

I'm quite new to flutter, studying it for a few weeks and trying to figure out how to do things with the framework for my projects at work. One of the things I've been trying to do is load one of our web applications in a Webview straight inside our app.

I've tried to find something online on how to do this and I've noticed this is a delicate topic, as Flutter has no definite way of handling it. I was directed by the tutorials online toward the flutter_webivew_plugin and there I tried to use it in our project to se if I managed to get it work.

This is the code I've made for testing, following the plugin's guide:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

//const URL = 'http://diariodigital.seduc.am.gov.br'; //This link is the one for our web application that I want to run
//const URL = 'http://g1.globo.com'; //This is another page I tried loading, to no avail.
const URL = 'http://flutter.io'; // This page works just fine
//const URL = 'https://google.com'; // So does this one


const TITLE = 'Webview Test';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: TITLE,
      theme: new ThemeData.dark(),
      routes: {
        "/": (_) => WebviewScaffold(
          url: URL,
          withJavascript: true,
          withLocalStorage: true,
          appBar: AppBar(
            title: Text(TITLE),
          ),
        ),
      },
    );
  }
}

As you can see, the code is pretty simple and straightforward, but for the life of me I don't know what's going on when I try to load a page other than Google's own pages, like google.com and flutter.io. When I try to load my company's web app inside the webview, it shows the WebviewScaffold widget, with the title and everything, but the page doesn't load.

I've tested it both on the Android Emulator running the latests API and on Apple's Simulator, running iPhone X with also the latest version of iOS. I've also tested on actual devices, and the result is the same. 

As shown in the pictures below, they load the apps, but don't load the pages.

And I get the following console output for the Android version:

Launching lib/main.dart on Android SDK built for x86 in debug mode...

Initializing gradle...

Resolving dependencies...

Running 'gradlew assembleDebug'...

Built build/app/outputs/apk/debug/app-debug.apk.

Installing build/app/outputs/apk/app.apk...

I/OpenGLRenderer( 4918): Davey! duration=2875ms; Flags=1, IntendedVsync=433018698412, Vsync=434118698368, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=434134124095, AnimationStart=434134162421, PerformTraversalsStart=434134166351, DrawStart=434150927957, SyncQueued=434175871692, SyncStart=434202979811, IssueDrawCommandsStart=434203148887, SwapBuffers=434933574612, FrameCompleted=435921348723, DequeueBufferDuration=89654000, QueueBufferDuration=1470000, 

Syncing files to device Android SDK built for x86...

I/WebViewFactory( 4918): Loading com.android.chrome version 66.0.3359.158 (code 336015817)

I/odigitalwebvie( 4918): The ClassLoaderContext is a special shared library.

I/cr_LibraryLoader( 4918): Time to load native libraries: 14 ms (timestamps 8669-8683)

I/chromium( 4918): [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0

I/cr_LibraryLoader( 4918): Expected native library version number "66.0.3359.158", actual native library version number "66.0.3359.158"

W/cr_ChildProcLH( 4918): Create a new ChildConnectionAllocator with package name = com.android.chrome, sandboxed = true

I/cr_BrowserStartup( 4918): Initializing chromium process, singleProcess=false

I/cr_base ( 4918): Android Locale: en_US requires .pak files: [en-GB.pak, en-US.pak]

E/chromium( 4918): [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker;-><init>(Landroid/content/Context;I)V (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker;->logEvent(Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;)V (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionStarted(I)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(II)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextClassification;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextSelection;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(III)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)

W/odigitalwebvie( 4918): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(IIILandroid/view/textclassifier/TextClassification;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)

E/MethodChannel#flutter_webview_plugin( 4918): Failed to handle method call

E/MethodChannel#flutter_webview_plugin( 4918): java.lang.ClassCastException: android.webkit.WebView cannot be cast to com.flutter_webview_plugin.ObservableWebView

E/MethodChannel#flutter_webview_plugin( 4918): at com.flutter_webview_plugin.WebviewManager.<init>(WebviewManager.java:102)

E/MethodChannel#flutter_webview_plugin( 4918): at com.flutter_webview_plugin.FlutterWebviewPlugin.openUrl(FlutterWebviewPlugin.java:93)

E/MethodChannel#flutter_webview_plugin( 4918): at com.flutter_webview_plugin.FlutterWebviewPlugin.onMethodCall(FlutterWebviewPlugin.java:42)

E/MethodChannel#flutter_webview_plugin( 4918): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:191)

E/MethodChannel#flutter_webview_plugin( 4918): at io.flutter.view.FlutterNativeView.handlePlatformMessage(FlutterNativeView.java:165)

E/MethodChannel#flutter_webview_plugin( 4918): at android.os.MessageQueue.nativePollOnce(Native Method)

E/MethodChannel#flutter_webview_plugin( 4918): at android.os.MessageQueue.next(MessageQueue.java:326)

E/MethodChannel#flutter_webview_plugin( 4918): at android.os.Looper.loop(Looper.java:160)

E/MethodChannel#flutter_webview_plugin( 4918): at android.app.ActivityThread.main(ActivityThread.java:6669)

E/MethodChannel#flutter_webview_plugin( 4918): at java.lang.reflect.Method.invoke(Native Method)

E/MethodChannel#flutter_webview_plugin( 4918): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)

E/MethodChannel#flutter_webview_plugin( 4918): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

W/cr_CrashFileManager( 4918): /data/user/0/br.gov.am.prodam.diariodigitalwebview/cache/WebView/Crash Reports does not exist or is not a directory

D/        ( 4918): HostConnection::get() New Host Connection established 0xbf1a4e00, tid 4939

D/EGL_emulation( 4918): eglMakeCurrent: 0xdd322320: ver 3 0 (tinfo 0xdc16fc20)

I/Choreographer( 4918): Skipped 38 frames!  The application may be doing too much work on its main thread.

I/OpenGLRenderer( 4918): Davey! duration=3269ms; Flags=0, IntendedVsync=448266768117, Vsync=448300101449, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=448313904326, AnimationStart=448313942853, PerformTraversalsStart=448314555240, DrawStart=448332550193, SyncQueued=448332676168, SyncStart=448575849262, IssueDrawCommandsStart=448958294037, SwapBuffers=451049540435, FrameCompleted=451779412740, DequeueBufferDuration=68000, QueueBufferDuration=2580000, 

I/Choreographer( 4918): Skipped 168 frames!  The application may be doing too much work on its main thread.

I/OpenGLRenderer( 4918): Davey! duration=797ms; Flags=0, IntendedVsync=448321315137, Vsync=448954648445, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=448967229896, AnimationStart=448967271215, PerformTraversalsStart=448970459401, DrawStart=448977922820, SyncQueued=448978430648, SyncStart=451779722472, IssueDrawCommandsStart=451779841984, SwapBuffers=451781443276, FrameCompleted=451919659338, DequeueBufferDuration=15793000, QueueBufferDuration=1971000, 

This is the iOS version of the app:

And the console output:

Launching lib/main.dart on iPhone X in debug mode...

Starting Xcode build...

Xcode build done.

Syncing files to device iPhone X...

This is my yaml file: 

name: diario_digital_webview
description: Aplicativo Móvel do Diario Digital

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  flutter_webview_plugin: ^0.2.1+1
  shared_preferences: ^0.4.2
  url_launcher: ^3.0.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

And the flutter doctor -v output:

lucianopinto@Lucianos-MacBook-Pro:~/AndroidStudioProjects/diario_digital_webvieww|master⚡ 

⇒  flutter doctor -v

[✓] Flutter (Channel master, v0.5.8-pre.277, on Mac OS X 10.13.6 17G65, locale pt-BR)

    • Flutter version 0.5.8-pre.277 at /Users/lucianopinto/flutter

    • Framework revision e5432a2843 (16 hours ago), 2018-08-08 16:45:08 -0700

    • Engine revision 3777931801

    • Dart version 2.0.0-dev.69.5.flutter-eab492385c

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)

    • Android SDK at /Users/lucianopinto/Library/Android/sdk

    • Android NDK at /Users/lucianopinto/Library/Android/sdk/ndk-bundle

    • Platform android-28, build-tools 28.0.2

    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java

    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)

    • Xcode at /Applications/Xcode.app/Contents/Developer

    • Xcode 9.4.1, Build version 9F2000

    • ios-deploy 1.9.2

    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)

    • Android Studio at /Applications/Android Studio.app/Contents

    • Flutter plugin version 27.1.1

    • Dart plugin version 173.4700

    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] VS Code (version 1.25.1)

    • VS Code at /Applications/Visual Studio Code.app/Contents

    • Flutter extension version 2.16.0

[✓] Connected devices (3 available)

    • XT1069                    • 0013075830                           • android-arm • Android 6.0 (API 23)

    • Android SDK built for x86 • emulator-5554                        • android-x86 • Android 9 (API 28) (emulator)

    • iPhone X                  • 4B0AEBAE-B337-4D54-BD07-0E7A8A3DA225 • ios         • iOS 11.4 (simulator)

• No issues found!

Can somebody with more experience help me out? What am I doing wrong? Do I need any other plugins to make it work?

Thanks in advance!!

Cheers,

Luciano Pinto

[Eric Seidel]

Looks like an error in the plugin:

E/MethodChannel#flutter_webview_plugin( 4918): Failed to handle method call

E/MethodChannel#flutter_webview_plugin( 4918): java.lang.ClassCastException: android.webkit.WebView cannot be cast to com.flutter_webview_plugin.ObservableWebView

I'd recommend filing a bug with the plugin author:

https://github.com/dart-flitter/flutter_webview_plugin

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Olaide Nojeem Ekeolere]

Hi Luciano,

    You mentioned that google and flutter can open, did you try other sites other than that of your company.

When I was doing native on iOS and Android I also had a similar issue, on android the stacktrace showed it was a certificate issue, url I was using was http, when I changed to https, it worked. I think iOS also doesn’t allow http without you setting something in the info.pliat or so.. Does this sound like it?

[Luciano Pinto]

Thank you for your reply! Good advice! I'll look into it!

[Luciano Pinto]

Thank you for your reply, Oaide Nojeem Ekeolere!

Actually I made it work somewhat on Android, after I upgraded Flutter to the latest version as well as the plugin. I managed to make it work on a WebView on Android using the flutter_webview_plugin as intended, but had some problems with the User Agent to make user validation using Google's API. After supplying the correct User Agent string, it worked well. 

However, I still can't make the plugin work on iOS, which is still giving me a blank screen,  so I had to use the url_launcher plugin instead. This doesn't work as I intended, as it forced me to use Safari VC inside my app, instead of a WebView in full screen as was planned, but is already an improvement. I'm still looking into it to see what I can do to make it work properly in WebView in iOS. If anyone has any suggestions, it will be much appreciated.

At any rate, my work is progressing despite these hiccups! Thank you all for your help!

[Bruno Zan]

Any solution for this case? Still facing the same problem in Android!

Obrigado!