如何在 WebView Flutter 中显示加载指示器背景透明？答案

【问题标题】：How to show Loading Indicator background transparent in WebView Flutter?如何在 WebView Flutter 中显示加载指示器背景透明？
【发布时间】：2021-11-07 10:07:22
【问题描述】：

我是 Flutter 和制作我的第一个 webview 应用程序的新手。每次当用户尝试单击链接或页面加载时，我都会尝试添加一个微调器。我想让微调器背景不透明度有点低，就像给定的例子（右图），但不透明度根本不起作用。

这是我的方法：

// ignore_for_file: prefer_const_constructors
// ignore: use_key_in_widget_constructors
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
        body: WebViewClass()
       )
      );
  }
}
 
class WebViewClass extends StatefulWidget {
 
  WebViewState createState() => WebViewState();
 
}
 
class WebViewState extends State<WebViewClass>{
 
  int position = 1 ;
 
  final key = UniqueKey();
 
  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }
 
  startLoading(String A){
    setState(() {
      position = 1;
    });
  }
 
  @override
  Widget build(BuildContext context) {
  return Scaffold(
     appBar: null,
      body: SafeArea(child: IndexedStack(
                            index: position,
                            children: <Widget>[ 
                                              WebView(
                                                initialUrl: 'https://google.com',
                                                javascriptMode: JavascriptMode.unrestricted,
                                                key: key ,
                                                onPageFinished: doneLoading,
                                                onPageStarted: startLoading,
                                                ),
 
                                                Container(
                                                  color: Colors.white70,
                                                  child: Center(
                                                    child: CircularProgressIndicator()),
                                                  ),
        
                                              ])) 
       
                  );
    }
}

我们将不胜感激任何帮助或指导。

【问题讨论】：

标签： flutter dart

【解决方案1】：

你可以这样试试。每次当您进入网络视图屏幕时。加载器将显示。

class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<WebViewClass> {

  bool isLoading = false;

  final key = UniqueKey();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: null,
        body: SafeArea(
            child: IgnorePointer(
              ignoring: isLoading,
              child: Stack(
                children: [
                  WebView(
                    initialUrl: 'https://google.com',
                    javascriptMode: JavascriptMode.unrestricted,
                    key: key,
                    onPageFinished: (value) {
                      setState(() {
                        isLoading = false;
                      });
                    },
                    onPageStarted: (value) {
                      setState(() {
                        isLoading = true;
                      });
                    },
                  ),
                  isLoading ? Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    color: Colors.grey.withOpacity(0.5),
                    child: const Center(child: CircularProgressIndicator())  ,
                  ) : Container(),
                ],
              ),
            )),);
  }
}

【讨论】：