Flutter webview实现悬浮重载按钮时FutureBuilder空值报错如何解决

错误原因 #

你在FutureBuilder还未完成异步加载时就直接对snapshot.data使用了空断言操作符!，而此时snapshot.data仍为null，导致触发空值异常。你虽然判断了webViewReady状态，但在判断之前就已经强制解包了snapshot.data，这就是问题所在。

修复方案 #

调整NavigationControls的代码，将controller的解包操作放到异步完成的逻辑分支内，未完成时直接给浮动按钮设置禁用状态即可，修复后代码如下：

class NavigationControls extends StatelessWidget {
  const NavigationControls(this._webViewControllerFuture)
      : assert(_webViewControllerFuture != null);

  final Future<WebViewController> _webViewControllerFuture;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<WebViewController>(
      future: _webViewControllerFuture,
      builder:
          (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
        final bool webViewReady =
            snapshot.connectionState == ConnectionState.done;
        return FloatingActionButton(
          child: const Icon(Icons.replay),
          onPressed: webViewReady
            ? () {
                snapshot.data!.reload();
              }
            : null,
        );
      },
    );
  }
}

如果需要优化加载中的交互体验，还可以在webViewReady为false时，将按钮背景调整为灰色，或者将图标替换为加载指示器。

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