¿Cómo mostrar el indicador de carga en WebView Flutter?

Si encuentras algo que no entiendes puedes comentarlo y haremos todo lo posible de ayudarte tan rápido como podamos.

Solución:

Ejemplo completo

class WebViewState extends State

  String title,url;
  bool isLoading=true;
  final _key = UniqueKey();
  
  WebViewState(String title,String url)
    this.title=title;
    this.url=url;
  
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: new AppBar(
          title: Text(this.title,style: TextStyle(fontWeight: FontWeight.w700)),centerTitle: true
      ),
      body: Stack(
        children: [
          WebView(
            key: _key,
            initialUrl: this.url,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (finish) 
              setState(() 
                isLoading = false;
              );
            ,
          ),
          isLoading ? Center( child: CircularProgressIndicator(),)
                    : Stack(),
        ],
      ),
    );
  

solo uso Stack widget por lo que además de la vista web establece el indicador de carga. cuando llameonPageFinished de la vista web que configuré isLoading=false valor variable y establecer contenedor transparente.

Acceso WebView después de completar Cargando

class WebViewState extends State

  String title,url;
  bool isLoading=true;
  final _key = UniqueKey();

  WebViewState(String title,String url)
    this.title=title;
    this.url=url;
  
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: new AppBar(
          title: Text(this.title,style: TextStyle(fontWeight: FontWeight.w700)),centerTitle: true
      ),
      body: Stack(
        children: [
          WebView(
            key: _key,
            initialUrl: this.url,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (finish) 
              setState(() 
                isLoading = false;
              );
            ,
          ),
          isLoading ? Center( child: CircularProgressIndicator(),)
                    : Stack(),
        ],
      ),
    );
  

podrías Future Builder para resolver este problema fácilmente. Sí, escuchas correcto.

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

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget 

  static Future get _url async 
    await Future.delayed(Duration(seconds: 1));
    return 'https://flutter.dev/';
  

  @override
  Widget build(BuildContext context) => Scaffold(
    body: Center(
      child:FutureBuilder(
        future: _url,
        builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
        ? WebViewWidget(url: snapshot.data,)
        : CircularProgressIndicator()),
  ),);


class WebViewWidget extends StatefulWidget 
  final String url;
  WebViewWidget(this.url);

  @override
  _WebViewWidget createState() => _WebViewWidget();


class _WebViewWidget extends State 
  WebView _webView;
  @override
  void initState() 
    super.initState();
     _webView = WebView(
      initialUrl: widget.url,
      javascriptMode: JavascriptMode.unrestricted,
    );
  

  @override
  void dispose() 
    super.dispose();
    _webView = null;
  

  @override
  Widget build(BuildContext context) => _webView;

Te invitamos a sostener nuestra faena dejando un comentario y puntuándolo te damos la bienvenida.

---

---

Utiliza Nuestro Buscador