web-dev-qa-db-fra.com

Flutter: comment afficher un CircularProgressIndicator avant que WebView ne charge la page?

J'utilise le plugin webview_fluttter, mais je ne trouve pas de moyen d'afficher un CircularProgressIndicator avant que la vue Web affiche la page ...

Quel est l'équivalent d'Androids WebViewClient onPageStarted/onPageFinished?

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

merci

webviewflutter
15
rlecheta

J'utilise une combinaison de webview_flutter , progress_indicators

Voici un exemple de code de travail:

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

Vous pouvez utiliser mon plugin flutter_inappwebview , qui a beaucoup d'événements, de méthodes et d'options par rapport à d'autres plugins, combiné avec IndexedStack et basculer entre les widgets après le chargement de WebView à l'aide de onLoadStop.

Exemple complet:

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

Vous avez trouvé la solution.Vous pouvez ajouter initialChild et définir l'attribut caché comme vrai.

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

Vous pouvez travailler sur isLoading et le modifier après avoir vérifié que les données sont correctement chargées.

    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