如何将SpinKitCircle组件嵌入Flutter页面的body中？

要把加载动画嵌入到带WebView的页面body中，核心思路是用Stack层叠WebView和加载指示器，通过状态变量控制动画的显示/隐藏。以下是完整的实现代码：

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

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _webViewController;
  bool _isLoading = true; // 控制加载动画的显示状态

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            setState(() => _isLoading = true);
          },
          onPageFinished: (String url) {
            setState(() => _isLoading = false);
          },
          onWebResourceError: (WebResourceError error) {
            setState(() => _isLoading = false);
            // 可在此添加加载错误的处理逻辑
          },
        ),
      )
      ..loadRequest(Uri.parse("https://example.com"));
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 处理物理返回键：优先让WebView回退
        if (await _webViewController.canGoBack()) {
          _webViewController.goBack();
          return false;
        }
        return true;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("WebView页面"),
          centerTitle: true,
        ),
        body: SafeArea(
          child: Stack(
            children: [
              // WebView主体
              WebViewWidget(controller: _webViewController),
              // 加载动画：仅在_isLoading为true时显示
              if (_isLoading)
                Container(
                  color: Colors.black54, // 半透明背景提升动画辨识度
                  child: const Center(
                    child: SpinKitCircle(size: 140, color: Colors.white),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

关键细节说明 #

• 状态控制：通过_isLoading变量控制动画显示，WebView开始加载时触发onPageStarted将其设为true，加载完成/出错时通过onPageFinished/onWebResourceError设为false。
• Stack布局：让加载动画覆盖在WebView上方，加载完成后自动隐藏，不影响WebView的交互。
• 依赖配置：需要在pubspec.yaml中添加对应依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 建议使用最新稳定版
  flutter_spinkit: ^5.2.0 # 建议使用最新稳定版

内容的提问来源于stack exchange，提问作者victor park