web-dev-qa-db-ja.com

Flutter：WebViewがページをロードする前にCircularProgressIndicatorを表示する方法は？

Webview_fluttterプラグインを使用していますが、webviewがページを表示する前にCircularProgressIndicatorを表示する方法が見つかりません...

Androids WebViewClient onPageStarted/onPageFinishedに相当するものは何ですか？

WebView(
  initialUrl: url,
  onWebViewCreated: (controller) {
  },
)

ありがとうございました

webviewflutter
15
rlecheta

webview_flutter 、 progress_indicators の組み合わせを使用しています

以下はサンプルの作業コードです。

import 'package:flutter/material.Dart';
import 'package:webview_flutter/webview_flutter.Dart';
import 'Dart:async';
import 'package:progress_indicators/progress_indicators.Dart';




class ContactUs extends StatefulWidget {
  @override
  _ContactUsState createState() => _ContactUsState();
}

class _ContactUsState extends State<ContactUs> {

  bool vis1 = true;
  Size deviceSize;

  @override
  Widget build(BuildContext context) {

    deviceSize = MediaQuery.of(context).size;

    final lindicator = Center(
      child: AnimatedOpacity(
        // If the Widget should be visible, animate to 1.0 (fully visible). If
        // the Widget should be hidden, animate to 0.0 (invisible).
        opacity: vis1 ? 1.0 : 0.0,
        duration: Duration(milliseconds: 500),
        // The green box needs to be the child of the AnimatedOpacity
        child: HeartbeatProgressIndicator(
          child: Container(
            width: 100.0,
            height: 50.0,
            padding: EdgeInsets.fromLTRB(35.0,0.0,5.0,0.0),
            child: Row(
              children: <Widget>[
                Icon(
                  Icons.all_inclusive, color: Colors.white, size: 14.0,),
                Text(
                  "Loading View", style: TextStyle(color: Colors.white, fontSize: 6.0),),
              ],
            ),
          ),
        ),
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Row(
            children:<Widget>[
              Text('THisApp'),
              lindicator,
            ]),
        backgroundColor: Colors.red,
      ),
      body: new Container(
          child:WebView(
            initialUrl: 'https://cspydo.com.ng/',
            javaScriptMode: JavaScriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController){
              setState(() {
                vis1=false;
              });
            },
          )
      ),
    );
  }
}
1
C-Spydo

私のプラグイン flutter_inappwebview を使用できます。これは、他のプラグインと比較して多くのイベント、メソッド、オプションがあり、IndexedStackと組み合わせて、onLoadStopを使用してWebViewが読み込まれた後にウィジェットを切り替えます。

完全な例：

import 'Dart:async';

import 'package:flutter/material.Dart';

import 'package:flutter_inappwebview/flutter_inappwebview.Dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;
  int _page = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("InAppWebView")
      ),
      body: IndexedStack(
        index: _page,
        children: <Widget>[
          InAppWebView(
            initialUrl: "https://flutter.dev",
            initialHeaders: {},
            initialOptions: InAppWebViewWidgetOptions(
              inAppWebViewOptions: InAppWebViewOptions(
                debuggingEnabled: true,
              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {

            },
            onLoadStop: (InAppWebViewController controller, String url) {
              setState(() {
                _page = 0;
              });
            },
          ),
          Container(
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
        ],
      ),
    );
  }
}
1
Lorenzo Pichilli

ソリューションが見つかりました。initialChildを追加し、属性hiddenをtrueに設定できます。

WebviewScaffold(
hidden: true,
  url:url,initialChild: Center(
 child: Text("Plase Wait...",style: TextStyle(
  fontWeight: FontWeight.bold,
  color: Colors.deepPurpleAccent[100]
  ),)
 ) )
0
SREE ANI

IsLoadingで作業し、データが正しく読み込まれたことを確認してから変更できます。

    class X extends StatefulWidget {
      XState createState() => XState();
    }
    class XState extends State<X>{

    bool isLoading = false;

    @override
      void initState() {
        setState(() {
          isLoading = true;
        });
        super.initState();
      }

    Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
              children: <Widget>[
                  isLoading ? Center(child: CircularProgressIndicator()) : WebView(...)
              ]
            )
          );
        }
    }
0
Sara Vaseei