Flutter Spinkit 进度指示器

Posted 2023-02-23

【中文标题】Flutter Spinkit 进度指示器

【英文标题】：Flutter Spinkit Progress Indicator

【发布时间】：2020-03-28 06:57:49

【问题描述】：

我是 Flutter 的新手，想知道将 Spinkit 添加到当前布局的最佳方法是什么。例如，当我按下一个按钮以连接下一个屏幕上的 web 视图时。加载 webview 当前需要 2-4 秒，我希望出现一个进度指示器。我想创建一个覆盖布局（带有不透明度），在 webview 加载时完成其动画。

这是我当前的 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)),
);

【参考方案1】：

您需要使用bool isLoading 来检测页面是否已完成加载，基于此您可以隐藏或显示您的 SpinKitSquareCircle。

class WebViewPage extends StatefulWidget 
  @override
  _WebViewPageState createState() => _WebViewPageState();


class _WebViewPageState extends State<WebViewPage> with SingleTickerProviderStateMixin
  bool isLoading = true;
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: <Widget>[
          WebView(
            initialUrl: 'https://www.google.com/',
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (String url) 
              setState(() 
                //hide you progressbar here
                isLoading = false;
              );
            ,
          ),
          isLoading ? SpinKitSquareCircle(
            color: Colors.red,
            size: 50.0,
            controller: AnimationController(vsync: this,duration: const Duration(milliseconds: 1200)),
          ) : Stack()
        ],
      ),);;
  

您也可以在this gist 中找到代码。 此外，如果您只想加载 gif，则不必添加 flutter_spinkit 库，而是在 Image.asset 上加载 gif，

Image.asset(
                    "images/loading.gif",
                    height: 125.0,
                    width: 125.0,
                  )