Flutter：如何在FutureBuilder中等待WebViewController的currentUrl()？

我实现了一个WebView，想要通过Provider在其他页面显示当前URL。因此在onWebViewCreated中，我尝试通过setController设置controller的值，并在Consumer组件中结合FutureBuilder和条件判断来使用它。当hasData为真时，我想要访问controller以获取currentUrl()，但使用controller.data?.currentUrl()的Text组件返回Instance of 'Future<String?>'，我知道需要await它，但不知道具体怎么做。

currentUrl()方法本身返回的是Future<String?>类型，你需要在外层FutureBuilder拿到WebViewController实例后，再嵌套一层FutureBuilder来处理这个异步请求，才能获取到实际的URL字符串。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:quirion_flutter/providers/router.providers.dart';
import 'package:quirion_flutter/widgets/webview.widgets.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<WebviewRouter>(builder: ((context, value, child) {
      return SafeArea(
        child: Stack(children: [
          const BankingWebView(
            initialUrl: 'https://banking-dev.quirion.de/setup/personal-data',
          ),
          FutureBuilder(
              future: value.controller.future,
              builder: ((BuildContext context,
                  AsyncSnapshot<WebViewController> controllerSnapshot) {
                if (controllerSnapshot.hasData) {
                  return Column(
                    children: [
                      // 嵌套FutureBuilder处理currentUrl()的异步结果
                      FutureBuilder<String?>(
                        future: controllerSnapshot.data?.currentUrl(),
                        builder: (context, urlSnapshot) {
                          if (urlSnapshot.hasData) {
                            return Text(urlSnapshot.data!);
                          } else if (urlSnapshot.hasError) {
                            return Text('获取URL失败: ${urlSnapshot.error}');
                          }
                          return const Text('加载URL中...');
                        },
                      ),
                      Text(value.route),
                    ],
                  );
                }
                return const SafeArea(child: Text('Nothing here'));
              })),
        ]),
      );
    }));
  }
}

补充说明 #

• 外层FutureBuilder负责获取WebViewController实例，内层FutureBuilder专门处理currentUrl()的异步调用
• 可以根据需求添加加载状态或错误状态的UI展示，提升用户体验

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