Flutter中FutureBuilder内的数字TextField首次无法输入问题

问题根源 #

FutureBuilder会在future状态变化（从等待到完成）时触发多次build，导致嵌套的TextField组件被重建，首次点击时刚好处于状态切换节点，输入框的输入状态未正确与输入法绑定，进而出现弹键盘但无法输入的情况。你尝试的autoFocus、focusNode方案之所以无效，是因为没有解决组件重建导致的状态丢失核心问题。

具体修复方案 #

1. 将TextField封装为独立的StatefulWidget

把输入框从FutureBuilder的builder逻辑中抽离，通过独立组件保持自身状态，避免被FutureBuilder的重建影响：

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

  @override
  State<NumberInputField> createState() => _NumberInputFieldState();
}

class _NumberInputFieldState extends State<NumberInputField> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      keyboardType: TextInputType.number,
      autocorrect: false,
      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
    );
  }
}

在FutureBuilder中使用该组件：

FutureBuilder(
  future: fetchProducts(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return const NumberInputField();
    } else {
      return const CircularProgressIndicator();
    }
  },
)

2. 固定Future实例，避免重复执行

直接在FutureBuilder参数中写fetchProducts()会导致每次build都创建新的Future，触发不必要的重建。将Future初始化放在initState中，确保只执行一次：

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

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  late Future<List<Product>> _productsFuture;

  @override
  void initState() {
    super.initState();
    _productsFuture = fetchProducts(); // 仅初始化一次
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _productsFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return TextField(
            key: const ValueKey('product_number_input'), // 用Key保持组件身份
            keyboardType: TextInputType.number,
            autocorrect: false,
          );
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

3. 适配Android输入法的额外配置

部分Android机型的数字输入法存在适配问题，添加以下配置可优化兼容性：

TextField(
  keyboardType: const TextInputType.numberWithOptions(decimal: false),
  autocorrect: false,
  enableSuggestions: false,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)

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