Flutter页面刷新后FutureBuilder内容不更新问题求助

问题根源分析 #

1. 未触发UI重建：_fetch方法更新了myAddress等状态变量，但没有调用setState，Flutter无法感知变量变化，不会触发UI更新。
2. FutureBuilder使用不当：直接将_fetch()作为future参数传入，每次build都会重复发起请求，且RefreshIndicator的刷新操作无法联动FutureBuilder更新状态。
3. 类型不匹配隐患：Bdate是int类型，但代码中用空字符串''作为兜底值，会导致类型转换错误。

修复方案 #

1. 在_fetch方法内更新变量后调用setState，触发UI重建；
2. 将请求的Future对象保存为State成员变量，刷新时重新赋值该变量，让FutureBuilder自动响应变化；
3. 修正变量类型不匹配问题；
4. 移除FutureBuilder中直接调用_fetch()的写法，改用保存的Future变量。

修改后的完整代码 #

class _TabPage3State extends State<TabPage3> {
  String myEmail = '';
  String fname = '';
  String lname = '';
  String? myAddress = '';
  int Bdate = 0;

  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();
  // 保存请求的Future对象，供FutureBuilder使用
  late Future<void> _fetchFuture;

  @override
  void initState() {
    super.initState();
    // 初始化时执行第一次请求
    _fetchFuture = _fetch();
  }

  Future<void> _fetch() async {
    final firebaseUser = await FirebaseAuth.instance.currentUser;

    if (firebaseUser != null) {
      try {
        final ds = await FirebaseFirestore.instance
            .collection('users')
            .doc(firebaseUser.email)
            .get();
        
        setState(() {
          myEmail = ds.data()!['email'] ?? '';
          fname = ds.data()!['first name'] ?? '';
          lname = ds.data()!['last name'] ?? '';
          myAddress = ds.data()!['address'] ?? '';
          // 修正int类型的兜底值
          Bdate = ds.data()!['age'] ?? 0;
        });
        print(myAddress);
      } catch (e) {
        print(e);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    print('TabPage3 build');
    return Scaffold(
      body: RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: () async {
          // 刷新时重新赋值Future，触发FutureBuilder重新执行
          setState(() {
            _fetchFuture = _fetch();
          });
          await _fetchFuture;
        },
        child: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
                // address
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 25.0),
                  child: Container(
                    padding: EdgeInsets.all(15),
                    decoration: BoxDecoration(
                      color: bgColor,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Row(
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'address'.toUpperCase(),
                                      style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16,
                                      ),
                                    ),
                                    SizedBox(height: 5),
                                    // 使用保存的Future变量
                                    FutureBuilder(
                                      future: _fetchFuture,
                                      builder: (context, snapshot) {
                                        if (snapshot.connectionState != ConnectionState.done) {
                                          return Text('loading...');
                                        }

                                        return Text(
                                          '$myAddress',
                                          softWrap: false,
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            color: grey,
                                            fontSize: 14,
                                          ),
                                        );
                                      },
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                        IconButton(
                          onPressed: () async {
                            // 从更新页面返回后，主动触发刷新
                            await Navigator.push(context,
                                MaterialPageRoute(builder: (context) {
                              return updateAddress();
                            }));
                            setState(() {
                              _fetchFuture = _fetch();
                            });
                          },
                          icon: Icon(Icons.edit),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

额外优化点 #

• 在updateAddress页面返回后，主动触发一次刷新，确保用户修改地址后能立即看到最新数据；
• 改用async/await替代then/catchError，代码可读性更好；
• 将_fetch方法的返回类型明确为Future<void>，避免类型歧义。

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