Flutter中initState初始化Future仍触发FutureBuilder两次执行问题

你在initState中提前初始化Future的写法符合官方文档要求，出现两次执行通常是几个容易被忽略的细节问题导致，按以下步骤排查修复即可：

首先修正initState的不规范写法 #

你当前代码中super.initState()的调用顺序错误，且在initState中直接传入context供异步方法使用存在隐患：

// 错误写法
@override
void initState() {
  userImageFuture = Buttons.getUserImage(loggedUser.Id, context);
  super.initState(); // 未在第一行调用父类initState
}

注意：super.initState()必须作为initState方法的第一行执行，否则会出现生命周期异常；另外如果getUserImage方法内部用到了Theme.of、MediaQuery.of、状态管理库的of方法等依赖InheritedWidget的context获取逻辑，直接在initState中调用会触发异常的依赖更新，导致组件重建时重复执行异步任务。

修正为如下写法：

@override
void initState() {
  super.initState(); // 第一行调用父类初始化
  // 首帧渲染完成后再初始化需要依赖context的Future
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (mounted) {
      setState(() {
        userImageFuture = Buttons.getUserImage(loggedUser.Id, context);
      });
    }
  });
}

记得给userImageFuture设置初始值，避免首帧构建时出现空异常，比如直接赋值为返回默认头像的future，或者在FutureBuilder中做空判断。

区分正常的builder回调和异步任务重复执行 #

FutureBuilder的builder方法本身设计就是会在异步任务的不同状态（未启动、等待中、完成、报错）下多次触发，这是正常行为，不是bug。你可以在builder中加日志确认是否真的是异步任务重复执行：

FutureBuilder<ImageProvider>(
  future: userImageFuture,
  builder: (BuildContext context, AsyncSnapshot<ImageProvider> snapshot) {
    // 打印当前状态，如果多次出现ConnectionState.waiting才代表异步任务被重启
    debugPrint('Future state: ${snapshot.connectionState}, hasData: ${snapshot.hasData}');
    
    // 标准的snapshot状态判断，避免不同状态下的组件渲染异常
    switch (snapshot.connectionState) {
      case ConnectionState.waiting:
      case ConnectionState.none:
        return const CircleAvatar(
          radius: 20,
          backgroundImage: Settings.DefaultUserImage,
        );
      case ConnectionState.done:
        if (snapshot.hasError) {
          return const CircleAvatar(
            radius: 20,
            backgroundImage: Settings.DefaultUserImage,
          );
        }
        return CircleAvatar(
          radius: 20,
          foregroundImage: snapshot.data,
          backgroundImage: Settings.DefaultUserImage,
        );
      default:
        return const CircleAvatar(
          radius: 20,
          backgroundImage: Settings.DefaultUserImage,
        );
    }
  },
)

排查其他触发重建的场景 #

• 检查HomePage的父组件是否存在频繁setState的逻辑，比如MaterialApp的主题、路由状态变化导致子组件全量重建
• 确认路由逻辑中没有重复push HomePage路由到栈中
• 切换到release模式验证：debug模式下的热重载、调试服务注入会触发组件临时重建，运行flutter run --release如果异步任务只执行一次，属于debug模式正常特性，无需额外处理

终极兜底方案 #

如果以上排查后仍存在重复执行问题，可以使用AsyncMemoizer强制异步任务只执行一次，从根源避免重复调用：

1. 先在pubspec.yaml中添加官方async工具库依赖：

dependencies:
  flutter:
    sdk: flutter
  async: ^2.11.0 # 新增这行

2. 修改State中的Future初始化逻辑：

import 'package:async/async.dart';

class _HomePageState extends State<HomePage> {
  late Future<ImageProvider> userImageFuture;
  // 初始化备忘录实例
  final AsyncMemoizer<ImageProvider> _userImageMemo = AsyncMemoizer();
  LoggedUser loggedUser = Cache.getLoggedUser();

  @override
  void initState() {
    super.initState();
    userImageFuture = _loadUserImage();
  }

  Future<ImageProvider> _loadUserImage() {
    // runOnce保证内部逻辑无论被调用多少次，只会真正执行一次
    return _userImageMemo.runOnce(() async {
      return Buttons.getUserImage(loggedUser.Id, context);
    });
  }

  // build方法逻辑保持不变
}

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