颤振Spinkit进度指示器

我是个初来乍到的新手，想知道什么是最好的方法斯宾克特我现在的布局。例如，当我按下一个按钮与下一个屏幕上的webview连接时。加载webview当前需要2-4秒，我想要一个进度指示器出现。我想要创建一个覆盖布局(不透明)，完成其动画时，网站视图已加载。

下面是我当前的WebView代码：

class MyWebView extends StatelessWidget {
  final String title;
  final String selectedUrl;

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  MyWebView({
    @required this.title,
    @required this.selectedUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurpleAccent,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            color: Colors.white,
            onPressed: () => Navigator.of(context).pop(),
          ),
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
//            Image.asset(
//              'assets/logo.png',
//              fit: BoxFit.contain,
//              height: 32,
//            ),
              Container(
                padding: const EdgeInsets.only(
                    left: 8.0, right: 64.0, top: 8.0, bottom: 8.0),
                child: Image.asset(
                  'assets/White logo - no background.png',
                  alignment: Alignment.center,
                ),
              ),
            ],
          ),
        ),
        body: WebView(
          initialUrl: selectedUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        ));
  }
}

我知道我需要在我的代码中插入以下代码，但我不确定在哪里，我也想知道如何在代码中包括未来代码：

final spinkit = SpinKitSquareCircle(
color: Colors.white,
size: 50.0,
controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);