Merge pull request #160 from js1972/progress

Enable progress indicator for page load with WebviewScaffold

Author: charafau

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .atom/
 .idea
+.vscode
 .packages
 .pub/
 build/

README.md

@@ -3,7 +3,7 @@
 
 # flutter_webview_plugin
 
-Plugin that allow Flutter to communicate with a native WebView.
+Plugin that allows Flutter to communicate with a native WebView.
 
 ***Warning:***
 The webview is not integrated in the widget tree, it is a native view on top of the flutter view.
@@ -30,6 +30,38 @@ new MaterialApp(
     );
 ```
 
+Optional parameters `hidden` and `initialChild` are available so that you can show something else while waiting for the page to load.
+If you set `hidden` to true it will show a default CircularProgressIndicator. If you additionally specify a Widget for initialChild
+you can have it display whatever you like till page-load.
+
+e.g. The following will show a read screen with the text 'waiting.....'.
+```dart
+return new MaterialApp(
+  title: 'Flutter WebView Demo',
+  theme: new ThemeData(
+    primarySwatch: Colors.blue,
+  ),
+  routes: {
+    '/': (_) => const MyHomePage(title: 'Flutter WebView Demo'),
+    '/widget': (_) => new WebviewScaffold(
+          url: selectedUrl,
+          appBar: new AppBar(
+            title: const Text('Widget webview'),
+          ),
+          withZoom: true,
+          withLocalStorage: true,
+          hidden: true,
+          initialChild: Container(
+            color: Colors.redAccent,
+            child: const Center(
+              child: Text('Waiting.....'),
+            ),
+          ),
+        )
+  },
+);
+```
+
 `FlutterWebviewPlugin` provide a singleton instance linked to one unique webview,
 so you can take control of the webview from anywhere in the app
 

example/ios/Runner.xcodeproj/project.pbxproj

@@ -242,7 +242,7 @@
 			);
 			inputPaths = (
 				"${SRCROOT}/Pods/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh",
-				"${PODS_ROOT}/../../../../../development/flutter/bin/cache/artifacts/engine/ios/Flutter.framework",
+				"${PODS_ROOT}/../../../../../flutter/bin/cache/artifacts/engine/ios/Flutter.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_webview_plugin/flutter_webview_plugin.framework",
 			);
 			name = "[CP] Embed Pods Frameworks";

example/lib/main.dart

@@ -32,6 +32,13 @@ class MyApp extends StatelessWidget {
               ),
               withZoom: true,
               withLocalStorage: true,
+              hidden: true,
+              initialChild: Container(
+                color: Colors.redAccent,
+                child: const Center(
+                  child: Text('Waiting.....'),
+                ),
+              ),
               bottomNavigationBar: BottomAppBar(
                   child: Row(
                 children: <Widget>[
@@ -146,6 +153,7 @@ class _MyHomePageState extends State<MyHomePage> {
 
     _onStateChanged =
         flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
+
       if (mounted) {
         setState(() {
           _history.add('onStateChanged: ${state.type} ${state.url}');

lib/src/webview_scaffold.dart

@@ -21,6 +21,8 @@ class WebviewScaffold extends StatefulWidget {
   final bool withLocalStorage;
   final bool withLocalUrl;
   final bool scrollBar;
+  final bool hidden;
+  final Widget initialChild;
 
   final Map<String, String> headers;
 
@@ -40,7 +42,9 @@ class WebviewScaffold extends StatefulWidget {
       this.withZoom,
       this.withLocalStorage,
       this.withLocalUrl,
-      this.scrollBar})
+      this.scrollBar,
+      this.hidden = false,
+      this.initialChild})
       : super(key: key);
 
   @override
@@ -51,18 +55,30 @@ class _WebviewScaffoldState extends State<WebviewScaffold> {
   final webviewReference = new FlutterWebviewPlugin();
   Rect _rect;
   Timer _resizeTimer;
+  StreamSubscription<WebViewStateChanged> _onStateChanged;
 
   @override
   void initState() {
     super.initState();
     webviewReference.close();
+
+    if (widget.hidden) {
+      _onStateChanged = webviewReference.onStateChanged.listen((WebViewStateChanged state) {
+        if (state.type == WebViewState.finishLoad) {
+          webviewReference.show();
+        }
+      });
+    }
   }
 
   @override
   void dispose() {
     super.dispose();
     _resizeTimer?.cancel();
     webviewReference.close();
+    if (widget.hidden) {
+      _onStateChanged.cancel();
+    }
     webviewReference.dispose();
   }
 
@@ -101,9 +117,7 @@ class _WebviewScaffoldState extends State<WebviewScaffold> {
             }
           }
         },
-        child: const Center(
-          child: CircularProgressIndicator(),
-        ),
+        child: widget.initialChild ?? const Center(child: const CircularProgressIndicator()),
       ),
     );
   }
@@ -115,7 +129,7 @@ class _WebviewPlaceholder extends SingleChildRenderObjectWidget {
     @required this.onRectChanged,
     Widget child,
   }) : super(key: key, child: child);
-
+  
   final ValueChanged<Rect> onRectChanged;
 
   @override
@@ -124,7 +138,7 @@ class _WebviewPlaceholder extends SingleChildRenderObjectWidget {
       onRectChanged: onRectChanged,
     );
   }
-
+  
   @override
   void updateRenderObject(BuildContext context, _WebviewPlaceholderRender renderObject) {
     renderObject..onRectChanged = onRectChanged;