Flutter中能否不使用FutureBuilder，直接用Future<String>填充Text()组件？

核心结论 #

不能直接将Future<String>转换为String后直接放入Text()组件中。因为Future本质是异步操作的占位对象，它代表的是“尚未完成的异步任务结果”，在代码执行到Text组件的时刻，异步任务大概率还没完成，直接使用的话只会显示Future对象的字符串表示（比如Instance of 'Future<String>'），而非你需要的实际数据。

替代方案：通过StatefulWidget状态管理处理异步数据 #

如果不想用FutureBuilder，可以借助StatefulWidget的状态变量来存储异步结果，通过setState触发UI更新。具体实现如下：

import 'package:flutter/material.dart';
import 'cocktails.dart';

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

  @override
  State<CocktailScreen> createState() => _CocktailScreenState();
}

class _CocktailScreenState extends State<CocktailScreen> {
  // 状态变量：存储分类数据、错误信息、加载状态
  String? _category;
  String? _error;
  bool _isLoading = true;

  final Cocktails _cocktails = Cocktails();

  Future<String> _getData() async {
    var data = await _cocktails.getCocktailByName('margarita');
    String category = data['drinks'][0]['strCategory'];
    print('Category: ${data["drinks"][0]["strCategory"]}');
    return category;
  }

  @override
  void initState() {
    super.initState();
    // 初始化时启动异步任务
    _fetchData();
  }

  void _fetchData() async {
    try {
      final category = await _getData();
      setState(() {
        _category = category;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _error = e.toString();
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    Widget body;
    if (_isLoading) {
      body = const CircularProgressIndicator();
    } else if (_error != null) {
      body = Text(_error!);
    } else {
      body = Text(_category ?? '无数据');
    }

    return Center(child: body);
  }
}

关键细节说明 #

• 把异步任务放在initState中，确保组件初始化时仅执行一次API调用，避免原代码中build方法每次触发都重复请求的问题；
• 通过setState更新状态时，Flutter会重新执行build方法，此时_category已持有实际字符串值，可直接传入Text组件；
• 额外处理了加载中和错误状态，保证UI在异步任务的不同阶段都有合理的展示。

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